Ajax的核心对象是:XMLHttpRequest对象。
创建XMLHttpRequest对象:
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
XMLHttpRequest对象的:
1.属性:readyState status
2.方法:open()——与服务器端建立连接
send()——向服务器发送请求
3.事件:onreadystatechange事件——监听服务器端的通信状态改变
实现Ajax的异步交互步骤:
1.创建XMLHttpRequest核心对象
2.与服务器端建立连接——使用XMLHttpRequest对象的open(method,url,async)方法
method:设置当前请求的类型(post或者get方法)
URL:设置当前请求的地址
async:设置是否异步(布尔类型)默认为true,表示异步
3.向服务器端发送请求——使用XMLHttpRequest对象的send(请求参数)方法
请求参数的格式为key=value
如果请求类型为get方式的话,send()方法是不能向服务器端发送请求的数据的。
注:send()方法是不能被省略的。get请求类型——send(null)
4.接收服务器端的相应数据——使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
——使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0--4)
0:尚未初始化
1:正在接收
2:接收完成
3:正在响应
4:响应完成
——使用XMLHttpRequest对象的status属性,判断服务器端的状态码
——使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
console.log(data);
}
}
}