AJAX之XHR

Posted 2020-10-04

AJAX工作流程

1.create XHR

2.xhr.open(method, url, async)

3.xhr.onreadystatechange

4.xhr.send()

XHR对象

AJAX技术的核心是XMLHttpRequest对象(简称XHR)，IE（6789+）、chrome、firefox、safari都支持XHR对象；

使用XHR首页要创建它：

 1 var xhr = new XMLHttpRequest() 

兼容IE67的写法：

 1 var xhr = new (window.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP") 

XHR创建请求

xhr.open(method, url, async)是创建请求，并接收三个参数：

1.发送请求的类型，主要是"GET"和"POST"；

2.请示的url，如果为GET，data参数拼接在url后面，

如何为POST，xhr.send(data)，并且设置header；

3.async默认为true，表示异步，false表示同步。

XHR响应请求

onreadychange对象有个readyState属性，其值有5个

0:未初始化。尚未调用open()方法

1:启动。已经调用open()方法，但尚未调用send()方法

2:发送。已经调用send()方法，但尚未接收到响应

3:接收。已经接受到部分响应数据

4:完成。已经接受到全部响应数据，并且可以在客户端使用

1 xhr.onreadystatechange = function() {
2   if (xhr.readyState === 4) {
3       var status = xhr.status;
4       if (status >= 200 & status < 300 || status === 304) {
5           console.log(xhr.responseText)
6       }
7   }
8 }        

发送请求

xhr.open(data)

简单封装

 1 var ajax = (function() {
 2     var xhr = new (window.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP");
 3     var request = function(options) {
 4       var fn = function() {};
 5       var opts = options || {};
 6       var method = opts.method || ‘get‘;
 7       var params = opts.params || null;
 8       var async = opts.async || true;
 9       var success = opts.success || fn;
10       var failue = opts.failue || fn;
11       var url = opts.url;
12 
13       method = method.toUpperCase();
14       var arrParams = [];
15       if (params) {
16         for (var i in params) {
17           arrParams.push(i + ‘=‘ + params[i]);
18         }
19         params = arrParams.join(‘&‘);
20       }
21       if (method === ‘GET‘) {
22         url += url.indexOf(‘?‘) === -1 ? ‘?‘ : params;
23       }
24       if (method === ‘POST‘) {    
25         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
26       }
27       xhr.open(method, url, async);
28       xhr.onreadystatechange = function() {
29         if (xhr.readyState === 4) {
30           var status = xhr.status;
31           if(status >= 200 && status < 300 || status === 304) {
32             success(xhr.responseText);
33           }
34         }
35       }
36       xhr.onerror = function() {
37         failuse(xhr);
38       }
39       xhr.send(params)
40     }
41     return request
42   })();
43 
44   // 调用 
45   ajax({
46     url: ‘./data.js‘,
47     method: ‘get‘,
48     success: function(res) {
49       console.log(res)
50     }
51   })