understanding ajax by software outsourcing company india
TRANSCRIPT
iFour Consultancy
AJAX
What is Ajax?
AJAX = Asynchronous JavaScript and XML.AJAX is a technique for creating fast and dynamic web pages.AJAX allows web pages to be updated asynchronously by exchanging small
amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.
ASP.NET software company in india
Why use Ajax?
Client/Server Apps:Dynamic dataStatic forms, controls, code, etc.Efficient, but not flexible
Traditional Web Apps:Dynamic dataDynamic forms, controls, code, etc.Flexible, but inefficient, and noticeably slow
Ajax Apps:Dynamic dataStatic or dynamic forms, controls, code, etc.Best of both worlds
ASP.NET software company in india
Why use Ajax?
Geeky reasons:
Multithreaded data retrieval from Web servers Pre-fetch data before needed Progress indicators Appearance of speed Avoids need for setTimeout()
Less bandwidth required; less server load Reload partial page, not entire page Load data only, not even partial page
ASP.NET software company in india
JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.
All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used. Syntax :• $.ajax( {name:value, name:value, ... } )• The parameters specifies one or more name/value pairs for the AJAX request.
Possible names/values in the table below:• async : A Boolean value indicating whether the request should be handled asynchronous
or not. Default is true• beforeSend() : A function to run before the request is sent
jQuery AJAX
ASP.NET software company in india
• cache : A Boolean value indicating whether the browser should cache the requested pages. Default is true
• contentType : The content type used when sending data to the server. • context : Specifies the "this" value for all AJAX related callback functions• data : Specifies data to be sent to the server• dataType : The data type expected of the server response.• complete(status) : A function to run when the request is finished (after success and error functions)• error(status,error) : A function to run if the request fails.• success(result,status) : A function to be run when the request succeeds• url : Specifies the URL to send the request to. Default is the current page• type : Specifies the type of request. (GET or POST)
jQuery AJAX
ASP.NET software company in india
Here is the simple syntax for load() method [selector].load( URL , [data] , [callback] ); URL : The URL of the server-side resource to which the request is sent. data : This optional parameter represents an object whose properties are serialized into
properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback : A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.
Loading Simple Data[selector].load( URL, [data], [callback] );
[selector].load( URL, [data], [callback] );
ASP.NET software company in india
Here is the simple syntax for getJSON() method [selector].getJSON( URL , [data] , [callback] );
URL : The URL of the server-side resource contacted via the GET method. data : An object whose properties serve as the name/value pairs used to construct a
query string to be appended to the URL, or a preformatted and encoded query string. callback : A function invoked when the request completes. The data value resulting from
digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.
Getting JSON data
ASP.NET software company in india
Following are all important JQuery AJAX methods which you can use based on your programming need.
• jQuery.ajax(options) : Load a remote page using an HTTP request.• jQuery.ajaxSetup(options) : Setup global settings for AJAX requests.• jQuery.get( url, [data], [callback], [type] ) : Load a remote page using an HTTP GET
request.• jQuery.getJSON( url, [data], [callback] ) : Load JSON data using an HTTP GET request.• jQuery.getScript( url, [callback] ) : Loads and executes a JavaScript file using an HTTP GET
request.
jQuery AJAX Methods
ASP.NET software company in india
• jQuery.post( url, [data], [callback], [type] ) : Load a remote page using an HTTP POST request.
• load( url, [data], [callback] ) : Load HTML from a remote file and inject it into the DOM.• serialize( ) : Serializes a set of input elements into a string of data.• serializeArray( ) : Serializes all forms and form elements like the .serialize() method but
returns a JSON data structure for you to work with.
jQuery AJAX Methods
ASP.NET software company in india
You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available• ajaxComplete( callback ) : Attach a function to be executed whenever an AJAX request
completes.• ajaxStart( callback ) : Attach a function to be executed whenever an AJAX request begins and
there is none already active.• ajaxError( callback ) : Attach a function to be executed whenever an AJAX request fails.• ajaxSend( callback ) : Attach a function to be executed before an AJAX request is sent.• ajaxStop( callback ) : Attach a function to be executed whenever all AJAX requests have ended.• ajaxSuccess( callback ) : Attach a function to be executed whenever an AJAX request
completes successfully.
jQuery AJAX Events
ASP.NET software company in india
Thank you
Software development company india