(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)
}
}
}
此篇为视频学习过程中的笔记。若有不足和错误，欢迎批评指正！