Ajax Basics Tutorial (2)-How to send a simple request using XMLHttpRequest Object 2.6

You are now ready to start using the XMLHttpRequest object. We've just discussed how to create this object, and here's how to send a request to the server and how to handle the server's response.

The simplest request is to send no information to the server in the form of query parameters or submitting form data. In practice, it is often desirable to send some information to the server.

The basic steps for sending a request using the XMLHttpRequest object are as follows:

1. To get a reference to the XMLHttpRequest object instance, you can create a new instance or access a variable that contains a XMLHttpRequest instance.

2. Tell the XMLHttpRequest object which function handles changes to the state of the XMLHttpRequest object by setting the object's onReadyStateChange property to a pointer to a JavaScript function.

3. Specify the properties of the request. The XMLHttpRequest object's open () method specifies the request that will be issued. The open () method takes 3 parameters: one is a string indicating the method used (usually a get or post); one is a string representing the URL of the target resource; one is a Boolean value indicating whether the request is asynchronous.

4. Sends the request to the server. The Send () method of the XMLHttpRequest object sends the request to the specified target resource. The Send () method takes a parameter, usually a string or a DOM object. This parameter is sent to the target URL as part of the request body. When you supply a parameter to the Send () method, make sure that the method specified in open () is post. If no data is sent as part of the request body, NULL is used.

These steps are intuitive: you need to xmlhttprequest an instance of the object, tell it what to do if the state changes, tell it where to send the request and how to send the request, and finally instruct XMLHttpRequest to send the request. However, unless you know a lot about C or C + +, you may not understand what the function pointer (functions pointer) means.

A function pointer is similar to any other variable, except that it does not point to data such as strings, numbers, or even object instances, but instead points to a function. In JavaScript, all functions are addressed in memory and can be referenced using function names. This provides a great flexibility to pass function pointers to other functions as arguments, or to store function pointers in the properties of an object.

For the XMLHttpRequest object, the onReadyStateChange property stores a pointer to the callback function. This callback function is invoked when the internal state of the XMLHttpRequest object changes. When an asynchronous call is made, the request is issued and the script continues to process immediately (without waiting for the end of the request until the script continues to work). Once a request is made, the ReadyState property of the object passes through several changes. Although you can do some processing for any state, the state you are most interested in is probably the state at the end of the server response. By setting the callback function, you can effectively tell the XMLHttpRequest object: "Call this function to handle the response as soon as the response arrives." ”

Examples of 2.6.1 simple requests

The first example is simple. This is a very small HTML page with only one button. Clicking this button Initializes an asynchronous request sent to the server. The server sends back a simple static text file as a response. When this response is processed, the contents of the static text file are displayed in a warning window. Code Listing 2-4 shows this HTML page and related JavaScript.

Code Listings 2-4 simplerequest.html Page

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title>simple xmlhttprequest</title>
<script type= "Text/javascript" >
var xmlHttp;
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
function Startrequest () {
Createxmlhttprequest ();
Xmlhttp.onreadystatechange = Handlestatechange;
Xmlhttp.open ("Get", "Simpleresponse.xml", true);
Xmlhttp.send (NULL);
}
function Handlestatechange () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Alert ("The server replied with:" + xmlhttp.responsetext);
}
}
}
</script>
<body>
<form action= "#" >
<input type= "button" value= "Start Basic asynchronous Request"
Onclick= "Startrequest ();" />
</form>
</body>