一、什么是ajax
ajax是一种异步通信技术。在ajax出现之前,客户端与服务端之间直接通信。引入ajax之后,客户端与服务端加了一个第三者--ajax。有了ajax之后,通过在后台与服务器进行少量数据交换,可以达到在不刷新整个页面的情况下实现局部刷新。
二、XHR对象
ajax技术的核心是XMLHttpRequest对象(简称XHR)。IE7+、FireFox、Opera、Chrome和Safari都支持原生的XHR对象,创建XHR对象可以这样写
varxhr =newXMLHttpRequest();
那如果要兼容IE6、7又该怎么写
varxhr =newActiveXObject("MSXML2,XMLHTTP");
因此兼容写法如下
var xhr = '';
window.ActiveXObject ? xhr = new ActiveXObject('MSXML2,XMLHTTP') : xhr = new XMLHttpRequest();
三、XHR用法
创建完XHR对象后,要调用open()方法创建请求,open()方法接受三个参数:
1.要发送的请求的类型(如"get"、"post"等)
2.请求的URL
3.表示是否异步发送请求的布尔值(默认为true,表示异步)
xhr.open("get","index.php",true);
post()请求方法如下面代码
xhr.open("get","index.php",true);//post()方法必须在send()方法之前加上下面这段代码xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
说明一点:URL相对于执行代码的当前页面,也可以用绝对路径
准备工作做好后,调用send()方法发送请求,
xhr.send(null);
这里get方法传输的数据已经放到url中,可以将参数设置为null
在调用send()方法后,请求就会被分派到服务器,onreadychange捕获请求的状态码,并进行检测
onreadychange对象有个readyState属性,该属性的值表示当前的活动阶段,其值有如下几个:
0:未初始化。尚未调用open()方法
1:启动。已经调用open()方法,但尚未调用send()方法
2:发送。已经调用send()方法,但尚未接收到响应
3:接收。已经接受到部分响应数据
4:完成。已经接受到全部响应数据,并且可以在客户端使用
我们只需判断readyState的值是否为4就可以知道所有数据已经就绪。
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
//判断状态码是否成功
if (xhr.status>=200&&xhr.status<=207||xhr.status==304) {
//调用ajax的responseText属性返回数据
alert(xhr.responseText);
}else{
alert(xhr.status);
}
}
四、总结
原生ajax的请求总结为一下六个步骤
1.创建XHR对象
2.调用open()方法创建请求
3.调用send()方法发送请求
4.onreadychange捕获请求的状态码
5.判断状态吗是否成功
6.调用ajax的responseText属性返回数据