Ajax implementation

JQuery Ajax method provides:

 1 commonAjax: function (actionName, message) {
 2             var result;
 3             $.ajax({
 4                 async: false,
 5                 type: "post",
 6                 url: actionName,
 7                 dataType: "json",
 8                 timeout: 5000, // 设置请求超时时间（毫秒）。
 9                 contentType: "application/x-www-form-urlencoded; charset=utf-8",
10                 data: {
11                     message: message
12                 },
13                 success: function (data) {
14                     // success(data);
15                     result = data;
16                 },
17                 error: function (jqXHR, textStatus, errorThrown) {
18                     if (textStatus == "timeout") {
19                         result = "timeout";
20                     }
21                 }
22             });
23             return result;
24         }

 Native js implement Ajax methods:

var Ajax = { 
  GET: function (URL, Fn) {
       // the XMLHttpRequest object is used to exchange data with the server in the background    
      var XHR = new new the XMLHttpRequest ();             
      xhr.open ( 'the GET', URL, to true ); 
      xhr.onreadystatechange = function () {
      　　// the readyState == described request has been completed. 4 
     　　 IF (xhr.readyState. 4 && xhr.status == == == 200 is || xhr.status 304 ) { 
         　　// get the data from the server 
         　　fn.call ( the this , xhr.responseText);   
      　　} 
      }; 
      xhr.send (); 
  },
  // and Data T. should be 'a = a1 & b = b1 ' this string format, if the data object in jq automatically this object into a string format 
  POST: function (URL, data, Fn) {
       var XHR = new new the XMLHttpRequest (); 
      xhr.open ( "the POST", URL, to true );
       // add http header, transmitting information to the server when the content encoding type 
      xhr.setRequestHeader ( "content-type", "application / x-www-form -urlencoded " );   
      xhr.onreadystatechange = function () {
          IF (xhr.readyState ==. 4 && (|| xhr.status 200 is xhr.status == == 304 )) { 
             fn.call ( the this , xhr.responseText) ; 
         } 
      };
      xhr.send(data);
  }
}

Comment:

1. Open (Method, URL, the async) method takes three parameters:

　 Method : The method (GET or POST) request is used for sending;

    Compared with POST, GET easier and faster, and can be used in most cases;

    However, in the following cases, please use the POST request:

• Can not use the cache files (files or update the database on the server)
• Sending large amounts of data (POST not limit the amount of data) to the server
• When sending the user input contains unknown character, POST is more stable and more reliable than the GET

　 url : URL specified server-side script (the file can be any type of file, such as .txt and .xml, or server script file, such as .asp and .php (before return response, able to perform tasks on the server) );

　 the async : provision should asynchronous request (true) (false) or synchronous processing; true script is executed while waiting for the other server response, the response when the response is ready for processing; to false and then waiting for the server is executed.

2. send () method requests sent to the server.

3. onreadystatechange: there function processing server response whenever readyState changes, the onreadystatechange function will be executed.

4. readyState: there server response status information.

• 0: The request is not initialized (proxy is created, but not yet call open () method)
• 1: server connection is established ( openmethod has been called)
• 2: request has been received ( sendmethod has been called, and the state and the head is already available)
• 3: process the request (download, responseText properties already contains partial data)
• 4: request has been completed, and the response is ready (download operation has been completed)

5. responseText: response data string obtained.

6. setRequestHeader (): When POST transmitted data, to add HTTP header, and then Send (data), note that data format; url applied directly to the parameter information can be transmitted when GET, such url a = a1 & b = b1?.

PS : Fetch polyfill basic principle is to detect whether window.fetch methods exist, if not then use XHR implementation.