Ajax

What is AJAX ?
• Asynchronous Javascript and XML.

• Browser sends and receives data in background.

• Not a stand-alone language or technology.

• It is a technique that combines a set of known technologies in order to create

faster and more user friendly web pages.
Purpose of AJAX

• Prevents unnecessary reloading of a page.

• When we submit a form, although most of the page remains the same, whole
page is reloaded from the server.

• This causes very long waiting times and waste of bandwidth.

• AJAX aims at loading only the necessary information, and making only the
necessary changes on the current page without reloading the whole page.
Technologies Used
• AJAX uses:
• Javascript (for altering the page)
• XML (for information exchange)
• PHP or JSP (server side)
Simple Processing
• Ajax (sometimes written AJAX) is a means of using JavaScript to communicate
with a web server without submitting a form or loading a new page.

• AJAX is based on Javascript, and the main functionality is to access the web
server inside the Javascript code.

• We access to the server using special objects; we send data and retrieve data.
The XMLHttpRequest object
• The XMLHttpRequest object is the backbone of every Ajax
method. Each application requires the creation of one of these
objects. So how do we do it?

• Firefox, Safari, Opera, and some other browsers can create one of
these objects simply using the “new” keyword.

<script type="text/javascript">
ajaxRequest = new XMLHttpRequest();
</script>
XMLHttpRequest object properties
Property Description
readyState An integer from 0. . .4. (0 means the call is uninitialized, 4 means that the call is complete.)

onreadystatechange Determines the function called when the objects readyState changes.

responseText Data returned from the server as a text string (read-only).

responseXML Data returned from the server as an XML document object (read-only).

status HTTP status code returned by the server

statusText HTTP status phrase returned by the server

We use the readyState to determine when the request has been completed, and then check the status to se if
it executed without an error. (We’ll see how to do this shortly.)
XMLHttpRequest properties(readyState)
Value Definition
0 Uninitialized
-Object contains no data
1 Loading
-Object is currently loading its data
2 Loaded
-Object has finished loading its data
3 Interactive
-User may interact with the object even though it’s not fully loaded
4 Complete
-Object has finished initializing
XMLHttpRequest properties(status)
Value Definition
200 Ok

400 Bad Request

401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error

UNAUTHORIZED: Status code (401) indicating that the request requires authentication. User/agent unknown by the server.
FORBIDDEN: Status code (403) indicating the server understood the request but refused to fulfill it. User/agent known by the server but has
insufficient credentials.

• Event Handler
- onreadystatechange
XMLHttpRequest Method

• open(“method” , “url” async );

-open( “GET” , “myfile.php” , true )
• send( content )
Ajax code
<script type="application/javascript">
function formData(){
xhr;
if(window.XMLHttpRequest){
// checking browser like chrome , firefox etc......
xhr = new XMLHttpRequest(); // creating object of XMLHttpRequest
} else {
// code for IE6, IE5
xhr= new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function(){
// onreadystatechange event with js function which has no name
// but onreadystatechange check readystate value like 0 , 1, .... 4
Ajax code (cont’)
if( xhr.readyState == 4 && xhr.status == 200 ){
// if condition ~ 404 page not found ~ 200 page exist
document.getElementById( "form" ).innerHTML = xhr.responseText ;
// xhr response text inserting in html element
} // end if condition
} // end onreadystatechange

xhr.open("GET" , "form.php" , true) ; // open method

xhr.send( null ); // finaly sending xhr request .....

} // formData()
</script>

<a href="javascript:void(0)" onClick="formData()"> click here </a>

<div id="form"></div>