FavoriteLoading
0

使用XMLHttpRequest对象完成原生的AJAX请求

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))
}
}
}