Your SlideShare is downloading. ×
Ajax Introduction
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ajax Introduction


Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web Technology Introduction Collin Smith (Dec. 16, 2006) AJAXAJAX
  • 2. AJAX OutlineAJAX Outline  What is AJAX?  Benefits  Real world examples  How it works  Code review  Samples
  • 3. What is AJAX?What is AJAX?  Asynchronous JavaScript and XML(AJAX)  Web development technique for creating web applications  Makes web pages more responsive by exchanging small amounts of data  Allows the web page to change its content without refreshing the whole page  A web browser technology independent of web server software
  • 4. BenefitsBenefits  Improves the user experience  Analyzing information typed into browser in real time  Provide a richer experience  Increases responsiveness of web pages  Improve bandwidth utilization  Only data which is required is retrieved from the server
  • 5. Real World ExamplesReal World Examples  Google Maps ( (slidable maps)  My Yahoo! ( (shuffling windows)
  • 6. How it worksHow it works  AJAX runs in your browser  Works with asynchronous data transfers(HTTP requests) between the browser and the web server  Http requests are sent by javascript calls without having to submit a form  XML is commonly used as the format for receiving server data but plain text may be used as well
  • 7. 1 – XMLHttpRequest object1 – XMLHttpRequest object  A page element must make a javascript call  The javascript function must create an XMLHttpRequest object which is used to contact the server  Javascript must determine whether the client is IE or Firefox  http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)  http = new XMLHttpRequest(); (Mozilla)
  • 8. 2 - Sending the request2 - Sending the request  Once the XMLHttpRequest object has been created it must be set up to call the server "GET", serverurl, true);  http.onreadystatechange = jsMethodToHandleResponse;  http.send(null);  The code above utilizes the XMLHttpRequest object to contact the server and retrieve server data  When the response returns the javascript method jsMethodToHandleResponse can update the page
  • 9. 3 - Handling the Response3 - Handling the Response  Implementation of the javascript method which will be used to handle the response (Event Handler)  function jsMethodToHandleResponse(str)  {  //simply take the response returned an update an html element with the returned value from the server  document.getElementById("result").innerHTML = str;  }  Now the page has communicated with the server without having to refresh the entire page
  • 10. readyState propertyreadyState property  The XMLHttpRequest readyState property defines the current state of the XMLHttpRequest object  Possible values for the readyState  Usually we are usually only concerned with state 4 State Description 0 The request is not initialized 1 The request has been setup 2 The request has been submitted 3 The request is in process 4 The request is completed
  • 11. Sample CodeSample Code  Simply unzip the sample code into a JSP Location and go to index.jsp  There are various examples that show some AJAX functionality  It is all JSP to make it easy to setup and easy to see the code.  The JSPs are generic enough to be easily to converted to other technologies (.NET or PHP)
  • 12. ReferencesReferences  