Use XMLHttpRequest to implement AJAX

$. Ajax and other functions encapsulated in jQuery have been used for a long time to form dependencies, and even forget what happened to AJAX. now let's review the process of implementing native AJAX in XMLHttpRequest.

For WEB developers, the word AJAX is no stranger at all. now I will probably think of the following points:

• Refreshing page data changes

• Asynchronous communication

• $. Ajax, $. get, $. post

• Asynchronous Javascript And XML

• ...

AJAX is an interactive web application technology designed to improve user experience. its principle is to use the XMLHttpRequest object of Javascript to communicate with the server to obtain data and then fill it in the page, in this way, information can be fed back to the user without refreshing the entire page.

Commonly used AJAX

The vast majority of AJAX we usually use should be encapsulated by jQuery, so we will have a great dependency on jQuery for a long time. In some scenarios, we only use AJAX to include the entire jQuery file. this will mirror the loading time of the webpage (worse if the user's network is poor ).

Therefore, it is necessary to master the native AJAX writing method, not only to get rid of jQuery's dependencies, but also to further deepen the understanding of asynchronous communication. If you take the time to study the XMLHttpRequest object, it would be even better.

Native AJAX

• Generate XMLHttpRequest object

  var XMLReq; if (window.XMLHttpRequest) { XMLReq = new XMLHttpRequest(); } else { XMLReq = new ActivateXObject('Microsoft.XMLHTTP'); } 

  The XMLHttpRequest object does not exist in the IE browser. it should be replaced by ActivateXObject ('Microsoft. xmlhttp.

• Send a request to the server

  // for GET method XMLReq.open('GET', 'ajax_get.html', true); XMLReq.send(); // for POST method XMLReq.open('POST', 'ajax_post.html', true); XMLReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); XMLReq.send('key=value&key2=value2'); 

  XMLReq in the code above. the third parameter of open () is to control whether asynchronous requests are made. when it is true, it is the asynchronous communication we call. when it is false, it is executed in the normal javascript logic order. The purpose of true asynchronization is to request data from the server without affecting normal javascript code execution. Otherwise, the browsing of the entire page may be affected once the request time is too long or an error occurs.

• Process server response data

  XMLReq.onreadystatechange = function () { if (4 == XMLReq.readyState && 200 == XMLReq.status) { var data = XMLReq.responseText; // return xml data // var data = XMLReq.responseXML; } } 

  A complete AJAX request process can be clearly understood against the XMLReq. readyState parameter. different values indicate the process as follows:

  ReadyState	Process Changes
  0	Request not initialized
  1	The server connection has been established.
  2	Request received
  3	Processing Request
  4	Request Completed and response ready

Simple Demo

Ajax.html