在之前的开发中,一直使用Jquery的$.ajax完成异步请求的任务,一直对底层没有深入的了解,今天看到mdn上面一篇文章介绍浏览器原生AJAX请求的知识,这里稍微整理一下自己学的内容.@H_502_2@
mdn原文地址是:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started@H_502_2@
1.什么是AJAX?
AJAX的全称是Asynchronous Javascript and XML
,中文对应名称异步JavaScript和XML
,它主要通过是XMLHttpRequest
对象来和服务器端完成数据的通信. @H_502_2@
它可以接收多种信息格式,其中包括json,xml,html甚至是文本文件,AJAX最令人称赞的特性就是它的异步性,它可以在不刷新页面的情况下,更新页面部分的内容(一般都是用户触发的事件).@H_502_2@
总而言之,AJAX的特点可以概括为以下两类:
1. 在不重新刷新页面的条件下,向服务器发送请求;
2. 可以从服务器获取数据;@H_502_2@
2. 一个简单的例子
2.1 创建AJAX请求的对象
AJAX请求对象主要是通过XMLHttpRequest
对象来完成;@H_502_2@
var httpRequest;
if(window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {//为了兼容老的IE浏览器
httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
2.2 设置如何处理AJAX的Response数据
说明: 设置XMLHttpRequest对象的onreadystatechange
来设置一旦接受AJAX的Response后的处理操作.@H_502_2@
httpRequest.onreadystatechange = function() {
//这里需要判断当前的AJAX请求的Response可以处理了,通过readyState判断
if(httpRequest.readyState == XMLHttpRequest.DONE) {
if(httpRequest.status === 200) {
alert(httpRequest.responseText);
//perfect.
} else {
//状态码不是200,表明发生了错误
//TODO:
}
}else {
//表示当前的请求的response还没有接收完成
}
};
2.3 是时候发送请求了…
上面两个步骤,定义好请求对象,已经请求接收到response后的处理方式,接下来就是发送请求了,@H_502_2@
httpRequest.open('GET','http://localhost:3000/rest',true);
//httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
httpRequest.send(null);
解释:
1. open方法: 它接收三个参数,第一个是http 请求的方法,可以是”GET”,”POST”,“DELETE”等其他HTTP协议中定义的方法,这里要注意,这个参数必须大写,不能写成”get”; 第二个参数用来设置请求的资源路径,第三个参数用来表示当前请求是“异步”还是“同步”,默认是异步(true
);
2. setRequestHeader方法: 这个方法用来设置请求的报头,在发送POST
的表单请求时,需要设置Content-Type
; 3. send方法: 这个方法发送请求,它接收一个参数,这个参数就是请求body里面的内容.@H_502_2@