2. What is AJAX ?
• Asynchronous Javascript and XML.
• 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.
• It is a client side technology.
muhammadabaloch
3. 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.
muhammadabaloch
4. Technologies Used
• AJAX uses:
• Javascript (for altering the page)
• XML (for information exchange)
• PHP or JSP (server side)
muhammadabaloch
5. 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.
muhammadabaloch
6. 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>
muhammadabaloch
7. XMLHttpRequest object properties
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.)
muhammadabaloch
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
8. XMLHttpRequest properties(readyState)
muhammadabaloch
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
9. XMLHttpRequest properties(status)
• Event Handler
- onreadystatechange
muhammadabaloch
Value Definition
200 Ok
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error
11. Ajax code
<script type="application/javascript">
function formData(){
xhr = undefined ;
if(window.XMLHttpRequest){
// checking browser like chrome , firefox etc......
xhr = new XMLHttpRequest(); // creating object of XMLHttpRequest
}
xhr.onreadystatechange = function(){
// onreadystatechange event with js function which has no name
// but onreadystatechange check readystate value like 0 , 1, .... 4
muhammadabaloch
12. Ajax code (cont’)
if( xhr.readyState == 4 && xhr.status == 404 ){
// 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("POST" , "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>
muhammadabaloch
