XMLHTTP object encapsulation technology

The implementation of Ajax mainly relies on XMLHttpRequest, but when we call it for asynchronous data transmission, because XMLHTTP is a short-term process (destroyed after the event processing is completed)
If you do not wrap the object, you have to re-build XMLHttpRequest where you need to call it. It is not a good solution to write a large segment of code for each call.
Fortunately, many open-source Ajax frameworks now provide XMLHTTP encapsulation solutions. Here we take the prototype-1.4.0.js that comes with ajaxtags as the master to see how to encapsulate XMLHTTP objects into a reusable method.

In prototype. JS, a variable named Ajax is defined first.
VaR Ajax = {
Gettransport: function ()
{
Return try. These (
Function () {return New activexobject ('msxml2. xmlhttp ')},
Function () {return New activexobject ('Microsoft. xmlhttp ')},
Function () {return New XMLHttpRequest ()}
) | False;
},

Activerequestcount: 0
}
The variable returns an XMLHttpRequest. We can see that if Ajax. gettransport () is called, a new XMLHTTPRequest object will be returned each time.
A basic method Ajax is defined in the Ajax variable. base and the prototype of the basic method (at the beginning, each script method has an empty prototype by default. The prototype inherits the object prototype. If we change the prototype in the object, all script methods will be changed .) This basic method is inherited by Ajax. Request. Note that if the inherited prototype's method or variable with the same name is filled in Ajax. Request, the method will be overloaded.
The most important method in the Ajax. Base prototype is the setoptions method, which will be used later.
Setoptions: function (options)
{
This. Options = {
Method: 'post ',
Asynchronous: True,
Parameters :''
}
In prototype, the request is implemented by defining the Ajax. Request prototype (Ajax. Request. Prototype. However, we cannot directly call Ajax. Request because Ajax. request does not provide a unified processing process. In addition, we may need to get response through the request. (Imagine that the customer never sends a message and receives a reply, which can be annoying ~), Prototype encapsulates resoponse (Ajax. Responders) for us, but both are independent of each other. How can we integrate them?

In prototype, two solutions are provided: Ajax. Updater and Ajax. periodicalupdater. Three parameters must be input for both methods:
Container:
The location where the response data is to be transmitted. The location is defined by the ID of the HTML Tag. For example, you need to output the returned data to a <div> in HTML, you only need to change the container to the ID value. If the container cannot be found, a script error occurs.
URL:
The destination of the request. This destination should be a servlet or jspservlet, because the request object can only be automatically obtained by the DO *** method in the servlet.
Options:
The structure should be the same as the option structure defined in setoptions () defined by Ajax. Base. If it is null or not written, the initial value defined by Ajax. Base is used (used when no parameters are passed ).
The difference between the two is that Ajax. the Updater returns the complete responsetext to the container. The content is written to the container only when responsetext is completely obtained and no exception occurs. When periodicalupdater obtains responsetext, whether or not the information has been fully obtained, enter the content in the container until an exception occurs or responsetext is fully obtained. The first method should be used in most cases, because the first method will display the exception information in the container when an exception occurs, and the second method is not necessarily.
Now that XMLHTTP has been encapsulated, you only need to set the three parameters mentioned above. Note that the options parameter is set, you must follow the options structure in the base. If you use the POST method, you can also set the postbody attribute in opitons to put the querystring to be passed in the body, an example of a script that uses the POST method for transmission is as follows:

/* Use the POST method for form submission */
Function dorequest (container, paraments, URL)
{
VaR Options = {
Method: 'post ',
Asynchronous: True,
Postbody: paraments
};
New Ajax. Updater (container, URL, options );
}

The last thing I have to talk about is Chinese encoding. Prototype performs encoding conversion for all the passed parameters. Each transmitted value is processed through encodeuricomponent. the encoding will be converted to UTF-8. When obtaining the request in the background, the request should be used in a unified manner. setcharacterencoding ("UTF-8") sets the encoding for the request without having to worry about what the page encoding format is. if the post method is used to transmit data, the system will automatically execute:
Request. setheader ('content-type', 'application/X-WWW-form-urlencoded'). Ensure that the data encoding format is correct.