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

339 views
301 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
339
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×