Ajax
Download as PPTX, PDF0 likes590 views
AJAX is a technique for building fast, dynamic web applications by exchanging small amounts of data with the server behind the scenes without reloading the entire web page. It uses a combination of technologies including JavaScript, XML, HTML and CSS to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The XMLHttpRequest object plays a key role by providing a way for JavaScript to make HTTP requests directly to a web server, enabling asynchronous data retrieval and manipulation of page elements without reloading.
Ajax
- 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
- 10. XMLHttpRequest Method • abort() • getAllResponseHeaders() • getResponseHeader( “headername” ) • open(“method” , “url” async ); -open( “GET” , “myfile.php” , true ) • send( content ) • setRequestHeader( “label” , “value” ) muhammadabaloch
- 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