在上篇文章给大家介绍了Ajax基础详解教程(一),讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //设置请求信息
xhr.send();//提交请求
//等待服务器返回内容
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) { //如果内容响应成功,并解析完成
alert( xhr.responseText ); //弹出内容
}
}
}
下面我们就讲到 ,xhr.send();这一句呢才是真正请求数据的,open方法只是设置了一些请求参数。
现在呢请求递交了,就等服务器回应了,这个时候Ajax的一个属性就要登场了,那就是 responseText ,ajax请求返回的内容都放在了这里面,而且不管你请求的内容是什么,这里存放的都是是字符串类型。
当然我们上文也提到了,要想用异步请求呢,这里需要条件判断才知道服务端对请求的内容是否响应完毕,这个时候另一个属性就要登场了,readyState,他代表着Ajax请求过程的不同的状态,参数如下:
0 (初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容(因为收到的内容 并不是人能看懂的内容,所以需要解析)
4 (完成)响应内容解析完成,可以在客户端调用了
由上我们可以得到,在状态2的时候已经回应了请求的内容了,但是这个内容我们人看不懂撒,机器才懂,所以就有3,帮我们解析这个内容,然后解析完成就变成4了,这个时候的内容,咱们前端就可以用了。
状态是有了,可咱们怎么能知道啥时候是啥状态呢,这个时候我们就要用到一个监控状态的事件了onreadystatechange事件,当状态值改变的时候触发会触发这个事件,所以当状态为4的时候我们再弹出内容。
上面的代码基本已经了解了原理,不过当然不是最完善的,这个时候,我们虽然监控到了状态,响应了内容,但是内容不一定就是对的呀,比如可能内容出错了,可能我们请求了一个不存在的页面,这个时候readyState是无法判断错误的,我们需要知道内容是否正常,这个时候另一个属性 status属性就登场了,它代表的不是Ajax状态,而是服务器(请求资源)的状态, http状态码。状态码有很多,其中比较出名的就是200,成功状态码,和404 Not Found.其他的大家私下自行查阅。这里可以看到。









