Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. What is AJAX ?• Asynchronous Javascript and XML.• Not a stand-alone language or technology.• It is a technique that combines a set ofknown technologies in order to create fasterand more user friendly web pages.• It is a client side technology.
  2. 2. 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.
  3. 3. Technologies Used• AJAX uses:– Javascript (for altering the page)– XML (for information exchange)– ASP or JSP (server side)
  4. 4. Simple Processing• AJAX is based on Javascript, and the mainfunctionality is to access the web server inside theJavascript code.• We access to the server using special objects; wesend data and retrieve data.• When user initiates an event, a javascript functionis called which accesses server using the objects.• The received information is shown to the user bymeans of the Javascript’s functions.
  5. 5. 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.
  6. 6. Data Exchange in AJAX• In AJAX:
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. C/S Processes• Most of the time client requires two files– Html page: handles GUI and calls a function ofJavaScript.– JavaScript: handles the business logic of thesystem• In JavaScript, a request is sent to client andresponse is taken from server via XMLHTTPobject• Response of server should be returned in xmlfile structure
  12. 12. 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.
  13. 13. 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>
  14. 14. JavaScript of Examplefunction showCustomer(str) {var url="getcustomer.asp?sid=" + Math.random() + "&q=" + strxmlHttp=GetXmlHttpObject(stateChanged)xmlHttp.open("GET", url , true)xmlHttp.send(null)}function stateChanged() {if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML = xmlHttp.responseText}}
  15. 15. 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>")
  16. 16. 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.
  17. 17. Creating the object• For IE 5.5:objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)• For Mozilla:objXmlHttp=new XMLHttpRequest()
  18. 18. 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.
  19. 19. Retrieving information• We get the returned value with the property“xmlHttp.responseText”.
  20. 20. Pros/Cons• Advantages:– Independent of server technology.– Apart from obtaining the XMLHTTP object, all processing is samefor all browser types, because Javascript is used.– Permits the development of faster and more interactive webapplications.• Disadvantages:– The back button problem. People think that when they press backbutton, they will return to the last change they made, but in AJAXthis doesn not hold.– Possible network latency problems. People should be givenfeedback about the processing.– Does not run on all browsers.