Ajax创建过程:
1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3)设置响应HTTP请求状态变化的函数
4)发送HTTP请求
5)获取异步调用返回的数据
6)使用JavaScript和DOM实现局部刷新
//1.创建XMLHttpRequest对象
function createXHR() {
var xhr = null;
//考虑浏览器兼容
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
var xhr = createXHR();
//2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
//type为数据请求类型post/get;
//url为数据请求地址;
//async为数据请求方式true为同步,false为异步;
xhr.open(type, url, async);
//3.设置响应HTTP请求状态变化的函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//5.获取异步调用返回的数据
console.log(xhr.responseText);
//6.使用JavaScript和DOM实现局部刷新
...
}
}
//4.发送http请求
xhr.send(null);
xhr.readyState有5个状态值:
0-(未初始化)还没有调用send()方法;
1-(载入)已调用send()方法,正在发送请求;
2-(载入完成)send()方法执行完成,已经接收到全部相应内容;
3-(交互)正在解析响应内容;
4-(完成)响应内容解析完成,可以在客户端调用。
xhr.status有4个状态值:
2xx - 表示成功处理请求。如200;
3xx - 需要重定向,浏览器直接跳转;
4xx - 客户端请求错误,如404;
5xx - 服务端错误。