Today we will talk about how to use the XMLHttpRequest object to send requests to the server and how to handle server responses. today we will talk about how to use the XMLHttpRequest object to send requests to the server and how to process server responses.
The simplest request is not to send any information to the server in the form of querying parameters or submitting form data. In practice, you often want to send some information to the server.
Follow these steps to send a request using the XMLHttpRequest object:
1. to obtain a reference to the XMLHttpRequest object instance, you can create a new instance or access a variable containing the XMLHttpRequest instance. 2. tell the XMLHttpRequest object which function will handle changes to the state of the XMLHttpRequest object. To this end, set the onreadystatechange attribute of the object to a pointer to the JavaScript function. 3. specify the request attributes. The open () method of the XMLHttpRequest object specifies the request to be sent. The open () method has three parameters: a string indicating the method used (usually GET or POST), a string indicating the URL of the target resource, and a Boolean value, indicates whether the request is asynchronous. 4. send the request to the server. The send () method of the XMLHttpRequest object sends the request to the specified target resource. The send () method accepts a parameter, usually a string or a DOM object. This parameter is sent to the target URL as part of the request body. When providing parameters 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 an instance of the XMLHttpRequest object to tell it what to do if the status changes, and to tell it where to send the request and how to send the request, finally, you need to instruct XMLHttpRequest to send requests. However, unless you are familiar with C or C ++, you may not understand what function pointers mean.
The function pointer is similar to any other variable, except that it points to a function instead of data such as strings, numbers, and even object instances.In JavaScript, all functions are included in the memory and can be referenced using the function name. This provides great flexibility. you can pass function pointers as parameters to other functions, or store function pointers in the attributes of an object.
For XMLHttpRequest objects, the onreadystatechange attribute stores the pointer of the callback function.. This callback function is called when the internal status of the XMLHttpRequest object changes. When an Asynchronous call is made, the request is sent and the script continues processing immediately (you do not have to wait until the request ends before the script continues working ). Once a request is sent, the readyState attribute of the object changes several times. Although some processing can be done for any status, the status you are most interested in may be the status at the end of the server response. By setting the callback function, you can effectively tell the XMLHttpRequest object: "As long as the response arrives, you can call this function to process the response ."
2.6.1 simple request exampleThe first example is very simple. This is a small HTML page with only one button. Click this button to initialize an asynchronous request sent to the server. The server sends back a simple static text file as a response. When processing this response, the content of the static text file is displayed in a warning window. Code List 2-4 shows the HTML page and related JavaScript.
Code List 2-4 simpleRequest.html page
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Simple XMLHttpRequest
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
The server's response file simpleResponse. xml contains only one line of text. Click the button on the HTML page to generate a warning box, showing the content of the simpleResponse. xml file. In-4, you can see the same warning boxes that contain server responses in Internet Explorer and Firefox.
Requests sent to the server are sent asynchronously. Therefore, the browser can continue to respond to user input and wait for the server response in the background. If you select a synchronization operation and the server response takes several seconds to arrive, the browser slows down and cannot respond to user input while waiting. In this way, the browser seems to be frozen and cannot respond to user input. asynchronous operations can avoid this situation, so that end users can have a better experience. Although this improvement is subtle, it does make sense. In this way, the user can continue to work, and the server will process previous requests in the background.
Communication with the server without interrupting the user's use process makes it possible for developers to use multiple technologies to improve user experience. For example, assume there is an application that verifies user input. When you enter fields in the input form, the browser can periodically send the form value to the server for verification. This does not interrupt the user, but can continue to fill in the remaining form fields. If a Validation rule fails, the user will be notified immediately before the form is actually sent to the server for processing, which can greatly save the user's time and reduce the load on the server, because you do not have to completely recreate the content of the form when the form cannot be submitted.
