Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Technology Introduction
Collin Smith (Dec. 16, 2006)
AJAXAJAX
AJAX OutlineAJAX Outline
 What is AJAX?
 Benefits
 Real world examples
 How it works
 Code review
 Samples
What is AJAX?What is AJAX?
 Asynchronous JavaScript and XML(AJAX)
 Web development technique for creating web applicatio...
BenefitsBenefits
 Improves the user experience
 Analyzing information typed into browser in real time
 Provide a richer...
Real World ExamplesReal World Examples
 Google Maps (http://maps.google.com/) (slidable maps)
 My Yahoo! (http://my.yaho...
How it worksHow it works
 AJAX runs in your browser
 Works with asynchronous data transfers(HTTP requests)
between the b...
1 – XMLHttpRequest object1 – XMLHttpRequest object
 A page element must make a javascript call
 The javascript function ...
2 - Sending the request2 - Sending the request
 Once the XMLHttpRequest object has been created it must
be set up to call...
3 - Handling the Response3 - Handling the Response
 Implementation of the javascript method which will be used
to handle ...
readyState propertyreadyState property
 The XMLHttpRequest readyState property defines the
current state of the XMLHttpRe...
Sample CodeSample Code
 Simply unzip the sample code into a JSP Location and go
to index.jsp
 There are various examples...
ReferencesReferences
 http://en.wikipedia.org/wiki/Ajax_%28programming%29
 http://www.w3schools.com/ajax/default.asp
Upcoming SlideShare
Loading in …5
×

Ajax Introduction

450 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ajax Introduction

  1. 1. Web Technology Introduction Collin Smith (Dec. 16, 2006) AJAXAJAX
  2. 2. AJAX OutlineAJAX Outline  What is AJAX?  Benefits  Real world examples  How it works  Code review  Samples
  3. 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. 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. 5. Real World ExamplesReal World Examples  Google Maps (http://maps.google.com/) (slidable maps)  My Yahoo! (http://my.yahoo.com/) (shuffling windows)
  6. 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. 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. 8. 2 - Sending the request2 - Sending the request  Once the XMLHttpRequest object has been created it must be set up to call the server  http.open("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. 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. 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. 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. 12. ReferencesReferences  http://en.wikipedia.org/wiki/Ajax_%28programming%29  http://www.w3schools.com/ajax/default.asp

×