Ajax Core Technology 1---the use of Xmlhttprequset objects

Ajax is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). is a web development technique that creates an interactive Web application.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages). Ajax is a technique for creating high-speed, dynamic Web pages.

AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that you can update a part of a webpage without having to load the entire page again. Start NIE today. The small part starts with the small partners to learn the knowledge of Ajax, this blog post. Small part of the main simple and we introduce the use of Xmlhttprequset objects, first we look at the object's properties there are methods. First, let's look at properties, such as what the following table sees:

Next, let's look at the method. For example, see the following table:

The abbreviation for XMLHttpRequest is XHR. The Chinese name is called extensible Hypertext Transfer Request, XML Extensible Markup Language. HTTP Hypertext Transfer Protocol, request requests.

The XMLHttpRequest object is able to implement a partial update of a Web page without submitting the entire page to the server. When the page is all loaded. The client requests data through the object to the server, and the server accepts the data and processes it. Feedback data to the client.

The XMLHttpRequest object provides complete access to the HTTP protocol, including the ability to make POST and HEAD requests, as well as normal GET requests. XMLHttpRequest can return the response of the WEB server synchronously or asynchronously. It can also return content as text or as a DOM document. Although named XMLHttpRequest, it is not limited to working with XML documents: It can receive text documents in whatever form. The XMLHttpRequest object is a key feature of the WEB application architecture called AJAX. The two pictures above have a certain understanding of XHR. Next, it is time to combat, we here with the classic five steps to introduce:

The first step is to create the XHR object. The code looks like the following:

var XMLHttpRequest;     if (window. XMLHttpRequest) {         xmlhttprequest=new XMLHttpRequest ();         if (xmlhttprequest.overridemimetype) {             xmlhttprequest.overridemimetype ("Text/xml");         }     } else if (window. ActiveXObject) {         var activename=["MSXML2. XMLHTTP "," Microsoft.XMLHTTP "];         for (Var i=0;i<activename.length;i++) {             try{                 xmlhttprequest=new ActiveXObject (Activename[i]);                 break;             } catch (E) {                                     }         }     }          if (xmlhttprequest==undefined | | xmlhttprequest==null) {         alert (" XMLHttpRequest Object creation failed!
！ ");     } else{         this.xmlhttp=xmlhttprequest;     }  

The second step, the registration callback method:

<span style= "FONT-SIZE:18PX;" >xmlhttp.onreadystatechange=callback;  </span>  

The third step, the corresponding number of settings and server interaction:

<span style= "FONT-SIZE:18PX;" > Xmlhttp.open ("GET", "ajax?name=" +username,true);  </span>

The fourth step, set the data sent to the server side, start and server side interaction:

<span style= "FONT-SIZE:18PX;" >  

The fifth step, inference, and server side interaction is complete. Also infer whether the server side returns the correct data:

<span style= "FONT-SIZE:18PX;" >//Foundation Actual conditions write callback function code functions  callback () {       if (xmlhttp.readstate==4) {           ///= The corresponding code for the server is 200 ; The           accepted method of the data if (xmlhttp.status==200) {               //plain text data is returned correctly               var Message=xmlhttp.responsetext;               The premise of use is. Server side need to set Content-type to Text/xml               //var domxml=xmlhttp.responsexml;               Other Code           }}}     

through these five steps XMLHttpRequest basically create good, can normal use, as seen above, the amount of code a bit more. We have to write so much code every time we create it, so we can abstract the same parts. Make it a separate class, the following is a small series of search from the Internet, for small partners to take a look at ' (*∩_∩*). You're welcome! The code looks like the following:

The primary responsibility for building a class is to create a new XMLHttpRequest object var myxmlhttprequest=function () {var XMLHttpRequest; if (window.          XMLHttpRequest) {xmlhttprequest=new XMLHttpRequest ();          if (xmlhttprequest.overridemimetype) {xmlhttprequest.overridemimetype ("text/xml"); }}else if (window. ActiveXObject) {var activename=["MSXML2.          XMLHTTP "," Microsoft.XMLHTTP "]; for (Var i=0;i<activename.length;i++) {try{xmlhttprequest=new ActiveXObject (Activename[i]                  );              Break }catch (e) {}}} if (XMLHttpRequest = = Undefined | | xmlhttpr Equest = = null) {alert ("XMLHttpRequest object creation failed!!
 ");      }else{this.xmlhttp=xmlhttprequest; }//The user sends the requested method Myxmlhttprequest.prototype.send=function (Method,url,data,callback,failback) {if (thi              s.xmlhttp!=undefined && this.xmlhttp!=null) {method=method.touppercase ();                  if (method!= "get" && method!= "POST") {alert ("HTTP request method must be GET or POST!!!");              Return } if (Url==null | | url==undefined) {alert ("HTTP request address must be set! 
 ");              return;              } var tempxmlhttp=this.xmlhttp; This.xmlhttp.onreadystatechange=function () {if (tempxmlhttp.readystate==4) {if (temxml                          http.status==200) {var responsetext=temxmlhttp.responsetext;                          var responsexml=temxmlhttp.reponsexml;                              if (callback==undefined | | callback==null) {alert ("There is no way to set the processing data to return correctly");                          Alert ("Returned data:" + responsetext);                          }else{callback (Responsetext,responsexml); }}else{if (failback==undefined | | Failback==null) {alert ("No processing method is set to handle data return failure!") 
");                          Alert ("HTTP response code:" + Tempxmlhttp.status + ", Response code text message:" + tempxmlhttp.statustext);                          }else{failback (Tempxmlhttp.status,tempxmlhttp.statustext); }}}}//resolve the cached conversion if (Url.indexo F ("?")              >=0) {url=url + "&t=" + (new Date ()). ValueOf ();              }else{url=url+ "? + =" + (new Date ()). ValueOf (); }//solve the cross-domain problem if (url.indexof ("http.//") >=0) {Url.replace ("?
"," & "); Url= "Proxy?
Url= "+url;                            } this.xmlhttp.open (Method,url,true); If it is a POST, you need to set the request header if (method== "post") {This.xmlhttp.setRequestHeader ("Content-type", "applic              Ation/x-www-four-urlencoded ");      } this.xmlhttp.send (data); }else{alert ("XMLHttpRequest object creation failed, unable to send data!")
");      } myxmlhttprequest.prototype.abort=function () {this.xmlhttp.abort (); }    }  }

Small Editor's note: This blog, the small part of the main simple introduction of the Xhr object of some methods and properties. And a classic five-step approach. Knowledge of these foundations. Also need small partners in the daily study, a lot of hands-on practice. Internship for the second month, wonderful not to be continued.

Ajax Core Technology 1---the use of Xmlhttprequset objects