AjaxAjaxbyby

K.SIVA KUMARK.SIVA KUMAR

AJAX = Asynchronous JavaScript and AJAX = Asynchronous JavaScript and XML.XML.

AJAX is not a new programming language, AJAX is not a new programming language, but a new way to use existing standards.but a new way to use existing standards.

AJAX is the art of exchanging data with a AJAX is the art of exchanging data with a server, and update parts of a web page - server, and update parts of a web page - without reloading the whole page.without reloading the whole page.

AJAX is about updating parts of a web AJAX is about updating parts of a web page, without reloading the whole page.page, without reloading the whole page.

What You Should Already KnowWhat You Should Already Know

Before you continue you should have a Before you continue you should have a basic understanding of the following:basic understanding of the following:

HTML / XHTMLHTML / XHTML

CSSCSS

JavaScript / DOMJavaScript / DOM

Rich Internet Application (RIA) TechnologyRich Internet Application (RIA) TechnologyAJAX is most viable RIA technology so far. Its getting tremendous industry AJAX is most viable RIA technology so far. Its getting tremendous industry momentum and several toolkit and framworks areemerging. But same time momentum and several toolkit and framworks areemerging. But same time JAX has browser incompatibility and it is supported by Java Script which is JAX has browser incompatibility and it is supported by Java Script which is hard to maintain nand debug.hard to maintain nand debug.AJAX Is Based On Open StandardsAJAX Is Based On Open StandardsAJAX is based on the following open standards:AJAX is based on the following open standards:Browser-based presentation using HTML and Cascading Style Sheets Browser-based presentation using HTML and Cascading Style Sheets (CSS)(CSS)Data stored in XML format and fetched from the serverData stored in XML format and fetched from the serverBehind-the-scenes data fetches using XMLHttpRequest objects in the Behind-the-scenes data fetches using XMLHttpRequest objects in the browserbrowserJavaScript to make everything happenJavaScript to make everything happenAJAX - Recommended KnowledgeAJAX - Recommended KnowledgeIt is highly recommended that you are familiar with HTML and Javascript It is highly recommended that you are familiar with HTML and Javascript before attempting this tutorial. before attempting this tutorial.

JavaScriptJavaScriptLoosely typed scripting languageLoosely typed scripting languageJavaScript function is called when an event in a page occursJavaScript function is called when an event in a page occursGlue for the whole AJAX operationGlue for the whole AJAX operationDOMDOMAPI for accessing and manipulating structured documentsAPI for accessing and manipulating structured documentsRepresents the structure of XML and HTML documentsRepresents the structure of XML and HTML documentsCSSCSSAllows for a clear separation of the presentation style from the Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScriptcontent and may be changed programmatically by JavaScriptXMLHttpRequestXMLHttpRequestJavaScript object that performs asynchrous interaction with the JavaScript object that performs asynchrous interaction with the serverserver

Here is the list of famous web applications which are using AJAXHere is the list of famous web applications which are using AJAXGoogle MapsGoogle MapsA user can drag the entire map by using the mouse instead of clicking on a A user can drag the entire map by using the mouse instead of clicking on a button or somethingbutton or somethinghttp://http://maps.google.commaps.google.com//Google SuggestGoogle SuggestAs you type, Google will offer suggestions. Use the arrow keys to navigate As you type, Google will offer suggestions. Use the arrow keys to navigate the resultsthe resultshttp://http://www.google.com/webhp?completewww.google.com/webhp?complete=1&hl=en=1&hl=enGmailGmailGmail is a new kind of webmail, built on the idea that email can be more Gmail is a new kind of webmail, built on the idea that email can be more intuitive, efficient and usefulintuitive, efficient and usefulhttp://http://gmail.comgmail.com//Yahoo Maps (new)Yahoo Maps (new)Now it's even easier and more fun to get where you're going!Now it's even easier and more fun to get where you're going!http://http://maps.yahoo.commaps.yahoo.com//

Google SuggestGoogle SuggestAJAX was made popular in 2005 by AJAX was made popular in 2005 by Google, with Google Suggest.Google, with Google Suggest.Google Suggest is using AJAX to create a Google Suggest is using AJAX to create a very dynamic web interface: When you very dynamic web interface: When you start typing in Google's search box, a start typing in Google's search box, a JavaScript sends the letters off to a server JavaScript sends the letters off to a server and the server returns a list of and the server returns a list of suggestions.suggestions.

The keystone of AJAX is the XMLHttpRequest The keystone of AJAX is the XMLHttpRequest object. object. The XMLHttpRequest ObjectThe XMLHttpRequest ObjectAll modern browsers support the All modern browsers support the XMLHttpRequest object (IE5 and IE6 use an XMLHttpRequest object (IE5 and IE6 use an ActiveXObject).ActiveXObject).The XMLHttpRequest object is used to The XMLHttpRequest object is used to exchange data with a server behind the scenes. exchange data with a server behind the scenes. This means that it is possible to update parts of This means that it is possible to update parts of a web page, without reloading the whole page.a web page, without reloading the whole page.

Create an XMLHttpRequest ObjectCreate an XMLHttpRequest ObjectAll modern browsers (IE7+, Firefox, Chrome, Safari, and All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object.Opera) have a built-in XMLHttpRequest object.Syntax for creating an XMLHttpRequest object:Syntax for creating an XMLHttpRequest object:variablevariable=new XMLHttpRequest();=new XMLHttpRequest();Old versions of Internet Explorer (IE5 and IE6) uses an Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:ActiveX Object:variablevariable=new ActiveXObject("Microsoft.XMLHTTP");=new ActiveXObject("Microsoft.XMLHTTP");To handle all modern browsers, including IE5 and IE6, To handle all modern browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject:not, create an ActiveXObject:

