Home > Articles > Open Source > Ajax & JavaScript

  • Print
  • + Share This
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:

  1. Provide the URL and the HTTP verb to use.
  2. Define a callback function when results arrive.
  3. 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>
  • + Share This
  • 🔖 Save To Your Account