The implementation of AJAX technology relies primarily on xmlhttprequest, but when we call it for the transmission of asynchronous data, the XMLHTTP is a short process (destroyed after processing the event) if the object is not wrapped, It is not a good idea to have to rebuild the XMLHttpRequest in the place where you need to call, and write a large section of code every time you call. Fortunately, many open source Ajax frameworks now offer a solution to the XMLHTTP package. Here take the Ajaxtags Prototype-1.4.0.js as the master, to see how to encapsulate the XMLHTTP object into a reusable method.
In Prototype.js, you 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 a XMLHttpRequest, and you can see that if we call Ajax.gettransport (), a new XMLHttpRequest object is returned each time.
An AJAX variable defines an underlying method ajax.base and the prototype of the underlying method (initially, each script method has an empty prototype by default, and the prototype inherits the prototype of object, and if we change the prototype in object, all the scripting methods will be changed.) The underlying method is inherited by Ajax.request, and note that overloading is implemented if a method or variable of the same name is populated with the inherited prototype in Ajax.request.
The main thing in the Ajax.base prototype is the SetOptions method, which we'll use in the past.
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). But we are not able to directly invoke Ajax.request, mainly because Ajax.request does not provide a unified process. And we may need to get response again through the request. (Imagine, the customer sent a message, are always not and received a reply, it will make people feel very annoyed ~), prototype also for us to encapsulate the Resoponse (ajax.responders), but both are independent, how to integrate them?
In prototype we have two scenarios, one is Ajax.updater, the other is Ajax.periodicalupdater, and all two have to be passed in 3 parameters:
Container
Response the location where the data is to be communicated, defined by the ID of the HTML tag, for example, if you want to output the returned data to a <div> in HTML, you can change the container to the value of that ID. If the container is not found, a script error occurs.
Url:
The destination that the request requests to pass. The destination should be a servlet or jspservlet, because the request object can only be obtained automatically by the do*** method in the servlet.
Options
The structure should be the same as the option structure in the setoptions () defined above ajax.base, and if it is blank or not, use the ajax.base-defined initial value (used without passing any arguments).
The difference between the two is returned to container with the Ajax.updater is complete responsetext, only in the ResponseText fully obtained and no exception will be written to the container inside, and Periodicalupdater in the acquisition of Respon Setext, whether or not it has been fully obtained, fill in the container until an exception occurs or a complete responsetext is obtained. In most cases, the first method should be used, because the first method displays the exception information in the container when an exception occurs, and the second is not necessarily the case.
Since the XMLHTTP has been packaged, we just need to set up a good 3 parameters mentioned above, we should note that the option parameters must be set according to the options structure in base, if we use the Post method, You can also set the Postbody property in Opitons, put the querystring to be passed into the body, and a script example that uses the Post method to pass is as follows:
/* Form submission by post method * *
function DoRequest (container,paraments,url) {
var options ={
Method: ' Post ',
Asynchronous:true,
Postbody:paraments
};
New Ajax.updater (container,url,options);
}
Finally, we have to say that the Chinese coding problem, prototype to pass the parameters of the code conversion work, each transfer value through the encodeURIComponent processing. The encoding is converted to utf-8, and when the request is retrieved in the background, the request.setcharacterencoding ("UTF-8") should be used uniformly to encode the request without having to control what the page's encoding format is. If the Post method is used to deliver data, it is automatically executed:
Request SetHeader (' Content-type ', ' application/x-www-form-urlencoded '). Ensure that the data encoding format is passed correctly.
