Detailed explanation of XMLHTTP object encapsulation technology sample code

The implementation of ajax technology mainly relies on xmlhttprequest, but when we call it for asynchronous data transmission, since xmlhttp is a short-term process (it is destroyed after the event processing is completed), if the object is not packaged, it has to be processed in Reconstructing xmlhttprequest where it needs to be called requires writing a large section of code for each call, which is really not a good idea. Fortunately, many open source ajax frameworks now provide solutions for encapsulating xmlhttp. Here we use the prototype-1.4.0.js that comes with ajaxtags as the master to see how to encapsulate the xmlhttp object into a reusable method.

In prototype.js, we first define a variable: Ajax

　 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. You can see that if we call Ajax.getTransport(), it will be returned every time A new xmlhttprequest object.

A basic method Ajax.Base and the prototype of the basic method are defined in the Ajax variable (initially, each script method has an empty prototype by default, which will inherit the prototype of Object. If we If the prototype is changed in 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, it will be changed. Implement overloading.

The most important thing in the Ajax.Base prototype is the setOptions method, which we will use later.

setOptions: function(options) {
　　 this.options = {
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 parameters:　 ''
　　 }

The request in prototype is implemented by defining the Ajax.Request prototype (Ajax.Request.prototype). But we cannot directly call Ajax.Request. The main reason is that Ajax.Request does not provide a unified processing process. And we may need to obtain the response through the request. (Imagine that the customer sent a message but never received a reply. That would be very annoying~) The prototype also encapsulates the response (Ajax.Responders) for us, but both They are independent of each other. How to integrate them?

We are provided with two solutions in the prototype, one is Ajax.Updater and the other is Ajax.PeriodicalUpdater. The two have in common that 3 parameters must be passed in:

container :

The position where the response data is to be conveyed. The position is defined by the id of the html tag. For example, if you want to output the returned data to a

in html, you only need to change the container to this The value of id is enough. If the container is not found, a script error occurs.

url: The destination to which the

request request is to be passed. The 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 in setOptions() defined by Ajax.Base above. If it is empty or not written, the initial value defined by Ajax.Base will be used (none used when passing any parameters).

The difference between the two is that Ajax.Updater returns the complete responseText to the container. Only when the responseText is completely obtained and no exception occurs, the content will be written to the container. When PeriodicalUpdater obtains the responseText, Regardless of whether it has been completely obtained, the content is filled into the container until an exception occurs or the responseText is completely obtained. In most cases, the first method should be used, because the first method will display the exception information in the container when an exception occurs, while the second method may not.

Now that xmlhttp has been encapsulated, we only need to set the three parameters mentioned above. It should be noted that when setting the options parameters, we must set them according to the options structure in the base. If we use the post method, we can also set the postBody attribute in opitons and put the queryString to be transferred in the body. An example of a script using the post method to transfer is as follows:

/*表单提交用post方法*/
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 say is Chinese Encoding issues, the prototype performs encoding conversion on the passed parameters, and each passed value is processed through encodeURIComponent. The encoding will be converted to utf-8. When obtaining the request in the background, you should uniformly use request.setCharacterEncoding("UTF-8") to set the encoding for the request, regardless of the encoding format of the page. If you use the post method to transfer data, it will automatically execute:

request． setHeader('Content-type','application/x-www-form-urlencoded'). Ensure that the encoding format of the transmitted data is correct.

The above is the detailed content of Detailed explanation of XMLHTTP object encapsulation technology sample code. For more information, please follow other related articles on the PHP Chinese website!