Ajax core knowledge summary, ajax core Summary

Ajax core knowledge summary, ajax core Summary
Principles of Ajax

The XMLHttpRequest object is used to send an asynchronous request to the server, obtain data from the server, and use JavaScript to operate the DOM to update the page.

Features

• Submit: you do not need to submit the entire page to the server.
• Return: it is no longer the whole page, but XML, JSON, and other data forms.
• Effect: update the webpage.

XMLHttpRequest objects are the core of Ajax technology.

Function

A set of APIs that can transmit or receive XML and other data through http in scripting languages such as Javascript.

Procedure:

In the process of project creation, Ajax technology was used in the Lenovo function of the search box, because the Lenovo function was a public part at the time, which was prepared by one person and directly used by other systems, I didn't learn Ajax at the time, so I simply followed the document to implement it. Now let's summarize the five-step usage of XMLHttpRequest in combination with the js file of this Lenovo function.

/* 1. create an XMLHttpRequest object */if (window. XMLHttpRequest) {// alert ("IE7, IE8, FireFox"); xmlhttp = new XMLHttpRequest (); // fix bugs in some specific versions of javasillar browsers. // specifically: the browser uses MIME Type to determine what content is displayed in what form. // If the response from the server does not have the XML mime-type header, some Mozilla browsers cannot run normally. // In this case, httpRequest. overrideMimeType ('text/xml'); the statement overwrites the header sent to the server and forces text/xml as the mime-type. If (xmlhttp. overrideMimeType) {xmlhttp. overrideMimeType ("text/xml") ;}} else if (window. activeXObject) {// alert ("IE6, IE5.5, IE5"); var activexName = ["MSXML2.XMLHTTP. 6.0 "," MSXML2.XMLHTTP. 5.0 "," MSXML2.XMLHTTP. 4.0 "," MSXML2.XMLHTTP. 3.0 "," MSXML2.XMLHTTP "," Miscrosoft XMLHTTP "]; for (var I = 0; I <activexName. length; I ++) {try {xmlhttp = new ActiveXObject (activexName [I]); break;} catch (e) {}}} if (xmlhttp = undefined | xmlhttp = null) {alert ("the current browser does not support creating XMLHttpRequest objects. Please change the browser"); return ;} /* 2. register the callback function on the XMLHttpRequest object */

Xmlhttp. onreadystatechange = callback; // the XMLHttpRequest object has the readyState attribute and onreadystatechange attribute (function). When the readyState attribute changes, onreadystatechange/0 is called: the request is not initialized. // 1: the server connection has been established // 2: The request has been received // 3: The request is being processed // 4: The request has been completed and the response is ready // when onreadystatechange is triggered, the callback function/* 3 will be called. use the open method to set the basic information for interaction with the server */

// Interact with xmlhttp. open ("GET", "AJAX? Name = "+ userName, true); // POST interaction xmlhttp. open ("POST", "AJAX", true); // code xmlhttp to be added for POST interaction. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ")

/* 4. Set the sent data to start interacting with the server */

// GET method xmlhttp. send (null); // POST xmlhttp. send ("name =" + userName);/* 5. update the interface * // In the callback function, determine whether the interaction is complete, whether the response is correct, obtain the data returned by the server as needed, and update the page function callback () {// determine whether the interaction with the server is complete, and whether the server correctly returns the data if (xmlhttp. readyState = 4) {// indicates that the interaction with the server has completed if (xmlhttp. status = 200) {// indicates that the response code of the server is 200, and the data var message = xmlhttp is returned correctly. responseText; // The Acceptance Method of the DOM object corresponding to the XML data // The premise is that, on the server side, you need to set contenttype to text/xml // The method for filling the text content in the memory image div label var div = document. getElementById ("message"); div. innerHTML = message ;}}

Five-step encapsulation: in actual use of XMLHTTPRequest, you cannot create an object every time. We need to abstract the public part into a "class". In use, we directly call the attributes of the object, method, and enter the corresponding parameters.

// Create a "class" with the XMLHTTP property function CallBackObject () {this. xmlHttp = this. getHttpObject ();} // other attributes of this class are set through the prototype: // the XMLHTTPRequest object is obtained through GetHTTPObject, which encapsulates the first CallBackObject. prototype. getHttpObject = function () {var xmlhttp; // if (! Xmlhttp & typeof XMLHttpRequest! = 'Undefined') {// try {// xmlhttp = new XMLHttpRequest (); //} catch (e) {// xmlhttp = false; ///} //} try {// for browsers such as Firefox and Opera xmlhttp = new XMLHttpRequest (); // Mozilla browsers with this version may encounter errors when processing the XML mime-type header information returned by the server. // Therefore, to ensure that the returned content is text/xml, the following statement must be included. If (xmlhttp. overrideMimeType) {xmlhttp. overrideMimeType ("text/xml") ;}} catch (e) {// for IE browser var activexName = new Array ('msxml2. XMLHTTP.7.0 ', 'msxml2. XMLHTTP.6.0 ', 'msxml2. XMLHTTP.5.0 ', 'msxml2. XMLHTTP.4.0 ', 'msxml2. XMLHTTP.3.0 ', 'msxml2. XMLHTTP ', 'micrsoft. XMLHTTP '); var success = false; for (var I = 0; I <activexName. length &&! Success; I ++) {try {xmlhttp = new ActiveXObject (activexName [I]); success = true; break;} catch (e) {}} if (! Success) {alert ('unable to create XMLHttpRequest. ') ;}} return xmlhttp ;}// DoCallBack encapsulate steps 2, 3, and 4 CallBackObject. prototype. doCallBack = function (URL) {if (this. xmlHttp) {if (this. xmlHttp. readyState = 4 | this. xmlHttp. readyState = 0) {var oThis = this; this. xmlHttp. open ('post', URL); this. xmlHttp. onreadystatechange = function () {oThis. readyStateChange () ;}; this. xmlHttp. setRequestHeader ('content-type', 'application/x-www-form-urlencoded'); this. xmlHttp. send (null) ;}} CallBackObject. prototype. abortCallBack = function () {if (this. xmlHttp) this. xmlHttp. abort ();} CallBackObject. prototype. onLoading = function () {// Loading} CallBackObject. prototype. onLoaded = function () {// Loaded} CallBackObject. prototype. onInteractive = function () {// Interactive} CallBackObject. prototype. onComplete = function (responseText, responseXml) {// Complete} CallBackObject. prototype. onAbort = function () {// Abort} CallBackObject. prototype. onError = function (status, statusText) {// Error} // encapsulate Step 5. In the callback function, determine whether the interaction ends, whether the response is correct, and obtain the data returned by the server as needed, and update CallBackObject. prototype. readyStateChange = function () {if (this. xmlHttp. readyState = 1) {this. onLoading ();} else if (this. xmlHttp. readyState = 2) {this. onLoaded ();} else if (this. xmlHttp. readyState = 3) {this. onInteractive ();} else if (this. xmlHttp. readyState = 4) {if (this. xmlHttp. status = 0) this. onAbort (); else if (this. xmlHttp. status = 200 & this. xmlHttp. statusText = "OK") this. onComplete (this. xmlHttp. responseText, this. xmlHttp. responseXML); else this. onError (this. xmlHttp. status, this. xmlHttp. statusText, this. xmlHttp. responseText );}}