Embed Size (px)
Citation preview
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;– request additional information from other pages where
the result should be “embedded” into the current page;
– execute an action on the server without moving to the next page (so if fail then you don’t have to go back: consider for example submitting data).
AJAX shift of client-server communication
• Standard method
Client (Web broswer)
Server
We could say that pages are not connected
AJAX shift of client-server communication
• AJAX method
Client (Web broswer)
Server
The page stays the same
<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
Readystate
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
function() { if(xmlHttp.readyState==4)
{...}
}
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); }
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.
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
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 parametersvar act=“a.php”act=act + “?” + “arg1name=“ + “arg1value”act=act + “&” + “arg2name=“ + “arg2value”xmlHttp.open("GET",act,true); xmlHttp.send(null);
Sends the request
Calling server
• “Post” method example:parameters are not attached to the url but is served via the send method
Calling a server with parametersvar 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);
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}
}
