Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Ajax byK.SIVA KUMAR
  2. 2. AJAX = Asynchronous JavaScript andXML.AJAX is not a new programminglanguage, but a new way to use existingstandards.AJAX is the art of exchanging data with aserver, and update parts of a web page -without reloading the whole page.
  3. 3. AJAX is about updating parts of a webpage, without reloading the whole page.What You Should Already KnowBefore you continue you should have abasic understanding of the following:HTML / XHTMLCSSJavaScript / DOM
  4. 4. Rich Internet Application (RIA) TechnologyAJAX is most viable RIA technology so far. Its getting tremendous industrymomentum and several toolkit and framworks areemerging. But same timeJAX has browser incompatibility and it is supported by Java Script which ishard to maintain nand debug.AJAX Is Based On Open StandardsAJAX is based on the following open standards:Browser-based presentation using HTML and Cascading Style Sheets(CSS)Data stored in XML format and fetched from the serverBehind-the-scenes data fetches using XMLHttpRequest objects in thebrowserJavaScript to make everything happenAJAX - Recommended KnowledgeIt is highly recommended that you are familiar with HTML and Javascriptbefore attempting this tutorial.
  5. 5. JavaScriptLoosely typed scripting languageJavaScript function is called when an event in a page occursGlue for the whole AJAX operationDOMAPI for accessing and manipulating structured documentsRepresents the structure of XML and HTML documentsCSSAllows for a clear separation of the presentation style from thecontent and may be changed programmatically by JavaScriptXMLHttpRequestJavaScript object that performs asynchrous interaction with theserver
  6. 6. Here is the list of famous web applications which are using AJAXGoogle MapsA user can drag the entire map by using the mouse instead of clicking on abutton or somethinghttp://maps.google.com/Google SuggestAs you type, Google will offer suggestions. Use the arrow keys to navigatethe resultshttp://www.google.com/webhp?complete=1&hl=enGmailGmail is a new kind of webmail, built on the idea that email can be moreintuitive, efficient and usefulhttp://gmail.com/Yahoo Maps (new)Now its even easier and more fun to get where youre going!http://maps.yahoo.com/
  7. 7. Google SuggestAJAX was made popular in 2005 byGoogle, with Google Suggest.Google Suggest is using AJAX to create avery dynamic web interface: When youstart typing in Googles search box, aJavaScript sends the letters off to a serverand the server returns a list ofsuggestions.
  8. 8. The keystone of AJAX is the XMLHttpRequestobject.The XMLHttpRequest ObjectAll modern browsers support theXMLHttpRequest object (IE5 and IE6 use anActiveXObject).The XMLHttpRequest object is used toexchange data with a server behind the scenes.This means that it is possible to update parts ofa web page, without reloading the whole page.
  9. 9. Create an XMLHttpRequest ObjectAll modern browsers (IE7+, Firefox, Chrome, Safari, andOpera) have a built-in XMLHttpRequest object.Syntax for creating an XMLHttpRequest object:variable=new XMLHttpRequest();Old versions of Internet Explorer (IE5 and IE6) uses anActiveX Object:variable=new ActiveXObject("Microsoft.XMLHTTP");To handle all modern browsers, including IE5 and IE6,check if the browser supports the XMLHttpRequestobject. If it does, create an XMLHttpRequest object, ifnot, create an ActiveXObject:
  10. 10. The XMLHttpRequest object is used to exchange data with a server.Send a Request To a ServerTo send a request to a server, we use the open() and send()methods of the XMLHttpRequest object:xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();MethodDescriptionopen(method,url,async)Specifies the type ofrequest, the URL, and if the request should be handledasynchronously or not.method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false(synchronous)send(string)Sends the request off to the server.string: Only used for POST requests
  11. 11. GET or POST?GET is simpler and faster than POST, and canbe used in most cases.However, always use POST requests when:A cached file is not an option (update a file ordatabase on the server)Sending a large amount of data to the server(POST has no size limitations)Sending user input (which can contain unknowncharacters), POST is more robust and securethan GET
  12. 12. Asynchronous - True or False?Async=trueWith AJAX, the JavaScript does not haveto wait for the server response, but caninstead:execute other scripts while waiting forserver responsedeal with the response when the responseready
  13. 13. Async=falseUsing async=false is not recommended, but fora few small requests this can be ok.Remember that the JavaScript will NOT continueto execute, until the server response is ready. Ifthe server is busy or slow, the application willhang or stop.Note: When you use async=false, do NOT writean onreadystatechange function - just put thecode after the send() statement
  14. 14. Server Response To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object. Property Description responseText get the response data as a string responseXML get the response data as XML dataThe responseText Property If the response from the server is not XML, use the responseText property. The responseText property returns the response as a string, and you can use it accordingly
  15. 15. The responseXML PropertyIf the response from the server is XML,and you want to parse it as an XML object,use the responseXML property:
  16. 16. The onreadystatechange eventWhen a request to a server is sent, wewant to perform some actions based onthe response.The onreadystatechange event istriggered every time the readyStatechanges.The readyState property holds the statusof the XMLHttpRequest.
  17. 17. Three important properties of the XMLHttpRequest object:Property DescriptionOnreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changesreadyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is readyStatus 200: "OK" 404: Page not found
  18. 18. In the onreadystatechange event, wespecify what will happen when the serverresponse is ready to be processed.When readyState is 4 and status is 200,the response is readyNote: The onreadystatechange event istriggered four times, one time for eachchange in readyState.
  19. 19. Using a Callback Function A callback function is a function passed as a parameter to another function. If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task. The function call should contain the URL and what to do on onreadystatechange (which is probably different for each call):