(What)什么是Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
指的是通过JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。
简单理解:
- 不刷新页面的情况下,向服务端发送请求,和服务端进行交互,从而更改页面中的数据或者状态。
- 允许浏览器与服务器通信而无需刷新页面的技术称作Ajax。
(Why)为什么要用Ajax
提高用户浏览网站的体验
Ajax的应用场景:
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
(How)怎么使用Ajax
【Ajax技术需要运行在网站环境中才有效,例:使用Node创建的服务器作为网站服务器】
Ajax的实现步骤
1. 创建Ajax对象
let xhr = new XMLHttpRequest();
2. 告诉Ajax请求地址以及请求方式
const SERVER_URL = "/server";
// 创建Http请求
xhr.open("GET", SERVER_URL, true);
xmlhttp.open(method,url,async);
- method:请求的类型,GET或POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
请求方式
GET
// 获取按钮元素
var btn = document.getElementById('btn');
// 获取姓名文本框
var username = document.getElementById('username');
// 获取年龄文本框
var age = document.getElementById('age');
btn.onclick = function(){
// 创建ajax对象
var xhr = XMLHttpRequest();
// 获取用户在文本框输入的值
var nameValue = username.value;
var ageValue = age.value;
// 拼接请求参数
var params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax对象
xhr.open('get','/server?'+params);
// 发送请求
xhr.send;
xhr.onload = function(){
// 获取服务器端响应的数据
console.log(xhr.responseText)
}
}
POST
// 配置ajax对象
xhr.open('post', '/server');
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
当pos请求方式传递的请求参数格式为json类型时
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-type','application/json');
// 发送请求
xhr.send(JSON.stringify({name:'kk',age:20}));
3. 发送请求
// 发送 Http 请求
xhr.send(null);
4. 获取服务器端给与客户端响应数据
onload事件 | onreadystatechange事件 |
---|---|
不兼容IE低版本 | 兼容IE低版本 |
不需要判断Ajax状态码 | 需要判断Ajax状态码 |
被调用一次 | 被调用多次 |
onreadystatechange事件
当Ajax状态码发生变化时自动触发该事件
//获取ajax状态码
xhr.onreadystatechange
Ajax状态码
在创建ajax对象,配置ajax对象,发生请求,以及接受完服务器响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态码。
状态码 | 步骤 |
---|---|
0 | 请求初始化(未调用open()) |
1 | 请求已建立,但是还没有发送(未调用send()) |
2 | 请求已经发送 |
3 | 请求正在处理中(通常响应中已经有部分数据可用) |
4 | 响应已完成,可以获取并使用服务器的响应 |
Ajax错误处理
- 网络畅通,服务器端能接收到请求,服务器端的返回结果不是预期结果。
可以判断服务器端返回的状态码,分别进行处理。xhr.status获取http状态码。 - 网络畅通,服务器端没有接收请求,返回404状态码。
检查请求地址是否错误 - 网络畅通,服务器能就收到请求,服务端返回500状态码。
服务器端错误,找后端程序员进行沟通 - 网络中断,请求无法发送到服务器端。
会触发xhr对象下面的onerror事件,在onerror事件处理函数对错误进行处理
Ajax函数封装
function ajax(options) {
// 存储的是默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options)
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var parmas = '';
// 循环用户传递进来的对象格式参数
for (var attr in defaults.data) {
// 将参数转换为字符串格式
parmas += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&接去掉
parmas = parmas.substr(0, parmas.length - 1)
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 如果请求方式是post
if (defaults.type == 'post') {
// 请求参数的类型
var contentType = defaults.header['Content-Type']
xhr.setRequestHeader('Content-Type', contentType);
// 如果参数类型为json
if (contentType == 'application/json') {
// 转化成字符串
xhr.send(Json.stringify(defaults.data))
} else {
xhr.send(params);
}
} else {
// 发送请求
xhr.send();
}
// xhr对象接收完响应数据后触发
xhr.onload = function () {
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText
// 如果响应类型中包含application/json
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候
if (xhr.status == 200) {
//请求成功,调用处理成功情况的函数
options.success(responseText);
} else {
//请求失败,调用处理失败情况的函数
options.error(responseText)
}
}
}
此篇为视频学习过程中的笔记。若有不足和错误,欢迎批评指正!