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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax Introduction

214
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
214
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 (http://maps.google.com/) (slidable maps)  My Yahoo! (http://my.yahoo.com/) (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  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. 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  http://en.wikipedia.org/wiki/Ajax_%28programming%29  http://www.w3schools.com/ajax/default.asp

×