Ajax Core Knowledge Summary

the principle of Ajax

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

features

• Commit: Do not submit the entire page to the server
• return: is no longer the entire page, but Xml,json data form
• Effect: Partially update the Web page.

The XMLHttpRequest object is at the heart of Ajax technology.

function

A set of APIs that can transmit or receive XML and other data through the HTTP protocol in scripting languages such as JavaScript.

Usage steps:

In the process of doing the project, the search box Lenovo function used Ajax technology, because at that time the Lenovo function is a public part, a good person, other systems directly with, and they did not learn Ajax, so directly according to the document to achieve. Now take advantage of summing up, combined with this associative function of the JS file, to summarize the XMLHttpRequest five-step use method.

/*1. Create XMLHttpRequest objects for different browsers */if (window.      XMLHttpRequest) {//alert ("Ie7,ie8,firefox");     XMLHTTP =new XMLHttpRequest (); Bug fixes for certain versions of the Mozillar browser//specifically: The browser uses MIME type to determine what form to display//If the response from the server does not have an XML Mime-type header, some versions of Mozill    A browser does not work correctly. For this case, Httprequest.overridemimetype (' text/xml ');    The statement overwrites the header sent to the server, forcing Text/xml as 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 ("current       Browser does not support the creation of XMLHttpRequest objects, please replace the browser ");  Return }/*2. Registering the callback function on the XMLHttpRequest object */ 

Xmlhttp.onreadystatechange=callback;  The XMLHttpRequest object has the ReadyState property and the onReadyStateChange property (function), and when the readystate attribute is changed, onreadystatechange//0 is called: the request is uninitialized//1: Server connection established//2: Request Received//3: Request processing in//4: The request is complete and the response is ready//When onreadystatechange is triggered, the callback function/*3 is called. Use the Open method to set basic information for server-side interaction */

Get mode interactive                  xmlhttp.open ("Get", "ajax?name=" + username,true);              Post mode interactive                 Xmlhttp.open ("Post", "AJAX", true);  Add code  xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded") required for the post-mode interaction

/*4. Setting the data sent to start and server-side interaction */

    Get mode      xmlhttp.send (null);            Post mode      xmlhttp.send ("name=" + userName);  /*5. Update interface *///in the callback function to determine whether the interaction ends, the response is correct, and as necessary to obtain the data returned by the server, and update the page function callback () {//judgment and server-side interaction is complete, but also to determine whether the server side correctly returned data  if (xmlhttp.readystate = = 4) {  //= and the server-side interaction has been completed  if (xmlhttp.status = =) {  //= The server's response code is 200, The data var message=xmlhttp.responsetext is returned correctly  ;  The acceptance method for the DOM object corresponding to the XML data  //is used only if the server side needs to set the ContentType to Text/xml                       //memory to fill the text content of the div tag  var div= document.getElementById ("message");  div.innerhtml=message;     }  }

Five-Step package:In the actual use of XMLHttpRequest, we can not create the object every time, we need to abstract the public part into a "class", when used, we directly invoke the object's properties, methods, and pass in the corresponding parameters.

Create a "class" that has the XMLHTTP attribute function Callbackobject () {this. XmlHttp = this. Gethttpobject ();} Set other properties of this class through the prototype://Get XMLHttpRequest object through Gethttpobject, this property encapsulates the first step 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 ();            There is an error in this version of the Mozilla browser when processing the contents of the header information that the server returned contains XML mime-type.            Therefore, to ensure that the returned content is text/xml information, the following statement needs to 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{XMLHT                            Tp=new ActiveXObject (Activexname[i]);                            Success=true;                      Break                    }catch (e) {}}                    if (!success) {alert (' Unable to create XMLHttpRequest. ');        }} return XMLHTTP; }}//docallback encapsulates the second step, the third and fourth steps 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.protot Ype. OnError = function (status, statustext) {//Error}//Encapsulation fifth step, in the callback function to determine whether the interaction ends, the response is correct, and as needed to obtain the data returned by the server, and update page 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 = = && this. Xmlhttp.statustext = = "OK") this. OnComplete (this. Xmlhttp.responsetext, this.    Xmlhttp.responsexml); else this. OnError (this. Xmlhttp.status, this. Xmlhttp.statustext, this.     Xmlhttp.responsetext); }}

Ajax Core Knowledge Summary