0
Ajax      byK.SIVA KUMAR
AJAX = Asynchronous JavaScript andXML.AJAX is not a new programminglanguage, but a new way to use existingstandards.AJAX i...
AJAX is about updating parts of a webpage, without reloading the whole page.What You Should Already KnowBefore you continu...
Rich Internet Application (RIA) TechnologyAJAX is most viable RIA technology so far. Its getting tremendous industrymoment...
JavaScriptLoosely typed scripting languageJavaScript function is called when an event in a page occursGlue for the whole A...
Here is the list of famous web applications which are using AJAXGoogle MapsA user can drag the entire map by using the mou...
Google SuggestAJAX was made popular in 2005 byGoogle, with Google Suggest.Google Suggest is using AJAX to create avery dyn...
The keystone of AJAX is the XMLHttpRequestobject.The XMLHttpRequest ObjectAll modern browsers support theXMLHttpRequest ob...
Create an XMLHttpRequest ObjectAll modern browsers (IE7+, Firefox, Chrome, Safari, andOpera) have a built-in XMLHttpReques...
The XMLHttpRequest object is used to exchange data with a server.Send a Request To a ServerTo send a request to a server, ...
GET or POST?GET is simpler and faster than POST, and canbe used in most cases.However, always use POST requests when:A cac...
Asynchronous - True or False?Async=trueWith AJAX, the JavaScript does not haveto wait for the server response, but caninst...
Async=falseUsing async=false is not recommended, but fora few small requests this can be ok.Remember that the JavaScript w...
Server Response  To get the response from a server, use the responseText  or responseXML property of the XMLHttpRequest ob...
The responseXML PropertyIf the response from the server is XML,and you want to parse it as an XML object,use the responseX...
The onreadystatechange eventWhen a request to a server is sent, wewant to perform some actions based onthe response.The on...
Three important properties of the XMLHttpRequest object:Property                   DescriptionOnreadystatechange Stores a ...
In the onreadystatechange event, wespecify what will happen when the serverresponse is ready to be processed.When readySta...
Using a Callback Function A callback function is a function passed as a  parameter to another function. If you have more...
Ajax
Upcoming SlideShare
Loading in...5
×

Ajax

741

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
741
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax"

  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):
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×