1.大家眼中的Ajax
说到Ajax，只要有过前端开发经验的童鞋一定都不陌生，大都知道它就是一种与后端之间的通信技术，通过这个神奇的家伙，我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了。Ajax最大的一个优势就是通过异步请求达到局部刷新的目的，这样就大大提高了用户体验。可是Ajax就是我们平时使用得最多的jQuery中的$.ajax()吗？答案肯定不是的，那我们就来一起看看原生的Ajax究竟长啥样把！
2.获取XMLHttpRequest
2.1 为什么要获取XMLHttpRequest对象
Ajax技术的核心是XMLHttpRequest对象（简称XHR）
-
2.2 如何获取XMLHttpRequest对象
- 由于IE5是第一款引入XHR对象的浏览器，所以在IE7之前其实都不是叫XMLHttpRequest，具体要兼容IE7之前浏览器的话可以查阅一下《高级程序设计》本文重点是讨论如何实现Ajax请求，所以，默认在内置了XHR的IE7+和其他现代浏览器下，所以：
function getXhr(){
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
}- 这样就得到了一个XHR的实例对象
3.大体的流程
-
3.1 初始化请求
- 使用XHR对象时，使用的第一个方法就是open()，这个方法不会发送请求，但会初始化一个请求准备发送，第三个参数默认是true，也就是异步的
xhr.open('get', 'example.php', false); -
3.2 发送请求
- GET请求:发送的值为空，一般写上null，适配有些浏览器
xhr.open('GET', url);
xhr.send(null);- POST请求,要模拟表单提交请求的话就将Content-type头部信息设置为application/x-www-form-urlencoded，并且发送的是一个经过序列化之后的字符串
xhr.open('POST', url);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(stringData); -
3.3 监控请求状态，处理请求数据
- xhr对象有且仅有一个事件onreadystatechange，注意所有字母都是小写的，javascript和Java一样都是区分大小写的。
- 每一次xhr对象的readyState状态值改变都会触发该事件，但是该方法不能为单独的一个xhr对象绑定多个事件处理逻辑，即onreadystatechange只能绑定一个事件处理的function，如果你想处理多件事情，那么只能在绑定的function中进行多事件处理的逻辑调用。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("unInfo").innerHTML = xhr.responseText;
}
}
}
4.重要属性
-
4.1 readyState属性，这个属性可能的取值如下：
- 0：未初始化，尚未调用open()方法
- 1：启动。已经调用open()方法，但尚未调用send()方法
- 2：发送：已经调用send()方法，但尚未收到响应
- 3：接收。已经接收到部分响应数据。
- 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
-
4.2 响应的数据会自动填充XHR对象的属性，包含以下属性
- responseText：作为响应主题被放回的文本
- responseXML：如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XMLDOM文档
- status：响应的HTTP状态
- statusText：HTTP状态的说明
5.一次完整的XHR请求
GET
function getXhr(){
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
}
var xhr = getXhr();
//GET请求
xhr.open('GET', '/user/checkLogin');
xhr.send(null);
xhr.onreadystatechange = function(res) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(JSON.parse(xhr.responseText))
}
}
}
POST
function getXhr(){
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
}
var xhr = getXhr();
var stringData = {
uname: '123',
password: '123',
code: ''
}
stringData = JSON.stringify(stringData);
//POST请求
xhr.open('POST', '/user/login');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(stringData)
xhr.onreadystatechange = function(res) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(JSON.parse(xhr.responseText))
}
}
}
参考文章：
- 【AJAX】XmlHttpRequest对象详解（API）
- XMLHttpRequest API 使用指南
- 《JavaScript高级程序设计》第21章