Ajax

572 views
477 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
572
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Ajax
  2. 2. Relevance of Ajax • Normally we exchange data with server in any of following scenarios  We click on a link to request a new page  We submit a form to send the user data to server • In both cases the whole webpage reloads • AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
  3. 3. A - Asynchronous J - JavaScript A - And X - XML “AJAX is not a new programming language, but a new way to use existing standards.”
  4. 4. Browser Web server Web pages without Ajax
  5. 5. Browser Web server Web pages with Ajax
  6. 6. How to code ajax? Ajax is just a JavaScript function which can be called like any other functions in JavaScript Step 1 : create XMLHttpRequest : which is a special object to exchange data with server Step 2 : send server request using the above XMLHttpRequest send() method Step 3 : Receive response from server (response can be success or error) Step 4 : If response is success get the resposeText and display it on the html page using JavaScript DOM manipulation Step 5 : if repose is error acknowledge accordingly
  7. 7. Step 1: creating xmlHttpRequest 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"); }
  8. 8. Step 1: creating xmlHttpRequest 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"); } Creating a normal variable which will be assigned as an object in coming lines
  9. 9. Step 1: creating xmlHttpRequest var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } Else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. Old versions of Internet Explorer (IE5 and IE6) use an ActiveX Object: for data exchange So this code Detects if the browser has XMLHTTPRequest functionality or not
  10. 10. Step 1: creating xmlHttpRequest var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } Else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } If it returns true we make the the variable xmlhttp assigned to the XMLHttpRequest object
  11. 11. Step 1: creating xmlHttpRequest var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } Else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } Else statement evaluates true if the browser doesnt support XMLHttpRequest(means the browser id old version) So in old versions ActiveXobject serve the same purpose . So we assign xmlhttp into ActiveX object
  12. 12. Step 2: Send a request to server xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); As xmlhttp is an object it will have several methods associated with him like open(),send() etc Open() : Specifies the type of request, the URL, and if the request should be handled asynchronously or not. Type: GET / POST URL : the path to page from where we want the data from TRUE : means data has to be transmitted asynchronously
  13. 13. Step 2: Send a request to server xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); Sends the request off to the server.
  14. 14. Step 3: Server response To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object. « responseText : Get the response data as a string « responseXML : Get the response data as XML document.getElementById("myDiv").innerHTML=xmlhttp.responseText; We receive the respose from server in a string format which will be stored in resposeText property of xmlhttp object
  15. 15. <script> 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.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } </script> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body>
  16. 16. Properties Onreadystatechange readyState Status responseText responseXml Methods Send() Open() setRequestHeader() XMLHTTP in detail As you are well aware xmlhtp is just an object, Which means it will have number of member functions and properties . We will look detailed into it
  17. 17. Properties Onreadystatechange readyState Status responseText responseXml Methods Send() Open() setRequestHeader() xmlhttp We’ve already discussed about this properties and methods XMLHTTP in detail
  18. 18. Properties Onreadystatechange readyState Status responseText responseXml Methods Send() Open() setRequestHeader() xmlhttp Stores a function (or the name of a function) to be called automatically each time the readyState property changes XMLHTTP in detail
  19. 19. Properties Onreadystatechange readyState Status responseText responseXml Methods Send() Open() setRequestHeader() xmlhttp 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 XMLHTTP in detail
  20. 20. Properties Onreadystatechange readyState Status responseText responseXml Methods Send() Open() setRequestHeader() xmlhttp 200: "OK" 404: Page not found XMLHTTP in detail
  21. 21. Properties Onreadystatechange readyState Status responseText responseXml Methods Send() Open() setRequestHeader() xmlhttp Adds HTTP headers to the request. This method takes 2 parameters header: specifies the header name value: specifies the header value Eg: xmlhttp.setRequestHeader("Content- type","application/x-www-form- urlencoded"); XMLHTTP in detail
  22. 22. 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(); }
  23. 23. End of day
  24. 24. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  25. 25. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com

×