• Asynchronous JavaScript and XML
  • Js asynchronously sends HTTP request data without refreshing the page and returns data such as JSON, making it possible to separate the front and back ends

Create an XHR object

var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }else {// ie5/ie6 compatibility XHR = new ActiveXObject('MicrosoftXMLHTTP'); }Copy the code

The open method

  • Option parameter list

Method: request mode URL: request address Async: true asynchronous, false synchronous

  • Send: Sends a request

Parameter: POST request body data, GET do not write

xhr.open('GET', 'https; //www.baidu.com', true); xhr.send(); // post: // xhr.setrequesTheader (' content-type ', 'application/x-www-form-urlencoded'); // The purpose is to convert the numeric value after the request body to a key-value pair. // xhr.send('a=1&b=2');Copy the code

AJAX- Response task when sending a request

Onreadystatechange event: the event mounted to the XMLHttpRequest object readyState State: The status code (0-4) for each stage of the HTTP request sent through the XMHttpRequest object When the readyState changes, the onreadystatechange event executes its callback function (2,3,4). 0: the request is not initialized, after creation, before sending 1: the server connection has been established, After sending 2: the request is received 3: the request is being processed 4: the request is completed and the response is ready Note: readyState is only the status code of the request. The success of obtaining the resource depends on the status of status.

xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); // Return json string object}}Copy the code

Server correspondence

ResponseText: get string data responseXML: get XML data

Encapsulation ajax

var $ = (function() { var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Miscrosoft.XMLHTTP'); if(! XHR) {throw new Error(' Your browser does not support Ajax '); } function _doAjax(opt) { var opt = opt || {}, type = (opt.type || 'GET').toLowerCase(), async = opt.async || true, url = opt.url, data = opt.data || null, error = opt.error || function() {}, success =opt.success || function() {}, complete = opt.complete || function() {}; // Execute if (! Url) {throw new Error(' url is not configured '); } xhr.open(type, url, async); type === 'POST' && xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode'); xhr.send(type === 'GET' ? null : formatData(data)); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { success(JSON.parse(responseText)); } if(xhr.status === 404) { error(); } complete(); } } function formatData(obj) { var str = ''; for(var key in obj) { str += key + '=' + obj[key] + '&'; } return str.replace(/&$/, ''); } return {doajax: function(opt) {// doajax (opt); }, post: function(url, data, callback) { _doAjax({ type: 'POST', url: url, data: data, success: callback }); } get: function(url, callback) { _doAjax({ type: 'GET', url: url, success: callback }); }}}) ();Copy the code