Ajax
异步无刷新技术
实现流程:
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
3、发送请求
send(参数/null);
注:如果是get请求,参数直接跟在请求路径后面,send()方法中设置null;
如果是post请求,有参数则设置参数,无参数设置为null;
4、解析响应数据
1)、判断响应是否成功 status=200 (404=未找到资源;500=服务器异常;200=成功)
2)、得到后台响应数据 responseText
同步:
// 1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求
// 3、发送请求 send(参数/null);
xhr.send(null);
// 4、解析响应数据
if (xhr.status == 200) { // 1、判断响应是否成功 status=200
// 2、得到后台响应数据 responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else {
alert("失败状态码:" + xhr.status + ",失败原因:" + xhr.statusText);
}
异步:
// 1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("GET","js/data.json?uname=zhangsan&uage=10",true); // 异步请求
// 3、发送请求 send(参数/null);
xhr.send(null);
// 监听readystate事件 (0=尚未调用open方法;1=已调用open方法未调用send方法,2=调用send方法,未接收到响应;3=接收到部分响应;4=响应完全接收)
xhr.onreadystatechange = function() {
// 如果是异步请求,需要等待数据完全响应后再做处理
if (xhr.readyState == 4) {
// 4、解析响应数据
if (xhr.status == 200) { // 1、判断响应是否成功 status=200
// 2、得到后台响应数据 responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else {
console.log("失败状态码:" + xhr.status + ",失败原因:" + xhr.statusText);
}
}
}