0
History 1990 – Applets 1999 – ActiveX Control in IE5 2004 – Ajax (gMail & gMaps) 2006 - W3C Spec
When Ajax Needed Real-time form data validation Autocompletion Load on demand Sophisticated user interface controls an...
Technologies HTML and CSS for presentation The Document Object Model (DOM) for dynamic display  of and interaction with ...
How Ajax Works
The Anatomy of an Ajax Interaction                      1. A client event occurs.                      2. An XMLHttpReques...
Creating XMLHttpRequest Objectvar oReq = new XMLHttpRequest;function getXMLHttpRequest() {  if (window.XMLHttpRequest) {  ...
AttributesreadyState           The readyState code changes value                     from 0 to 4 during a request cycle:  ...
Methodsopen(mode, url, boolean)   mode: type of request: GET or POST                           url: the location of the fi...
Drawbacks Cannot use back button on browser                Example Dynamic web page updates also make it difficult  to b...
Ajax
Upcoming SlideShare
Loading in...5
×

Ajax

697

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "Ajax"

  1. 1. History 1990 – Applets 1999 – ActiveX Control in IE5 2004 – Ajax (gMail & gMaps) 2006 - W3C Spec
  2. 2. When Ajax Needed Real-time form data validation Autocompletion Load on demand Sophisticated user interface controls and effects Refreshing data and server push Partial submit Page as an application
  3. 3. Technologies HTML and CSS for presentation The Document Object Model (DOM) for dynamic display of and interaction with data XML for the interchange of data The XMLHttpRequest object for asynchronous communication JavaScript to bring these technologies together
  4. 4. How Ajax Works
  5. 5. The Anatomy of an Ajax Interaction 1. A client event occurs. 2. An XMLHttpRequest object is created and configured. 3. The XMLHttpRequest object makes a call. 4. The request is processed by the ValidateServlet. 5. The ValidateServlet returns an XML document containing the result. 6. The XMLHttpRequest object calls the callback() function and processes the result. 7. The HTML DOM is updated.
  6. 6. Creating XMLHttpRequest Objectvar oReq = new XMLHttpRequest;function getXMLHttpRequest() { if (window.XMLHttpRequest) { return new window.XMLHttpRequest; } else { try { return new ActiveXObject("MSXML2.XMLHTTP.3.0"); } catch (ex) { return null; } }}
  7. 7. AttributesreadyState The readyState code changes value from 0 to 4 during a request cycle: 0: not initialized. 1: connection established. 2: request received. 3: processing. 4: finished and response is ready.status 200: "OK" 404: Page not found.onreadystatechange callback method assigned via this attributeresponseText holds the response data as a string of characters.responseXml holds the response data as XML data.
  8. 8. Methodsopen(mode, url, boolean) mode: type of request: GET or POST url: the location of the file boolean: true (asynchronous) or false (synchronous).send("string") null for a GET command (in native mode; null not passed with ActiveXExample
  9. 9. Drawbacks Cannot use back button on browser Example Dynamic web page updates also make it difficult to bookmark and return to a particular state of the application. The asynchronous callback-style of programming required can lead to complex code that is hard to maintain, debug and test
  1. A particular slide catching your eye?

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

×