Embed Size (px)
Citation preview
Ajax
muhammadabaloch
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
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
Technologies Used
• AJAX uses:• Javascript (for altering the page)
• XML (for information exchange)
• PHP or JSP (server side)
muhammadabaloch
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
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
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
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
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
XMLHttpRequest Method
• abort()
• getAllResponseHeaders()
• getResponseHeader( “headername” )
• open(“method” , “url” async );
-open( “GET” , “myfile.php” , true )• send( content )
• setRequestHeader( “label” , “value” )
muhammadabaloch
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
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
