Detailed explanation of Ajax principles and code encapsulation examples

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML), I believe everyone is familiar with ajax. The following article mainly introduces you to the relevant information about Ajax principles and code encapsulation, which is introduced through sample code. It’s very detailed. Friends who need it can refer to it. Let’s take a look together.

Preface

In fact, the internal implementation of AJAX is not troublesome. It mainly uses an object called XMLHttpRequest, and this object is used in existing browsers. are supported.

It can be said that it is the basis of the entire AJAX implementation and an 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, whether to request asynchronously

2.2. GET request method is through URL parameters The data is submitted to the server. POST is to submit the data to the server as a parameter of send

2.3. In the POST request, before sending the 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 form of parameter list key=value, both key and value need to be encoded, because they will Contains special characters. Each time a request is made, a string v=xx will be spelled into the parameter list. This is to reject caching and request directly 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 main content returned by the response, which is characters 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 represents the request/response process In the current active phase, the value of this attribute is as follows

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

1 --> Start, the open() method is called, the send() method is not called;

2 --> Send, the method is called send() method, no response received;

3 --> Received, 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 Requesting the server when sending requires network communication, which takes time. It is also possible to specify the readystatechange event handler after send. I usually use it this way, but for the sake of standardization and cross-browser compatibility, it is better to specify it before open.) .

3.3. In the readystatechange event, first determine whether the response is 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 means obtained from the cache. The above code adds a random number to each request, so the value will not be obtained from the cache, so this status does not need to be judged.

Encapsulation ajax 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("&"); 
   }

The above is the detailed content of Detailed explanation of Ajax principles and code encapsulation examples. For more information, please follow other related articles on the PHP Chinese website!