Ajax Core Technology 1 --- use of XMLHttpRequset objects and ajax core objects

Ajax Core Technology 1 --- use of XMLHttpRequset objects and ajax core objects
AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications. AJAX = Asynchronous JavaScript and XML (subset of standard General Markup Language ). Ajax is a technology used to create fast dynamic web pages.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage. Starting from today, nie, I started to learn about ajax with my friends. In this blog post, I will briefly introduce how to use the XMLHttpRequset object, first, let's take a look at the attributes of this object and the methods. First, let's look at the attributes, as shown in the following table:

Next, let's look at the method, as shown in the following table:

XMLHttpRequest is abbreviated as XHR. Its Chinese name is extensible Hypertext Transfer Request, Xml eXtensible Markup Language, Http Hypertext Transfer protocol, and Request. The XMLHttpRequest object can be used to update webpages without submitting the entire page to the server. After all the pages are loaded, the client requests data from the server through this object. After the server receives and processes the data, it reports the data to the client. The XMLHttpRequest object provides full access to the HTTP protocol, including the ability to make POST and HEAD requests and common GET requests. XMLHttpRequest can synchronously or asynchronously return the response of the Web server and return the content in the form of text or a DOM document. Although the name is XMLHttpRequest, it is not limited to use with XML documents: it can receive any form of text documents. The XMLHttpRequest object is a key feature of the AJAX Web application architecture. The above two images have a certain understanding of XHR. Next, we will discuss the actual situation. Here we will use the classic five-step method to introduce it:

Step 1: Create an XHR object with the following code:

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 ;}

Step 2: register the callback method:

<span style="font-size:18px;">xmlhttp.onreadystatechange=callback;  </span>  

Step 3: set the parameters for interacting with the server:

<span style="font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true);  </span>

Step 4: Set the data sent to the server to start interaction with the server:

<span style="font-size:18px;">  xmlhttp.send(null);</span> 

Step 5: Determine whether the interaction with the server is complete and whether the server returns the correct data:

<Span style = "font-size: 18px;"> // function code for writing callback based on the actual conditions: function callback () {if (xmlhttp. readState = 4) {// indicates that the code of the server is 200. if (xmlhttp. status = 200) {// Method for accepting plain text data var message = xmlhttp. responseText; // The premise is that the server needs to set content-type to text/xml // var domXml = xmlhttp. responseXML; // other code }}</span>

The five-step XMLHttpRequest is basically created and can be used normally. As shown above, there is a large amount of code, so we need to write so much code each time we create it, therefore, we can abstract the same part to make it an independent class. The following is a small part of the search from the Internet, for your reference, '(* Your _ blank *)'. You are welcome! The Code is as follows:

// Class construction definition. The main responsibility is to create the 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 (act IveName [I]); break;} catch (e) {}} if (xmlhttprequest = undefined | xmlhttprequest = null) {alert ("XMLHttpRequest object creation failed !! ");} Else {this. xmlhttp = xmlhttprequest;} // The method by which the user sends the request. MyXMLHttpRequest. prototype. send = function (method, url, data, callback, failback) {if (this. xmlhttp! = Undefined & this. xmlhttp! = Null) {method = method. toUpperCase (); if (method! = "GET" & method! = "POST") {alert ("the HTTP request method must be GET or POST !!! "); Return;} if (url = null | url = undefined) {alert (" the HTTP request address must be set! "); Return;} var tempxmlhttp = this. xmlhttp; this. xmlhttp. onreadystatechange = function () {if (tempxmlhttp. readyState = 4) {if (temxmlhttp. status = 200) {var responseText = temxmlhttp. responseText; var responseXML = temxmlhttp. reponseXML; if (callback = undefined | callback = null) {alert ("the method for correctly returning data is not set"); alert ("returned data: "+ responseText);} else {callback (responseText, responseXML);} else {if (failback = undefi Ned | failback = null) {alert ("no handling method is set for failed data processing! "); Alert (" HTTP Response Code: "+ tempxmlhttp. status + ", response code text:" + tempxmlhttp. statusText);} else {failback (tempxmlhttp. status, tempxmlhttp. statusText) ;}}}// solves the cache conversion if (url. indexOf ("? ")> = 0) {url = url +" & t = "+ (new Date (). valueOf () ;}else {url = url + "? + = "+ (New Date ()). valueOf ();} // solves the cross-origin problem if (url. indexOf ("http: //")> = 0) {url. replace ("? "," & "); Url =" Proxy? Url = "+ url;} this. xmlhttp. open (method, url, true); // if it is POST, you need to set the request header if (method = "POST") {this. xmlhttp. setRequestHeader ("Content-type", "application/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 message: In this blog, I briefly introduced some methods and attributes of XHR objects, as well as the classic five-step method, we also need our friends to practice more and practice the next month in their daily study.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.