Ajax 概述
是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验
Ajax 应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
Ajax 运行流程
Ajax实现步骤
//1.创建Ajax对象
let xhr = new XMLHttpRequest();
//2.调用open方法(请求方式,请求地址)
xhr.open('get', 'http://localhost:3000/first');
//3.调用send方法,发送请求
xhr.send();
//4.注册load事件,获取服务端响应到客户端的数据
xhr.onload = function() {
console.log(xhr.responseText);
}
//另一种获取服务端响应到客户端数据的方法,onreadystatechange 事件 当 Ajax 状态码发生变化时将自动触发该事件
xhr.onreadystatechange = function() {
// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
// 1 已经对ajax对象进行配置 但是还没有发送请求
// 2 请求已经发送了
// 3 已经接收到服务器端的部分数据了
// 4 服务器端的响应数据已经接收完成
console.log(xhr.readyState);
// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
// 当网络中断时会触发onerrr事件
xhr.onerror = function () {
alert('网络中断, 无法发送Ajax请求')
}
get请求方式参数的传递
var xhr = new XMLHttpRequest();
var params = 'username=' + username.value + '&age=' + age.value;
xhr.open('get', 'http://localhost:3000/get?' + params);
xhr.send();
xhr.onload = function() {
console.log(xhr.responseText);
}
post请求方式参数的传递
var xhr = new XMLHttpRequest();
var params = 'username=' + username.value + '&age=' + age.value;
console.log(params);
xhr.open('post', 'http://localhost:3000/post');
//post方式必须要配置请求报文的类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//post方式发送请求时需要在send方法中传递参数
xhr.send(params);
xhr.onload = function() {
console.log(xhr.responseText);
}
JSON格式参数的传递
var xhr = new XMLHttpRequest();
var params = {
name: username.value,
a: age.value
}
console.log(params);
//get方式不能发送json格式的数据,传统的表单提交也不支持json格式的数据
xhr.open('post', 'http://localhost:3000/json');
//JSON格式参数必须要设置请求报文的类型为json
// 注意:get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。
xhr.setRequestHeader('Content-Type', 'application/json');
//send方式只接受字符串格式的参数
xhr.send(JSON.stringify(params));
xhr.onload = function() {
console.log(xhr.responseText);
}
低版本 IE 浏览器的缓存问题
问题:在低版本的 IE 浏览器中,Ajax 请求有严重的缓存问题,即在请求地址不发生变化的情况下,只有第一次请求会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了,客户端依然拿到的是缓存中的旧数据。
解决方案:在请求地址的后面加请求参数,保证每一次请求中的请求参数的值不相同。
xhr.open('get', 'http://www.example.com?t=' + Math.random());
同步异步异步概念
同步
同一时间只能做一件事情,只有一件事情做完,才能做另外一件事情。
落实到代码中,就是上一行代码执行完成后,才能执行下一行代码,即代码逐行执行。
异步
一件事情做了一半,转而去做其他事情,当其他事情做完以后,再回过头来继续做之前未完成的事情。
落实到代码上,就是异步代码虽然需要花费时间去执行,但程序不会等待异步代码执行完成后再继续执行后续代码,而是直接执行后续代码,当后续代码执行完成后再回头看异步代码是否返回结果,如果已有返回结果,再调用事先准备好的回调函数处理异步代码执行的结果。
封装ajax函数
解决多次请求代码冗余重复
function ajax(option) {
//1.定义一个默认对象
let defaultParam = {
type: 'get',
url: '',
data: {
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function() {
},
error: function() {
}
}
//2.用传递过来的参数对象覆盖默认对象
Object.assign(defaultParam, option);
//3.拼接请求参数
let paramArr = [];
for (let k in defaultParam.data) {
paramArr.push(k + '=' + defaultParam.data[k]);
}
let params = paramArr.join('&');
// console.log(params);
//4.判断请求方式,如果是get方式需要将请求参数拼接到请求地址中
if