onreadystatechange 每次状态改变所触发事件的事件。
responseText 从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
responseXML 对请求的响应，解析为 XML 并作为 Document 对象返回。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 请求的 HTTP 的状态代码
readyState HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据
记住这张图
1、创建对象
IE5、6不兼容XMLHttpRequest，所以要使用ActiveXObject()对象，并传入 'Microsoft.XMLHTTP'，达到兼容目的。
var xhq = null
if (XMLHttpRequest) {
xhq = new XMLHttpRequest()
} else {
xhq = new ActiveXObject("Microsoft.XMLHTTP")
复制代码
2、初始化 HTTP 请求参数
语法： open(method, url, async, username, password)
参数说明：
必填 method 请求的类型 值包括 GET、POST 和 HEAD
必填 url 请求的路径 需要向服务器请求的路径
可选 async 此次请求的方式 默认为true 即为异步
可选 username 与 password 此次请求需要的身份验证
同时该请求会将 readyState 设置为1，并把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。
xhq.open('get', 'https://www.easy-mock.com/mock/5cf7654cf8ab93502742fb99/example/query', true)
复制代码
此处接口使用easy-mock模拟。
3、 发送此次请求
语法： send(body)
参数说明：
可选 传递的参数列表
xhq.send({
username: '123'
复制代码
请求发送后， send()会把 readyState 设置为 2，并触发 onreadystatechange 事件。
当所有的 HTTP 响应头部已经接收，send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件。
当响应完成，send() 或后台线程把 readyState 设置为 4，并最后一次触发事件。
4、监听请求状态，执行对应回调函数
当readyState为4时，且服务器响应为200时
xhq.onreadystatechange = function () {
if ( xhq.readystate == 4 && xhq.status == 200 ) {
success(xhq.responseText)
} else if (xhq.readyState == 4 && xhq.status !== 200) {
error()
复制代码
以函数方式合并所有内容为
function
sendAjax
(
obj
)
{
function
splicStr
(
data
)
{
var
str =
''
for
(
var
i in data) {
str = i +
'='
+ data[i]
return
str
var
xhq =
null
if
(XMLHttpRequest) {
xhq =
new
XMLHttpRequest
()
}
else
{
xhq =
new
ActiveXObject
(
"Microsoft.XMLHTTP"
)
if
(obj.method.
toUpperCase
() ===
'GET'
) {
xhq.
open
(obj.method, obj.url +
'?'
+
splicStr
(obj.data), typeof obj.async ===
'boolean'
? obj.async :
true
)
xhq.
send
()
else
if
(obj.method.
toUpperCase
() ===
'POST'
) {
xhq.
open
(obj.method, obj.url, typeof obj.async ===
'boolean'
? obj.async :
true
)
xhq.
setRequestHeader
(
"content-type"
,
"application/x-www-form-urlencoded"
)
xhq.
send
(obj.data)
xhq.onreadystatechange =
function
(
)
{
if
( xhq.readyState ==
4
&& xhq.status ==
200
) {
success
(xhq.responseText)
}
else
if
(xhq.readyState ==
4
&& xhq.status !==
200
) {
error
()
sendAjax
({
url
:
'your url'
,
method
:
'post'
,
async
:
true
,
data
: {
username
:
'xiong'
,
pwd
:
'123'
success
: function (data) {
console.
log
(data)
error:
function
(
)
{
console.
log
(
'发生了错误'
)
复制代码
以原型构造的方式合并为
function sendAjax(obj) {
this.xhq = null
this.method = obj.method || 'get'
this.url = obj.url
this.data = obj.data
this.async = typeof obj.async === 'boolean'? obj.async : true
this.success = obj.success
this.error = obj.error
this.init()
sendAjax.prototype = {
init: function () {
if (XMLHttpRequest) {
this.xhq = new XMLHttpRequest()
} else {
this.xhq = new ActiveXObject("Microsoft.XMLHTTP")
this.openReq()
this.watchReq()
openReq: function () {
if (this.method.toUpperCase() === 'GET') {
this.xhq.open(this.method, this.url + '?' + this.splicStr(this.data), this.async)
this.xhq.send()
else if (this.method.toUpperCase() === 'POST') {
this.xhq.open(this.method, this.url, this.async)
this.xhq.setRequestHeader("content-type","application/x-www-form-urlencoded")
this.xhq.send(this.data)
watchReq: function () {
var that = this
this.xhq.onreadystatechange = function () {
if ( that.xhq.readyState == 4 && that.xhq.status == 200 ) {
that.success(that.xhq.responseText)
} else if (that.xhq.readyState == 4 && that.xhq.status !== 200) {
that.error()
splicStr: function (data) {
var str = ''
for (var i in data) {
str = i + '=' + data[i]
return str
new sendAjax({
url: 'https://www.easy-mock.com/mock/5cf7654cf8ab93502742fb99/example/query',
method: 'get',
async: true,
data: {
username: 'xiong',
pwd: '123'
success: function (data) {
console.log(data)
error: function () {
console.log('发生了错误')
复制代码
案例没有处理所有可能，但是已经够基本使用。
熊吉祝大家学习愉快。
