Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Similar to Ajax Part II
Similar to Ajax Part II (20)
More from Mukesh Tekwani
More from Mukesh Tekwani (20)
Recently uploaded
Recently uploaded (20)
Ajax Part II
- 1. AJAX – Part IIProgramming in Ajax Mukesh N. Tekwani tekwani@email.com
- 2. Programming in Ajax We consider a program that asks the user to click a button, fetches data from the server using Ajax techniques, and displays that data in the same Web page as the button – without refreshing the page. November 25, 2010 2 Mukesh N Tekwani, Mumbai
- 3. Programming in Ajax November 25, 2010 3 Mukesh N Tekwani, Mumbai
- 4. Programming in Ajax November 25, 2010 4 Mukesh N Tekwani, Mumbai
- 5. <body> <h1>Fetching data with Ajax</h1> <form> <input type = "button" value = "Display Message" onclick = "getData('http://localhost/AJAX/data.txt', 'targetDiv')"> </form> <div id = "targetDiv"> <p>The data fetched will go here</p> </div> </body> November 25, 2010 5 Mukesh N Tekwani, Mumbai
- 6. The body of the page starts by displaying the original text in a <div> element <div id = "targetDiv"> <p>The data fetched will go here</p> </div> November 25, 2010 6 Mukesh N Tekwani, Mumbai
- 7. There’s a button on this page. When the user clicks on the button, a JavaScript method named getData is called. <form> <input type = "button" value = "Display Message" onclick = "getData('http://localhost/AJAX/data.txt','targetDiv')"> </form> The getData function is passed two strings: November 25, 2010 7 Mukesh N Tekwani, Mumbai
- 8. The first string is: onclick = "getData('http://localhost/AJAX/data.txt','targetDiv')"> The getData function is passed two strings: The name of the text file data.txt to fetch from the server, and The name of the <div> element to display the fetched text in. November 25, 2010 8 Mukesh N Tekwani, Mumbai
- 9. Creating the XMLHttpRequest Object The code to create the XMLHttpRequest object is outside any function, so this code runs immediately as the page loads. We create a variable for this object XMLHttpRequestObject. var XMLHttpRequestObject = false; This variable is initialized to the value ‘false’ so that the script can check later whether the variable was created. November 25, 2010 9 Mukesh N Tekwani, Mumbai
- 10. XMLHttpRequestObject The XMLHttpRequest object is part of the browser’s window object. So to check whether the XMLHttpRequest object is ready to use, we use the if statement. If XMLHttpRequest object is available, we can create the object as follows: if(window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } November 25, 2010 10 Mukesh N Tekwani, Mumbai
- 11. XMLHttpRequestObject If we are working with Internet Explorer, we can create an XMLHttpRequest object like this: else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } November 25, 2010 11 Mukesh N Tekwani, Mumbai
- 12. XMLHttpRequestObject Now we have an XMLHttpRequest object. The properties and methods of the XMLHttpRequest object for IE are as follows: November 25, 2010 12 Mukesh N Tekwani, Mumbai
- 13. XMLHttpRequestObject onreadystatechange – holds the name of the event handler that should be called when the value of the readystate property changes. In our example, it is function() readyState – holds the state of the request November 25, 2010 13 Mukesh N Tekwani, Mumbai
- 14. Checking to make sure we have the XMLHttpRequestObject The getData() function will be used to actually fetch the text data from the file We first check that there is a valid object with the statement if(XMLHttpRequestObject) If the object creation hadn’t worked, then this variable will hold a value ‘false’ and the condition would become false. November 25, 2010 14 Mukesh N Tekwani, Mumbai
- 16. This object has a method called “open()”. We will use that method to use the URL we want.
- 17. Syntax of open() method is:
- 18. open (“method”, “URL”, [,asyncFlag [, “username” [, “password”]]])November 25, 2010 15 Mukesh N Tekwani, Mumbai
- 20. open (“method”, “URL”, [,asyncFlag [, “username” [, “password”]]])
- 21. method – the HTTP method used to open the connection such as GET, POST, PUT, HEAD
- 22. URL – the requested URL
- 23. asyncFlag – A boolean value indicating whether the call is asynchronous or synchronous. Default is ‘true’ (asynchronous)November 25, 2010 16 Mukesh N Tekwani, Mumbai
- 25. To open a URL we can use the GET, POST or PUT methods.
- 26. But in Ajax, we will use GET to retrieve data and POST to send a lot of data to the serverXMLHttpRequestObject.open("GET", dataSource); November 25, 2010 17 Mukesh N Tekwani, Mumbai
- 28. By default the connection to this file is made asynchronously. It means that this statement does not wait until the connection is made and the data is finished downloadingNovember 25, 2010 18 Mukesh N Tekwani, Mumbai
- 30. If we assign the name of a JavaScript function to this property, that function will be called each time the XMLHttpRequest object’s status changes.November 25, 2010 19 Mukesh N Tekwani, Mumbai
- 32. We have used a shortcut to assign a JavaScript function to the onreadystatechange property.
- 33. We have created an anonymous function because the function does not have any name. Such a function is created on the fly, just by using the keyword function(). Then we define the body of this function in curly braces:November 25, 2010 20 Mukesh N Tekwani, Mumbai
- 37. readyState property that tells us how the data downloading is progressing.
- 38. The readyState property can have these values:
- 40. 1 – loading
- 41. 2 – loaded
- 42. 3 – interactive
- 43. 4 – complete
- 44. We have used the value 4, which means the data is downloadedNovember 25, 2010 22 Mukesh N Tekwani, Mumbai
- 46. status property
- 47. This property that tells us the status of the download itself.
- 48. It is the standard HTTP status code that the browser got for the URL you supplied.
- 49. The possible values of status are:
- 50. 200 – all OK
- 51. 400 – Bad request
- 52. 403 – Forbidden
- 53. 404 – Not found
- 54. 408 – request time out
- 55. 414 – Requested URL too longNovember 25, 2010 23 Mukesh N Tekwani, Mumbai
- 58. If we want to treat the data as standard text, we use the object’s responseText property.
- 59. If the data is in XML format, we can use the responseXML property.
- 60. To make the test appear on the page, we assign that text to the <div> element whose ID is targetDiv. This ID was passed to the getData() function.November 25, 2010 25 Mukesh N Tekwani, Mumbai
- 62. We use the send() method.