Purpose of AJAX• Prevents unnecessary reloading of a page.• When we submit a form, although most of thepage remains the same, whole page is reloadedfrom the server.• This causes very long waiting times and waste ofbandwidth.• AJAX aims at loading only the necessaryinnformation, and making only the necessarychanges on the current page without reloading thewhole page.
Example• We want to input data into a textbox.• We want the textbox to have intellisenseproperty; guess entries according to input.• http://www.w3schools.com/ajax/ajax_example.asp• Only the ‘span’ part of the html code is changed.
Example(2)• Another example:http://www.w3schools.com/ajax/ajax_database.asp• Therefore, by using AJAX, unnecessaryexchange of data is prevented, web pagesbecome:– More interactive– Faster– More user friendly
History of AJAX• Starts with web pages• Static web pages– Static html page is loaded– No interaction with user• Dynamic web pages– Html page is generated dynamically– Interaction with user– Becomes slower as functionality increases– Speed becomes untolerable, so AJAX has beenborn
Alternative Technologies• Not a technology, but a combination oftechnologies.• Technologies with similar tasks:URLConnection, ASP and JSP• Other technologies returns whole page andclient loads it.• Only necessary data is returned and thatpart is updated
Structure of System• Client/Server architecture• XMLHTTP object is used to make requestand get response in Client side• Request can be done via “GET” or “POST”methods– “GET”: parameters are attached to the url usedto connect.– “POST”: parameters are sent as parameters to afunction• Not many changes in Server side– Response is a combination of xml tags
Examination of Sample• General process will be explained on anexample at http://www.w3schools.com/ajax/ajax_database.asp.• In this example, one html page and oneJavaSocket reside in Client side of thesystem while an ASP page resides in Serversides.
Html Code of Example<html><head><script src="selectcustomer.js"></script></head><body><form> Select a Customer:<select name="customers" onchange="showCustomer(this.value)"><option value="ALFKI">Alfreds Futterkiste<option value="NORTS ">North/South<option value="WOLZA">Wolski Zajazd</select></form><p><div id="txtHint"><b>Customer info will be listed here.</b></div></p></body></html>
ASP Code of Examplesql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="sql=sql & request.querystring("q")............ Open Connection to the DBrs.Open sql, connresponse.write("<table>")do until rs.EOFfor each x in rs.Fieldsresponse.write("<tr><td><b>" & x.name & "</b></td>")response.write("<td> & x.value & "</td></tr>")nextrs.MoveNextloopresponse.write("</table>")
XMLHTTP Object• The object that is used to connect to theremote server is called XMLHTTP.• It resembles the Java’s URL object that isused to access a specific URL and get thecontents.
Creating the object• For IE 5.5:objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)• For Mozilla:objXmlHttp=new XMLHttpRequest()
Sending information• After creating the object, we can send information to theweb server and get the answer using this object’sfunctions:• GET METHOD: xmlhttp.open(“GET”, url, true)xmlhttp.send()• POST METHOD: xmlhttp.open("POST", url, true)xmlhttp.send(“date=11-11-2006&name=Ali")• Third argument tells that data will be processes asynchronously. Whenserver responds, the “OnReadyStateChange” event handler will becalled.
Retrieving information• We get the returned value with the property“xmlHttp.responseText”.