XMLHttpRequest API

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

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

var methodType = "POST";
var url = "/whats/task/xmlHttpRequest";
var req = new XMLHttpRequest(); //新建对象
req.responseType = "json";   //返回数据类型是json格式

req.onload = function(){//上传成功事件回调
    var result = req.response ;
    console.log("onload");
};
req.onprogress = function(){ //上传进度控制
    console.log("onprogress");
};
/**
 * 前端是<input type = "file" id = "myfile" />
 * 文件上传
 */
document.getElementById("myfile").onchange = function(){
    req.open(methodType,url);  //打开路径
    var file = document.getElementById("myfile").files[0];
    req.send(file); //发送二进制文件
}

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

XMLHttpRequest 属性列表

1. XMLHttpRequest.readyState 只读

   对象状态，有以下几种状态

   值	状态	描述
   0	UNSENT	对象已经建立，但还没有调用open方法
   1	OPENED	已经调用open的方法
   2	HEADERS_RECEIVED	已经调用open方法，头部信息已经是可用的
   3	LOADING	正在加载，服务器已经返回一些数据
   4	DONE	整个发送和接收数据完成

2. XMLHttpRequest.responseType

   设置服务器返回的数据类型，类似jq ajax参数的,有以下几种类型

   值	数据类型	描述
   “”	DOMString	默认值，就是string类型,默认值
   “arraybuffer”	ArrayBuffer	二进制缓冲数据类型
   “blob”	Blob	二进制数据
   “document”	Document	文档对象，content-type为application/xml
   “json”	JSON	json对象类型，content-type为application/plain
   “text”	DOMString	string类型

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);

   开始请求服务器

   属性名	说明
   method	POST ,GET 等
   url	请求路径
   async	是否异步,默认是异步，可选
   user	用户名，可选
   password	密码，可选

5. void overrideMimeType(DOMString mime);
   将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集，level1就是这样子解决获取二进制数据的，这样获取二进制值需要进一步进行接下

   req.overrideMimeType("text/plain; charset=x-user-defined");

6. void send(param);

   开始发送数据，根据param参数的不同可以发送不同的数据类型到服务器，可以是以下参数

   值	描述
   ArrayBuffer	数组缓存二进制数据，已不建议用
   ArrayBufferView	二进制视图数据
   Blob	二进制数据,file对象是它的子类，继承于他
   Document	docuemnt对象
   FormData	模拟表单数据对象，可用于文件异步上传

7. void setRequestHeader(DOMString header, DOMString value);

   设置请求头部信息，例如setRequestHeader(“content-type”,”image/png”)

参考文档

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest