原生Ajax请求实现步骤
一、Ajax简介
Ajax是Asynchronous JavaScript and XML的缩写,异步的JavaScript和XML。它可以实现客户端的异步请求操作,在不重新加载页面的情况下与服务器进行通信,实现部分页面的更新,从而减少用户等待时间。
二、核心对象XMLHTTPRequest
-
异步与同步
异步即一次可以执行多个请求,而同步一次只能执行一个请求。异步与同步最本质的区别是同步需要等待,异步不需要。 -
readystatues属性(0,1,2,3,4)
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求完成 -
statues属性(200,404)
网络通信的状态。200:通信成功,请求成功。404:资源没找到。 -
异步请求实现步骤
- 创建XMLHTTPRequest
var xmlHttp = new XMLHTTPRequest();
- 绑定事件
xmlHttp.onreadystatechange(function(){
//获取服务器端返回的数据,更新dom
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText; //responseText为服务器返回的数据
//alert(data);
document.getElementById("id").innerText = data;
}
})
- 初始化请求参数
xmlHttp.open(method,url,async);
//参数method为请求方式,取值为post/get
//参数url为请求地址
//参数async设定是否为异步请求,async默认为true
- 发送请求
xmlHttp.send(); //发送请求