Upload
sampetruda
View
712
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Web Technology Introduction
Collin Smith (Dec. 16, 2006)
AJAX AJAX
AJAX OutlineAJAX OutlineAJAX OutlineAJAX Outline
What is AJAX? Benefits Real world examples How it works Code review Samples
What is AJAX?What is AJAX?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
BenefitsBenefitsBenefitsBenefits
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
Real World ExamplesReal World ExamplesReal World ExamplesReal World Examples
Google Maps (http://maps.google.com/) (slidable maps)
My Yahoo! (http://my.yahoo.com/) (shuffling windows)
How it worksHow it worksHow 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
1 – XMLHttpRequest object1 – XMLHttpRequest object1 – 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)
2 - Sending the request2 - Sending the request2 - 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
3 - Handling the Response3 - Handling the Response3 - 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
readyState propertyreadyState propertyreadyState 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
Sample CodeSample CodeSample 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)
ReferencesReferencesReferencesReferences
http://en.wikipedia.org/wiki/Ajax_%28programming%29 http://www.w3schools.com/ajax/default.asp