An Introduction to AJAX

By : I. Moamin Abughazaleh Page 2 /25 How HTTP works? Classical HTTP Process

1. The visitor requests apage

Page 3 /25 2. The serversend the entire HTML,CSS and Javascript code atonce to the client 3. So,the communication issynchronious Page 4 /25 What is Javascript programming actually? What is Javascript programming?

It isprogramming the browsers. So,we are limited to the objects that the Page 5 /25 browserpresents us An Alternative for Managing requests - AJAX AJAXstandsforAsynchronousJavaScriptAnd XML. AJAXisbased onXMLHttpRequest object of Page 6 /25 Javascript so the browserand XMLHttpRequest isastandard http://www.w3.org/TR/XMLHttpRequest/ It was introduced with IE5.0asanActiveX object (1999) Later all the major browsers added XMLHttpRequest into their object bases. AJAX = Asynchronous JavaScript and XML It is atechniqueforcreatingbetter,faster,and moreinteractivewebapplications With XMLHttpRequest object JavaScriptcan tradedatawithawebserver,withoutreloading Page 7 /25 thepage AJAXuses“asynchronousdatatransfer” => allowingwebpagestorequestsmallbitsof informationfromtheserverinsteadofwhole pages We cancreate desktop application like web applications using AJAX,this paradigm isalso called “WEB2.0” programming AJAX - Based on Web Standards

AJAXisbasedonthefollowingwebstandards: XHTMLand CSS Presentation DOM Dynamic display ofand interaction with data XMLand XSLT Tranfering databack and forth Page 8 /25 XMLHttpRequest Asynchronoustransferofdata Javascript Bring these technologies together AJAXapplicationsarebrowserandplatform independent TheXMLHttpRequest objectissupportedin InternetExplorer5.0+,Safari1.2,Mozilla 1.0/ Firefox,Opera8+,andNetscape7. How does it work? Page 9 /25

After the creation ofXMLHttpRequest object with the open method serverrequest should be prepared: request method, URL, async Page 19 /25 .open( ) “method” canbe‘GET’ or ‘POST’ “URL” determines where the request will bemade If GET=>parameters will beadded to the end ofthe URL IFPOST=>parameters will beadded inthe package “async” (true/false),specifieswhethertherequest shouldbehandledasynchronouslyornot– trueis default The Code (cont’d)

After the creation ofXMLHttpRequest itshould besentto the serverwith send() method request.send(null); Page 20 /25 Used if the method isGET request.send([data]);

Used if the method isPOST Example: request.send('var1='+value1+'&var2='+value2); The Code (cont’d)

To get the response message from the serverwe should determine which method will work when the request object’s Page 21 /25 onreadystatechange event isfired. request.onreadystatechange = someFunction; function someFunction() { if(request.readyState == 4){ var response = request.responseText; //here do whatever with the response } } The Code (cont’d)

onreadystatechange Specifiesareferencetoaneventhandlerforaneventthatfires ateverystatechange readyState Returnsthestateoftheobjectasfollows: Page 22 /25 0=uninitialized – open()hasnotyetbeencalled. 1=open– send()hasnotyetbeencalled. 2=sent– send()hasbeencalled,headersandstatusareavailable. 3=receiving– Downloading,responseText holdspartialdata (althoughthisfunctionalityisnotavailableinIE[3]) 4=loaded– Done. responseText Returnstheresponseasastring. The Code - Using GET

var url = "get_data.php"; var params = "lorem=ipsum&name=binny"; http.open("GET", url+"?"+params, true); http.onreadystatechange = function() {

Page 23 /25 //Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(null); The Code - Using POST we choose post var url = "get_data.php"; var params = "lorem=ipsum&name=binny"; We have to setthe http.open("POST", url, true); content header

//Send the proper header information along with the request http.setRequestHeader("Content-type", "application/x-www-form-

Page 24 /25 urlencoded"); http.setRequestHeader("Content-length", params.length); http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() { //Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } NotNULL,and http.send(params); parameters aren’t seperated with “?” Page 25 / EXAMPLES