Detailed explanation of ajax usage of native and jQuery

Introduction to Ajax

Ajax is known as an abbreviation for Asynchronous (asynchronous) JavaScript And Xml. Today, technologies that allow browsers to communicate with servers without having to refresh the current page are all called Ajax.

Synchronization refers to the communication mode in which the sender sends out data and waits for the receiver to send back a response before sending out the next data packet.

Asynchronous refers to the communication mode in which the sender sends out data without waiting for the receiver to send back a response and then send the next data packet.

Defects of AJAX

AJAX makes extensive use of the JavaScript and AJAX engines, depending on browser support. IE5.0 and above, Mozilla1.0, NetScape7 and above are supported. Although Mozilla also supports AJAX, XMLHttpRequest is provided in different ways. Therefore, programs using AJAX must test compatibility for each browser.

AJAX did not refresh the whole page when updating the page content, so the back function of the web page is invalid; Some users often don't know whether the current data is old or updated. This requires reminding users that "data has been updated" in an obvious position.

Streaming media support is not as good as FLASH.

1 Some handheld devices (such as mobile phones, PDA, etc.) can not support Ajax well at present.

Serialization of form data:

 $('#submit').click(function(){
  $('#form').serialize();    // Will be based on input Inside name Serialize data into strings; eg : name=yang
  $('#form').serializeArray();  // Will be based on input Inside name Serialize data into arrays; eg : [object]
 　　 // Note: No name You can't get a value 
  // The following two are not jQuery Method of 
  JSON.parse()  //json String is converted to json Object 
  JSON.stringify()  //json Object to the json String 
});

ajax method for jQuery:

$.ajax({
  url:'/comm/test1.php',
  type:'POST', //GET
  async:true,  // Or false, Asynchronous or not 
  data:{
    name:'yang',age:25
  },
  timeout:5000,  // Timeout time 
  dataType:'json',  // Data format returned: json/xml/html/script/jsonp/text
  beforeSend:function(xhr){
    console.log(xhr)
    console.log(' Before sending ')
  },
  success:function(data,textStatus,jqXHR){
    console.log(data)
    console.log(textStatus)
    console.log(jqXHR)
  },
  error:function(xhr,textStatus){
    console.log(' Errors ')
    console.log(xhr)
    console.log(textStatus)
  },
  complete:function(){
    console.log(' End ')
  }
})

Native ajax method:

$('#send').click(function(){
  // Requested 5 Stages, corresponding to readyState Value of 
    //0:  Not initialized, send Method is not called; 
    //1:  Sending request, send Method has been called; 
    //2:  When the request is sent, send The method is finished; 
    //3:  Parsing response content; 
    //4:  The response content is analyzed; 
  var data = 'name=yang';
  var xhr = new XMLHttpRequest();    // Create 1 A ajax Object 
  xhr.onreadystatechange = function(event){  // Right ajax Object for listening 
    if(xhr.readyState == 4){  //4 Indicates that parsing is complete 
      if(xhr.status == 200){  //200 Return for normal 
        console.log(xhr)
      }
    }
  };
  xhr.open('POST','url',true);  // Establish a connection, parameters 1 : Sending method, 2 : Request address, 3 Whether asynchronous, true Asynchronous 
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');  // Optional or not 
  xhr.send(data);    // Send 
});