- Initializing an AJAX Application
- Sending a GET Request
- Sending a POST Request
- Sending a Synchronous Request
- Receiving Multiple Data from the Server
- Aborting an HTTP Request
- Retrieving HTTP Headers
- Receiving XML from the Server
- Using JSON for Data (De)Serialization
- Creating a Waiting Screen
- Solving the Bookmark Problem
- Solving the Back Button Problem
- Using XSLT
- Using an XML Library
- Using the Yahoo! Web Service
This chapter is from the book
This chapter is from the book
This chapter is from the book
Sending a GET Request
XMLHttp.open("GET", "phrasebook.txt");
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);
Sending an HTTP request to a server using XMLHttpRequest consists of the following steps:
- Provide the URL and the HTTP verb to use.
- Define a callback function when results arrive.
- Send the request.
Step 1 can be taken with the open() method of the XMLHttpRequest object. This does not—unlike what the method name suggests—actually open an HTTP connection, but just initializes the object. You provide the HTTP verb to use (usually GET or POST) and the URL.
Step 2, the callback function, is provided to the onreadystatechange property of the object. Whenever the readyState property of XMLHttpRequest changes, this callback function is called. Finally, the send() method sends the HTTP request.
In the callback function, the readyState value 4 represents the state of the object we want: call completed. In that case, the responseText property contains the data returned from the server.
Here is a fully working example, sending a GET request to the server (a file called phrasebook.txt with simple text content) and evaluating the response of that call:
Sending a GET Request (xmlhttpget.html)
<script language="JavaScript"
type="text/javascript" src="xmlhttp.js"></script>
<script language="JavaScript"
type="text/javascript">
var XMLHttp = getXMLHttp();
XMLHttp.open("GET", "phrasebook.txt");
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);
function handlerFunction() {
if (XMLHttp.readyState == 4) {
window.alert("Returned data: " +
XMLHttp.responseText);
}
}
</script>