【JavaScript】——原生Ajax

编写原生Ajax的过程，和打电话的过程有点类似。我们可以类比一下。

打电话的过程：

1. 拥有一个电话；
2. 拨号；
3. 自己说；
4. 听别人说。

原生Ajax的过程：

1. 创建Ajax对象（XMLHttpRequest）；
2. 连接服务器（open）；
3. 发送请求（send）；
4. 接受返回值（onreadystatechange）。

function ajax(url, fnSucc, fnFiled){
if(window.XMLHttpRequest){
//1.用没有定义的变量(如：a)，报错；2.用没有定义的属性(如：window.a)，undefined
var oAjax = new XMLHttpRequest();
//非IE6
}else{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); //IE6

}
//连接服务器
//open(方式，url， 异步传输)
oAjax.open('get', url, true);
//发送请求

oAjax.send();
//接受请求
//当网络状态改变的时候
oAjax.onreadystatechange = function(){
//每当 readyState 改变时，就会触发 onreadystatechange 事件
if(oAjax.readyState==4){
// readyState 状态值：网络状态，浏览器和服务器进行到哪一步了
if(oAjax.status==200){
//状态码：http状态，说到404就知道了

fnSucc(oAjax.responseText);
}else{
if(fnFiled){
fnFiled(oAjax.status);
}
}
}
}
}

readyState状态值：

0 （未初始化）还没有调用open方法
1 （载入）以调用send方法，正在发送请求
2 （载入完成）send方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

 

http状态码：

2xx (成功)表示成功处理了请求的状态代码

• 200 (成功) 服务器已成功处理了请求。

3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

• 304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理

• 400 (错误请求) 服务器不理解请求的语法。
• 403 (禁止) 服务器拒绝请求。
• 404 (未找到) 服务器找不到请求的网页。

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错

• 500 (服务器内部错误) 服务器遇到错误，无法完成请求。
• 501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
• 502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。
• 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。
• 504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
• 505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。