AJAX

laborermaizeSoftware and s/w Development

Jul 4, 2012 (5 years and 4 months ago)

262 views

AJAX Manual 
 
Surjyakanta Biswas(9777650114)  Page 1 
 
                                                              
AJAX 
• AJAX, shorthand for Asynchronous JavaScript and XML, is a web development technique for 
creating interactive web applications. 
• AJAX is the art of exchanging data with a server, and update parts of a web page ‐ without 
reloading the whole page. 
 
All the available browsers can not support AJAX. Here is the list of major browsers which support 
AJAX.  

Mozilla Firefox 1.0 and above  

Netscape version 7.1 and above  

Apple Safari 1.2 and above.  

Microsoft Internet Exporer 5 and above  

Konqueror  

Opera 7.6 and above  
So now when you write your application then you would have to take care of the browsers who do 
not support AJAX. 
AJAX is Based on Internet Standards
AJAX is based on internet standards, and uses a combination of: 
• XMLHttpRequest object (to exchange data asynchronously with a server) 
• JavaScript/DOM (to display/interact with the information) 
• CSS (to style the data) 
• XML (often used as the format for transferring data) 
• AJAX applications are browser‐ and platform‐independent! 
AJAX Manual 
 
Surjyakanta Biswas(9777650114)  Page 2 
 
Create an XMLHttpRequest Object
All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built‐in XMLHttpRequest 
object. 
Syntax for creating an XMLHttpRequest object: 
variable=new XMLHttpRequest(); 
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: 
variable=new ActiveXObject("Microsoft.XMLHTTP"); 

 
Send a Request To a Server
To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: 
• open( method, URL, async ) 
• send( content ) 
Example: 
xmlhttp.open("GET","test.php",true); 
xmlhttp.send(); 
open(method,url,async):Specifies the type of request, the URL, and if the request should be handled 
asynchronously or not. 
 
method: the type of request: GET or POST 
url: the location of the file on the server 
async: true (asynchronous) or false (synchronous) 
send(string): Sends the request off to the server. 
 
string: Only used for POST requests 
Server Response
To get the response from a server, use the responseText or responseXML property of the 
XMLHttpRequest object. 
responseText : The responseText property returns the response as a string 
Example:
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 
AJAX Manual 
 
Surjyakanta Biswas(9777650114)  Page 3 
 
responseXML: get the response data as XML data 
XMLHttpRequest Properties 

onreadystatechange 
An event handler for an event that fires at every state change. 

readyState 
The readyState property defines the current state of the XMLHttpRequest object. 
Here are the possible values for the readyState propery: 
State Description 
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 completed 
readyState=0 after you have created the XMLHttpRequest object, but before you have 
called the open() method. 
readyState=1 after you have called the open() method, but before you have called send(). 
readyState=2 after you have called send(). 
readyState=3 after the browser has established a communication with the server, but 
before the server has completed the response. 
readyState=4 after the request has been completed, and the response data have been 
completely received from the server. 
• status 
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK"). 
• statusText 
Returns the status as a string (e.g. "Not Found" or "OK"). 

When readyState is 4 and status is 200, the response is ready:
 
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
 
 
Ajax Security : Server Side 
AJAX Manual 
 
Surjyakanta Biswas(9777650114)  Page 4 
 

AJAX‐based Web applications use the same serverside security schemes of regular Web 
applications 

You specify authentication, authorization, and data protection requirements in your 
web.xml file (declarative) or in your program (programatic) 

AJAX‐based Web applications are subject to the same security threats as regular Web 
applications 
Ajax Security : Client Side 

JavaScript code is visible to a user/hacker. Hacker can use the JavaScript code for inferring 
server side weaknesses 

JavaScript code is downloaded from the server and executed ("eval") at the client and can 
compromise the client by mal‐intended code 

Downloaded JavaScript code is constrained by sand‐box security model and can be relaxed 
for signed JavaScript 
Issues on Ajax 
Complexity is increased 

AJAX‐based applications can be difficult to debug, test, and maintain 

No support of XMLHttpRequest in old browsers 

JavaScript technology dependency & incompatibility 

JavaScript code is visible to a hacker 
 
Ajax Example 
Ajax.html
 
<script type="text/javascript"> 
function loadXMLDoc(){ 
var xmlhttp; 
if (window.XMLHttpRequest) 
  {// code for IE7+, Firefox, Chrome, Opera, Safari 
  xmlhttp=new XMLHttpRequest(); 
  } 
else 
  {// code for IE6, IE5 
AJAX Manual 
 
Surjyakanta Biswas(9777650114)  Page 5 
 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
xmlhttp.onreadystatechange=function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
  } 
xmlhttp.open("GET","ajax.php",true); 
xmlhttp.send(); 

</script> 
</head> 
<body> 
<div id="myDiv"><h2>Display Ajax data</h2></div> 
<button type="button" onclick="loadXMLDoc()">Click for Displaying data using Ajax</button> 
</body> 
</html> 
 
ajax.php
 
<?php 
  Echo “welcome world”; 
?> 

When you run the page(ajax.html) after clicking the button the output will display “welcome 
world” without loading the whole page. 
AJAX Manual 
 
Surjyakanta Biswas(9777650114)  Page 6