The XMLHttpRequest object is used to exchange data with a server.The XMLHttpRequest object is used to exchange data with a server.Send a Request To a ServerSend a Request To a ServerTo send a request to a server, we use the open() and send() To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:methods of the XMLHttpRequest object:xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();xmlhttp.send();

MethodDescriptionMethodDescriptionopen(open(method,url,asyncmethod,url,async)Specifies the type of )Specifies the type of request, the URL, and if the request should be handled request, the URL, and if the request should be handled asynchronously or not.asynchronously or not.

methodmethod: the type of request: GET or POST: the type of request: GET or POSTurlurl: the location of the file on the server: the location of the file on the serverasyncasync: true (asynchronous) or false : true (asynchronous) or false (synchronous)send((synchronous)send(stringstring)Sends the request off to the server.)Sends the request off to the server.

stringstring: Only used for POST requests: Only used for POST requests

GET or POST?GET or POST?GET is simpler and faster than POST, and can GET is simpler and faster than POST, and can be used in most cases.be used in most cases.However, always use POST requests when:However, always use POST requests when:A cached file is not an option (update a file or A cached file is not an option (update a file or database on the server)database on the server)Sending a large amount of data to the server Sending a large amount of data to the server (POST has no size limitations)(POST has no size limitations)Sending user input (which can contain unknown Sending user input (which can contain unknown characters), POST is more robust and secure characters), POST is more robust and secure than GETthan GET

Asynchronous - True or False?Asynchronous - True or False?

Async=trueAsync=true

With AJAX, the JavaScript does not have With AJAX, the JavaScript does not have to wait for the server response, but can to wait for the server response, but can instead:instead:

execute other scripts while waiting for execute other scripts while waiting for server responseserver response

deal with the response when the response deal with the response when the response readyready

Async=falseAsync=falseUsing async=false is not recommended, but for Using async=false is not recommended, but for a few small requests this can be ok.a few small requests this can be ok.Remember that the JavaScript will NOT continue Remember that the JavaScript will NOT continue to execute, until the server response is ready. If to execute, until the server response is ready. If the server is busy or slow, the application will the server is busy or slow, the application will hang or stop.hang or stop.Note:Note: When you use async=false, do NOT write  When you use async=false, do NOT write an onreadystatechange function - just put the an onreadystatechange function - just put the code after the send() statementcode after the send() statement

Server ResponseServer Response

To get the response from a server, use the responseText To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object.or responseXML property of the XMLHttpRequest object.PropertyProperty Description Description responseTextresponseText get the response data as a string get the response data as a string responseXMLresponseXML get the response data as XML dataget the response data as XML data

The responseText PropertyThe responseText PropertyIf the response from the server is not XML, use the If the response from the server is not XML, use the responseText property.responseText property.The responseText property returns the response as a The responseText property returns the response as a string, and you can use it accordinglystring, and you can use it accordingly

The responseXML PropertyThe responseXML Property

If the response from the server is XML, If the response from the server is XML, and you want to parse it as an XML object, and you want to parse it as an XML object, use the responseXML property:use the responseXML property:

The onreadystatechange eventThe onreadystatechange event

When a request to a server is sent, we When a request to a server is sent, we want to perform some actions based on want to perform some actions based on the response.the response.

The onreadystatechange event is The onreadystatechange event is triggered every time the readyState triggered every time the readyState changes.changes.

The readyState property holds the status The readyState property holds the status of the XMLHttpRequest.of the XMLHttpRequest.

Three important properties of the XMLHttpRequest object:Three important properties of the XMLHttpRequest object:PropertyProperty Description DescriptionOnreadystatechange Stores a function (or the name of a Onreadystatechange Stores a function (or the name of a

function) to be called automatically each time function) to be called automatically each time the readyState property changes the readyState property changes readyStatereadyState Holds the status of the XMLHttpRequest. Holds the status of the XMLHttpRequest.

Changes from 0 to 4:  Changes from 0 to 4:  0: request not initialized  0: request not initialized  1: server connection established 1: server connection established 2: request received  2: request received  3: processing request  3: processing request  4: request finished and response is ready 4: request finished and response is ready

StatusStatus 200: "OK" 200: "OK" 404: Page not found 404: Page not found

In the onreadystatechange event, we In the onreadystatechange event, we specify what will happen when the server specify what will happen when the server response is ready to be processed.response is ready to be processed.

When readyState is 4 and status is 200, When readyState is 4 and status is 200, the response is readythe response is ready

Note:Note: The onreadystatechange event is  The onreadystatechange event is triggered four times, one time for each triggered four times, one time for each change in readyState.change in readyState.

Using a Callback FunctionUsing a Callback Function

A callback function is a function passed as a A callback function is a function passed as a parameter to another function.parameter to another function.

If you have more than one AJAX task on your If you have more than one AJAX task on your website, you should create ONE standard website, you should create ONE standard function for creating the XMLHttpRequest object, function for creating the XMLHttpRequest object, and call this for each AJAX task.and call this for each AJAX task.

The function call should contain the URL and The function call should contain the URL and what to do on onreadystatechange (which is what to do on onreadystatechange (which is probably different for each call):probably different for each call):