Download to read offline
Ajax
This document provides information about AJAX (Asynchronous JavaScript and XML) including: - AJAX is a technique that uses JavaScript to make web pages feel more responsive by exchanging data with a web server asynchronously in the background without interfering with the display and behavior of the existing page. - It aims to update parts of a web page, without reloading the entire page. This is done by using XMLHttpRequest object to send and retrieve data from a web server asynchronously in the background. - The onreadystatechange event handler is used to call a function when the state of the XMLHttpRequest object changes, allowing the JavaScript to update just the new data received from the server.
More Related Content
More from baabtra.com - No. 1 supplier of quality freshers
Ajax
- 2. Disclaimer: This presentationis prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
- 3.
- 4.
- 5. AJAX Anjali G anjalig2009@gmail.com www.facebook.com/Anjali Geetha twitter.com/AnjaliGeetha in.linkedin.com/in/Anjali G 9497879952
- 6. AJAX • Asynchronous Javascriptand 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.
- 7. AJAX • Prevents unnecessaryreloading of a page. • When we submit a form, whole page is reloaded from the server. • This causes very long waiting times. • AJAX aims at loading only the necessary information, and making only the necessary changes on the current page without reloading the whole page.
- 8. AJAX • AJAX isbased on Javascript, and the main functionality is to access the web server inside the Javascript code. • We access to the server using special objects; • When user initiates an event, a javascript function is called which access server using the objects. • The received information is shown to the user by means of the Javascript’s functions.
- 9. XMLHTTP Object • Theobject that is used to connect to the remote server is called XMLHTTP. • It resembles the Java’s URL object that is used to access a specific URL and get the contents.
- 10. Sending information • Aftercreating the object, we can send information to the web server and get the answer using this object’s functions: • GET METHOD: • POST METHOD: xmlhttp.open(“GET”, url, true) xmlhttp.send() xmlhttp.open("POST", url, true) xmlhttp.send(“date=11-11-2006&name=Ali") • Third argument tells that data will be processes asynchronously. When server responds, the “OnReadyStateChange” event handler will be called.
- 11. The onreadystatechange Event Property Description onreadystateStores a function (or the name of a function) to be change called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found
- 12. function loadXMLDoc() { var xmlhttp; if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 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_info.txt",true); xmlhttp.send(); }
- 13. </script> </head> <body> <div id="myDiv"><h2>Let AJAXchange this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
- 14.
- 15. If this presentationhelped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
- 16. Contact Us Emarald Mall(Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550