今天要说说Ajax。(自己对这方面不了解,为了避免误人子弟,只作个人浏览)
xhr.open("get", "example.php", false)
这段代码会启动一个针对example.php的GET请求,第三个Boolean为是否异步的意思
在调用open()方法之后而且调用send()方法之前调用setRequestHeader()
可以自定义请求头部信息
xhr.open('POST', '/test/', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交
xhr.send('name=luozh&size=12');
xhr的readyState属性
- 未初始化。尚未调用open()方法
- 启动。已经调用open()方法,但尚未调用send()方法。
- 发送。已经调用send()方法,但尚未接受到响应。
- 接受。已经接受到部分响应数据。
- 完成。已经接受到全部响应数据,而且已经可以在客户端使用。每次状态的改变都会触发一次readystatechange事件,我们使用onreadystatechange属性监听,
var xhr;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.open('GET', '/test/', true); // 以GET请求的方式向'/test/'路径发送异步请求
xhr.send();
xhr.onreadystatechange = function () { // 利用onreadystatechange监测状态
if (xhr.readyState === 4) { // readyState为4表示请求响应完成
if (xhr.status === 200) { // status为200表示请求成功
console.log('执行成功');
} else {
console.log('执行出错');
}
}
}
}
xhr其他属性
responseText; 作为响应主体被返回的文本
status: 响应的HTTP状态
statueText: HTTP状态的说明
status状态码为200作为成功的标志,304时表示请求的资源没有被修改。可以直接使用浏览器中缓存的版本。
题外话
此文总结于JavaScript高级程序设计的Ajax章节,对于经典的知识还是看经典书籍最好。