1 / 12

AJAX

AJAX. Asynchronous JavaScript & XML A short introduction. AJAX intro. AJAX uses asynchronous data transfer (based on XMLHttpRequest ) between the browser and the web - server, allowing to request smaller bits of information from the server than the full-reload ;

chadwick-barrera
Download Presentation

AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Asynchronous JavaScript & XML A short introduction

  2. AJAX intro • AJAX uses asynchronous data transfer (based on XMLHttpRequest ) between the browser and the web-server, allowing to • request smaller bits of information from the server than the full-reload; • request additional information from other pages where the result should be “embedded” into the current page; • execute an action on the serverwithout moving to the next page (so if fail then you don’t have to go back: consider for example submitting data).

  3. AJAX shift of client-server communication • Standard method Client(Web broswer) Server We could say that pages are not connected

  4. AJAX shift of client-server communication • AJAX method Client(Web broswer) Server The page stays the same

  5. <script type="text/javascript">function ajaxFunction() {var xmlHttp; try {// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();} catch (e) {// Internet Explorertry {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("Your browser does not support AJAX!");return false;}}} xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.FormA.timeCtrl.value=xmlHttp.responseText; } } xmlHttp.open("GET",“a.php",true); xmlHttp.send(null);}</script> A function to be executed on call-back. Call asyncronously

  6. Readystate function() { if(xmlHttp.readyState==4) { ... } } 0 - the request is not initialized 1 - the request has been set up 2 - the request has been sent 3 - the request is in process 4 - the request is complete

  7. Status • There is also a status that can be controlled after a result is returned. It will contain either • 200 - everything worked (returned) fine • or the error code, for example: • 404 - the page is not found.... • 500 (Internal Server Error) if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) alert(xmlHttp.responseText); else alert("Error code: " + xmlHttp.status); }

  8. Response text function() { if(xmlHttp.readyState==4) { ....value=xmlHttp.responseText; } } responseText is data which is send back from the server. Usually it is processes somehow or appears in a certain place, therefore (usually) it doesn’t contain “<html><body>” tags.

  9. On ready state change Here a function that should be called defined. Notice that the function can be defined in differently ways accordingly to JavaSript standards • An inline definition xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { ...; } } • Outside definition: xmlHttp.onreadystatechange=functionA; The function is declared somewhere else

  10. Calling server xmlHttp.open("GET",“a.php",true); xmlHttp.send(null); Here we have a simple example, where the first parameter defines method (as in forms), the second sets an address to be called (as an action in forms) and the third one specifies that the call should be asynchronous. Calling a server with parameters var act=“a.php” act=act + “?” + “arg1name=“ + “arg1value” act=act + “&” + “arg2name=“ + “arg2value” xmlHttp.open("GET",act,true); xmlHttp.send(null); Sends the request

  11. Calling server • “Post” method example: parameters are not attached to the url but is served via the send method Calling a server with parameters var act=“a.php” var param=“arg1name=“ + “arg1value” param=param + “&” + “arg2name=“ + “arg2value” xmlHttp.open("POST",act,true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.setRequestHeader("Content-length", params.length); xmlHttp.send(param);

  12. XML as a response • If a server posts xml <% response.contenttype="text/xml“ response.write("<?xml version='1.0' encoding='ISO-8859-1'?>") response.write("<company>") response.write("<compname>A</compname>") response.write("<manager>Leo V</manager>") response.write("</company>") %> • Then the AJAX client should use another property function() { if(xmlHttp.readyState==4) { var postedback=xmlHttp.responseXML; //usually responseXML.documentElement } }

More Related