XMLHttpRequest API

柔情只为你懂 2022-07-27 18:58 176阅读 0赞

jquery ajax就是根据XMLHttpRequest level1进行封装异步请求，可惜目前它的版本不支持接收和传送二进制数据。XMLHttpRequest level2的诞生引入了很多新的api，例如可以接收和传送二进制数据，传输过程中的也添加了更细致的事件监听。

先来个demo，发送二进制数据，详细demo参考[http://blog.csdn.net/yingxiake/article/details/50990511][http_blog.csdn.net_yingxiake_article_details_50990511]

接下来补下api笔记，下面遇到问题，直接查看api

XMLHttpRequest 属性列表

1.  XMLHttpRequest.readyState 只读
    
    对象状态，有以下几种状态
    
    <table> 
     <thead> 
      <tr> 
       <th>值</th> 
       <th>状态</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>0</td> 
       <td>UNSENT</td> 
       <td>对象已经建立，但还没有调用open方法</td> 
      </tr> 
      <tr> 
       <td>1</td> 
       <td>OPENED</td> 
       <td>已经调用open的方法</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>HEADERS_RECEIVED</td> 
       <td>已经调用open方法，头部信息已经是可用的</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>LOADING</td> 
       <td>正在加载，服务器已经返回一些数据</td> 
      </tr> 
      <tr> 
       <td>4</td> 
       <td>DONE</td> 
       <td>整个发送和接收数据完成</td> 
      </tr> 
     </tbody> 
    </table>
2.  XMLHttpRequest.responseType
    
    设置服务器返回的数据类型，类似jq ajax参数的,有以下几种类型
    
    <table> 
     <thead> 
      <tr> 
       <th>值</th> 
       <th>数据类型</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>“”</td> 
       <td>DOMString</td> 
       <td>默认值，就是string类型,默认值</td> 
      </tr> 
      <tr> 
       <td>“arraybuffer”</td> 
       <td>ArrayBuffer</td> 
       <td>二进制缓冲数据类型</td> 
      </tr> 
      <tr> 
       <td>“blob”</td> 
       <td>Blob</td> 
       <td>二进制数据</td> 
      </tr> 
      <tr> 
       <td>“document”</td> 
       <td>Document</td> 
       <td>文档对象，content-type为application/xml</td> 
      </tr> 
      <tr> 
       <td>“json”</td> 
       <td>JSON</td> 
       <td>json对象类型，content-type为application/plain</td> 
      </tr> 
      <tr> 
       <td>“text”</td> 
       <td>DOMString</td> 
       <td>string类型</td> 
      </tr> 
     </tbody> 
    </table>
3.  XMLHttpRequest.response 只读
    
    服务器返回的数据，数据类型可以根据responseType来设置
4.  XMLHttpRequest.responseText 只读
    
    服务器返回文本类型
5.  XMLHttpRequest.status 只读
    
    服务器返回的状态码，例如200表示请求成功
6.  XMLHttpRequest.statusText 只读
    
    服务器返回状态文本，例如”200 OK”
7.  XMLHttpRequest.timeout
    
    设置请求超时时间，超时时会发一个事件，可以在ontimeout接收处理
8.  XMLHttpRequest.withCredentials
    
    boolen值，默认是false，表示是否需要跨域请求数据，当然得服务器设置允许跨域才可以
9.  XMLHttpRequest.upload
    
    封装上传事件类型，xmlhttprequest 进度类型有俩种，上传和下载进度，upload为上传事件类型，他有和下载类型一样的abort，load，loadend，progress等等事件

XMLHttpRequest事件列表

1.  XMLHttpRequestEventTarget.onabort
    
    请求被停止时的回调,当调用abort方法会触发此回调方法
2.  XMLHttpRequestEventTarget.onerror
    
    请求过程发生意外的回调
3.  XMLHttpRequestEventTarget.onload
    
    请求成功获取数据成功的回调
4.  XMLHttpRequestEventTarget.onloadstart
    
    开始请求数据的回调
5.  XMLHttpRequestEventTarget.onprogress
    
    请求进度的回调，可以用来做进度调
6.  XMLHttpRequestEventTarget.ontimeout
    
    请求延时的回调函数，只有当设置timeout的时间的时候，才会触发回调
7.  XMLHttpRequestEventTarget.onloadend
    
    请求结束的回调，不管请求是否成功!!

XMLHttpRequest 方法列表

1.  void abort(); 停止请求过程
2.  DOMString getAllResponseHeaders();
    
    获取所有的响应头
3.  DOMString? getResponseHeader(DOMString header);
    
    通过头部key来获取响应头
4.  void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
    
    开始请求服务器
    
    <table> 
     <thead> 
      <tr> 
       <th>属性名</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>method</td> 
       <td>POST ,GET 等</td> 
      </tr> 
      <tr> 
       <td>url</td> 
       <td>请求路径</td> 
      </tr> 
      <tr> 
       <td>async</td> 
       <td>是否异步,默认是异步，可选</td> 
      </tr> 
      <tr> 
       <td>user</td> 
       <td>用户名，可选</td> 
      </tr> 
      <tr> 
       <td>password</td> 
       <td>密码，可选</td> 
      </tr> 
     </tbody> 
    </table>
5.  void overrideMimeType(DOMString mime);  
    将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集，level1就是这样子解决获取二进制数据的，这样获取二进制值需要进一步进行接下
    
        req.overrideMimeType("text/plain; charset=x-user-defined");
6.  void send(param);
    
    开始发送数据，根据param参数的不同可以发送不同的数据类型到服务器，可以是以下参数
    
    <table> 
     <thead> 
      <tr> 
       <th>值</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>ArrayBuffer</td> 
       <td>数组缓存二进制数据，已不建议用</td> 
      </tr> 
      <tr> 
       <td>ArrayBufferView</td> 
       <td>二进制视图数据</td> 
      </tr> 
      <tr> 
       <td>Blob</td> 
       <td>二进制数据,file对象是它的子类，继承于他</td> 
      </tr> 
      <tr> 
       <td>Document</td> 
       <td>docuemnt对象</td> 
      </tr> 
      <tr> 
       <td>FormData</td> 
       <td>模拟表单数据对象，可用于文件异步上传</td> 
      </tr> 
     </tbody> 
    </table>
7.  void setRequestHeader(DOMString header, DOMString value);
    
    设置请求头部信息，例如setRequestHeader(“content-type”,”image/png”)

参考文档

[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest][https_developer.mozilla.org_en-US_docs_Web_API_XMLHttpRequest]

[http_blog.csdn.net_yingxiake_article_details_50990511]: http://blog.csdn.net/yingxiake/article/details/50990511
[https_developer.mozilla.org_en-US_docs_Web_API_XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest