Analysis of Ajax usage principles

This time I will bring you an analysis of the principles of Ajax use, and what are the precautions when using Ajax. The following is a practical case, let's take a look.

In fact, the internal implementation of AJAX is not troublesome, mainly through an object called XMLHttpRequest, and this object is supported by existing browsers.

It can be said that it is the basis of the entire AJAX implementation and is the object used by the browser to exchange data with the server in the background. With it, there is AJAX and the art of partial page refresh!

This article mainly introduces to you the relevant content about Ajax principles and code encapsulation, and shares it for your reference and study. I won’t say much below, let’s take a look at the detailed introduction.

Sample code

var xmlhttp;
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
 // code for IE6, IE5 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Steps:

1. Create.

Syntax for creating XMLHttpRequest objects:

var = new XMLHttpRequest();

Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects:

var = new ActiveXObject("Microsoft.XMLHTTP");

2. Connect and send.

2.1. Three parameters of the open() function: request method, request address, and whether to request asynchronously

2.2. GET request method submits data to the server through URL parameters, while POST submits data to the server as send parameters

2.3. In the POST request, before sending data, the content type of the form submission must be set

2.3. Parameters submitted to the server must be encoded through the encodeURIComponent() method. In fact, in the parameter list key=value form, both key and value need to be encoded because they will contain special characters. . Each time a request is made, a string with v=xx will be spelled into the parameter list. This is to refuse caching and directly request to the server every time.

3. Receive.

3.1. After receiving the response, the response data will automatically fill in the XHR object. The relevant attributes are as follows

responseText: the body content returned by the response, which is a string type;

responseXML: If the content type of the response is "text/xml" or "application/xml", this attribute will store the corresponding xml data, which is the document type corresponding to XML;

status: response HTTP status code ;

statusText: Description of HTTP status

3.2. The readyState attribute of the XHR object indicates the current active stage of the request/response process. The value of this attribute is as follows

0 --> Not initialized, the open() method has not been called;

1 --> Started, the open() method was called, the send() method was not called;

2 --> Send, the send() method has been called, but no response has been received;

3 --> Receive, part of the response data has been received;

4 --> Completed, all response data has been received;

As long as the value of readyState changes, the readystatechange event will be called. (In fact, for logical smoothness, readystatechange can be placed after send, because when sending, requesting the server will cause network communication, which takes time. Specify the readystatechange event after send. It is also possible to handle programs. I usually use it this way, but for the sake of standardization and cross-browser compatibility, it is better to specify it before opening).

3.3. In the readystatechange event, first determine whether the response has been received, and then determine whether the server successfully processed the request. xhr.status is the status code. Status codes starting with 2 are successful. 304 indicates that the request was received from the cache. Obtain, the above code adds a random number to each request, so the value will not be retrieved from the cache, so this status does not need to be judged.

Ajax encapsulation method:

 ajax({  
  url: "./test.php",
  type: "POST",      
  data: { name: "abc", age: 18 },   
  dataType: "json",  
  success: function (response, xml) {   
   // 执行成功回调  
  },  
  fail: function (status) {   
   // 执行失败回调  
  }
 });
  
  function ajax(options) { 
   options = options || {}; 
   options.type = (options.type || "GET").toUpperCase();  
   options.dataType = options.dataType || "json";  
   var params = formatParams(options.data);    
   
   // 创建对象  
   if (window.XMLHttpRequest) {   
    var xhr = new XMLHttpRequest(); 
   } else {   
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');  
   } 
   
   //接收 - 第三步
   xhr.onreadystatechange = function () {   
    if (xhr.readyState == 4) {    
     var status = xhr.status;    
     if (status >= 200 && status < 300) {     
      options.success && options.success(xhr.responseText,xhr.responseXML);    
     } else {     
      options.fail && options.fail(status);    
     }   
    }
   }  
    
   //连接 和 发送 - 第二步 
   if (options.type == "GET") {   
    xhr.open("GET", options.url + "?" + params, true);   
    xhr.send(null);  
   } else if (options.type == "POST") {   
    xhr.open("POST", options.url, true);   
    //设置表单提交时的内容类型   
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);  
   }  
   
   //格式化参数 
   function formatParams(data) { 
    var arr = [];  
    for (var name in data) {   
     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); 
    }  
    arr.push(("v=" + Math.random()).replace(".",""));  
    return arr.join("&"); 
   }

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The above is the detailed content of Analysis of Ajax usage principles. For more information, please follow other related articles on the PHP Chinese website!