XMLHttpRequest 实现ajax发送请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.send(null);

就是这样一个简单的ajax请求就完成了，接下来对 XMLHttpRequest 对象及所拥有的方法、属性进行说明。

XMLHttpRequest():
这是个构造函数，用于初始化一个XMLHttpRequest对象。

方法

xhr.open(method, url, async, user, password):

作用: 通过XMLHttpRequest实例，打开一个请求。
参数:

• method(String): 请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数
• url(String): 请求访问的URL地址
• async(Boolean): 配置是否为异步执行，默认值为true; 如果想了解更多请点击ajax的同步与异步
• user(String): 授权参数
• password(String): 授权参数
  注意: 在未调用send()前, 再次调用open()方法等同于abort()

xhr.send(data)
说明: 发送请求
参数：
data(String, Array, Object): 发送请求时所需要传递的参数，为空时传递null

xhr.abort();
说明：中止请求

xhr.getAllResponseHeaders();
说明：获取全部响应头信息
注意：需要在onreadystatechange事件函数中使用

xhr.getResponseHeader(headerStr);
说明：获取响应头信息
注意：需要在 onreadystatechange 事件函数中使用
参数：
headerStr: 响应头名称

属性

xhr.readyState
说明：当前请求的五种状态值，一般在事件函数 onreadystatechange 中作为条件判断，以下是五种状态值及对应说明。

• 0未打开，xhr.open()方法还未被调用.
• 1未发送, xhr.send()方法还未被调用.
• 2已获取响应头,xhr.send()方法已经被调用, 响应头和响应状态已经返回.
• 3正在下载响应体, xhr.响应体下载中; responseText中已经获取了部分数据.
• 4请求完成, 整个请求过程已经完毕.

xhr.responseType
说明： 通知服务器，请求所期待反回的数据类型
不同的配置会影响接收返回数据的方式，常用的数据类型有两种，对应的接收属性为：
text => responseText
json => response
不建议配置该项，使用默认字符串进行接收，接收后在客户端自行转换格式。

xhr.timeout
说明: 通过该属性进行超时时长设置，单位为毫秒。超时后会触发 ontimeout 事件
注意: 当前请求为同步请求时，使用该属性会抛异常。

xhr.withCredentials
说明: 跨域请求是否提供凭据(cookie、HTTP认证及客户端SSL证明等)。想了解更多请查看ajax中的withCredentials使用效果。

xhr.upload
说明：该属性指向 XMLHttpRequestUpload 上传对象，通过在该对象上绑定事件来处获取相应的信息。除过 onreadystatechange 事件不可以绑定至 XMLHttpRequestUpload 以象，其它事件均可以绑定

想了解更多请查看带进度的简单上传。

事件

xhr.onreadystatechange
说明: 监听属性 xhr.readyState ，在该值发生改变后触发并执行事件函数；
示例:

xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) {
        return;
    }
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // jquery success(XHR, TS)
        options.success(xhr.response, xhr.status);
    } else {
        // jquery error(XHR, TS, statusText)
        options.error(xhr, xhr.status, xhr.statusText);
    }
};

其它的事件还有：

xhr.onloadstart

说明: 监听开始事件，触发后执行事件函数

xhr.onprogress
说明: 监听数据传输进行中事件，触发后执行事件函数

xhr.onabort
说明: 监听请求终止事件，触发后执行事件函数

xhr.onerror
说明: 监听请求失败事件，触发后执行事件函数

xhr.onload
说明: 监听请求成功事件，触发后执行事件函数
xhr.ontimeout
说明: 监听请求延迟未完成事件，触发后执行事件函数 

xhr.onloadend
说明: 监听请求完成事件，触发后执行事件函数
示例: