ajax XMLHttpRequest · 前端

>[danger]* XMLHttpRequest不好用,所以各个框架都要将其封装.规范制定者也知道不好用,所以就出了个[Fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)API来代替XMLHttpRequest >* 由于Fetch API目前的[浏览器兼容性](https://caniuse.com/#search=fetch)不行,所以现在还不被考虑使用,但是它真的很好用 ## **属性** ### **父类XMLHttpRequestEventTarget的属性：** **onabort** 当请求失败时调用该方法，接受 abort 对象作为参数。IE10 **onerror** 当请求发生错误时调用该方法，接受 error 对象作为参数。IE10 **onload** 当一个 HTTP 请求正确加载出内容后返回时调用，接受 load 对象作为参数。IE9 **onloadstart** 当一个 HTTP 请求开始加载数据时调用，接受 loadstart 对象作为参数。IE10 **onprogress** 间歇调用该方法用来获取请求过程中的信息，接受 progress 对象作为参数。IE10 **ontimeout** 当超时时调用，接受 timeout 对象作为参数；只有设置了 XMLHttpRequest 对象的 timeout 属性时，才可能发生超时事件。IE8 **XMLHttpRequestEventTarget.onloadend** 当内容加载完成，不管失败与否，都会调用该方法，接受 loadend 对象作为参数。IE10 ### **自身XMLHttpRequest的属性** **onreadystatechange** 当 readyState 属性发生变化时，调用的 EventHandler。【IE5】 **readyState** 只读,返回一个无符号短整型（unsigned short）数字，代表请求的状态码。【IE7】 | 值 | 状态 | 描述 | | --- | --- |--- | | 0 | UNSENT | XMLHttpRequest 代理已被创建，但尚未调用 open() 方法 | | 1 | OPENED | open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部，可以调用 send() 方法来发起请求 | | 2 | HEADERS\_RECEIVED | send() 方法已经被调用，响应头也已经被接收 | | 3 | LOADING | 响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据 | | 4 | DONE | 请求操作已经完成。这意味着数据传输已经彻底完成或失败 | >[danger]在IE中，状态有着不同的名称，并不是 `UNSENT`，`OPENED`，`HEADERS_RECEIVED`，`LOADING` 和 `DONE` , 而是 `READYSTATE_UNINITIALIZED`(0)，`READYSTATE_LOADING`(1) ，`READYSTATE_LOADED`(2) ，`READYSTATE_INTERACTIVE`(3)` 和 READYSTATE_COMPLETE`(4) 。 **response** 只读,返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。【IE10】 **responseText** 只读,返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。【IE5 IE10之前只有请求完成才来接受的到】 **responseType** 一个用于定义响应类型的枚举值（enumerated value）。【IE10】 **responseURL** 只读,返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。【IE不支持】 **responseXML** 只读,返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。【任何版本IE都支持？】 **status** 只读,返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。【IE7】ie5/6用ActiveXObject()代替 **statusText** 只读,返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，"200 OK"）。【IE7】ie5/6用ActiveXObject()代替 **timeout** 一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。【IE10】 **ontimeout** 当请求超时调用的 EventHandler。 **upload** 只读,XMLHttpRequestUpload，代表上传进度。【IE10】 **withCredentials** 一个布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。非标准属性【10】 **channel** 只读,一个 nsIChannel，对象在执行请求时使用的通道。 **mozAnon** 只读,一个布尔值，如果为真，请求将在没有 cookie 和身份验证 header 头的情况下发送。 **mozSystem** 只读,一个布尔值，如果为真，则在请求时不会强制执行同源策略。 XMLHttpRequest.mozBackgroundRequest 一个布尔值，它指示对象是否是后台服务器端的请求。 ## **方法** **XMLHttpRequest.abort()** 如果请求已被发出，则立刻中止请求。 XMLHttpRequest.getAllResponseHeaders() 以字符串的形式返回所有用 CRLF 分隔的响应头，如果没有收到响应，则返回 null。【IE5】 **XMLHttpRequest.getResponseHeader()** 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。【IE5】 **XMLHttpRequest.<span style="color:blue">open</span>()** 初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。【IE5】 **XMLHttpRequest.overrideMimeType()** 覆写由服务器返回的 MIME 类型。【IE11】 **XMLHttpRequest.<span style="color:blue">send</span>()** 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。【IE5】 **XMLHttpRequest.setRequestHeader()** 设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。【IE5】 ## **事件** **abort** 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。也可以使用 onabort 属性。【IE5】 **error** 当 request 遭遇错误时触发。也可以使用 onerror 属性【IE 10】 **load** XMLHttpRequest请求成功完成时触发。也可以使用 onload 属性.【IE9】 **loadend** 当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。也可以使用 onloadend 属性。【IE10】 **loadstart** 接收到响应数据时触发。也可以使用 onloadstart 属性。【IE10】 **progress** 当请求接收到更多数据时，周期性地触发。也可以使用 onprogress 属性【IE10】 **timeout** 在预设时间内没有接收到响应时触发。也可以使用 ontimeout 属性。【IE8】 ~~~javascript var method = 'GET'; var url = 'https://developer.mozilla.org/'; var xmlhttp = new XMLHttpRequest(); xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('请求被中止'); }; // 请求出错回调函数 xmlhttp.onerror = function () { console.log("An error occurred during the transaction"); }; // 请求成功回调函数 xmlhttp.onload = function () { // 处理取回的数据(在 xmlhttp.response 中找到) }; // 请求开始回调函数 xmlhttp.onloadstart = function () { console.log("Download underway"); }; /* 也可以这样监听： xhr.addEventListener('loadstart', e => { _s.beforeSend(xhr); }); */ xmlhttp.onprogress = function (event) { event.loaded;// 已传输的数据量 event.total;//总共的数据量 }; // 请求超时 xhr.timeout = 10; // 设置超时时间,0表示永不超时 xmlhttp.ontimeout= function () { console.log(""); }; // 请求结束 xmlhttp.onloadend= function () { console.log(""); }; // 设置期望的返回数据类型 'json' 'text' 'document' ... xhr.responseType = ''; // 设置请求头 xhr.setRequestHeader('', ''); xmlhttp.send(); xmlhttp.abort(); // 这将会调用我们上面定义的 onabort 回调函数 ~~~ ``` var xhr=new XMLHttpRequest(); xhr.open("GET","https://api.apiopen.top/getJoke"); xhr.send(); //绑定事件，处理响应结果 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status>=200 && xhr.status<300){ console.log(xhr.response) console.log(xhr.responseText) console.log(xhr.responseXML) } } } ``` ``` var url="www.baidu.com"; var xmlhttp=null; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject){ // code for IE5 and IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null){ xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); }else{ alert("浏览器不支持XMLHTTP."); } function state_Change() { if (xmlhttp.readyState==4){ // 4 = "loaded" if (xmlhttp.status==200){// 200 = OK // ...our code here... }else{ alert("Problem retrieving XML data"); } } } ``` 以上搞懂了我们就来仿照jquery封装ajax [https://www.jianshu.com/p/918c63045bc3/](https://www.jianshu.com/p/918c63045bc3/)