尽可能讲清楚ajax
前言
今天我们来讲讲什么是ajax。众所周知我们在使用一个app的时候都是通过前端操作的（比如填写姓名，身份证号码，登录等）。其实我们在进行任何操作的时候，前端都会向后端发送一个请求，后端接收到请求后会向前端送回响应。在这个过程中我们就需要ajax。
同步和异步
在讲ajax之前我们要了解一个很重要的概念。什么是同步和异步
简单来说：
同步：前端发送请求后端还没有响应，这时再操作不会发送请求（上一件事没有做完下一件事就不会开始，事情一件一件做）
异步：前端发送请求后端还没有响应，依然可以执行其他操作。
什么是ajax
Ajax，全称为Asynchronous JavaScript and XML（异步JavaScript与XML），是一种网页开发技术，它能够让网页无须刷新就能与服务器交换数据并更新部分内容。这意味着用户可以享受到更快、更流畅的网页体验，因为只有需要更新的数据会被请求和交换，而不是重新加载整个页面
ajax的工作流程
1.创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();//创建一个ajax实例2. 配置请求
需要配置发送方式（可用get或post），url，是否异步
xhr.open('get', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true);//配置请求参数3.发送请求
xhr.send();//发送请求4.设置回调函数
xhr.onreadystatechange = () => {//监听请求的过程
// console.log(xhr.readyState);//请求的状态
if (xhr.readyState == 4 || xhr.status == 200) {}//拿到了后端数据onreadystatechange = ()可以监听请求状态，当xhr.readyState == 4 || xhr.status == 200的时候表示成功了，不同的状态码代表不同的状态如：
1xx 响应中——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它
2xx 成功——表示请求已经被成功接收，处理已完成
3xx 重定向——重定向到其它地方：它让客户端再发起一个请求以完成整个处理。
4xx 客户端错误——处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等
5xx 服务器端错误——处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等
200 OK 客户端请求成功，即处理成功，这是我们最想看到的状态码
302 Found 指示所请求的资源已移动到由Location响应头给定的 URL，浏览器会自动重新访问到这个页面
304 Not Modified 告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向
400 Bad Request 客户端请求有语法错误，不能被服务器所理解
403 Forbidden 服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源
404 Not Found 请求资源不存在，一般是URL输入有误，或者网站资源被删除了
428 Precondition Required 服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头
429 Too Many Requests 太多请求，可以限制客户端请求某个资源的数量，配合 Retry-After(多长时间后可以请求)响应头一起使用
431 Request Header Fields Too Large 请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。
405 Method Not Allowed 请求方式有误，比如应该用GET请求方式的资源，用了POST
500 Internal Server Error 服务器发生不可预期的错误。服务器出异常了，赶紧看日志去吧
503 Service Unavailable 服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好
511 Network Authentication Required 客户端需要进行身份验证才能获得网络访问权限
ajax的三种实现方法
1.原生的XMLHttpRequest
我们以获取一个电影列表为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">获取电影列表</button>
<ul id="list">
</ul>
<script>
let btn = document.getElementById('btn');
let ul = document.getElementById('list');
btn.addEventListener('click', () => {
//朝一个接口发请求，获取到数据展示在页面上
let xhr = new XMLHttpRequest();//创建一个ajax实例
xhr.open('get', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true);//配置请求参数
//配置发送的参数（请求方式，请求的接口,是否开始异步）
xhr.send();//发送请求
xhr.onreadystatechange = () => {//监听请求的过程
// console.log(xhr.readyState);//请求的状态
if (xhr.readyState == 4 || xhr.status == 200) {//拿到了后端数据
// console.log(xhr.responseText);//拿到了后端数据
// console.log(JSON.parse(xhr.responseText));//解析后端数据
//展示在页面上
const movieList = JSON.parse(xhr.responseText).movieList;//拿到后端数据
for (let i = 0; i < movieList.length; i++) {
const li = document.createElement('li');
li.innerText = movieList[i].nm + '--' + movieList[i].star;
ul.appendChild(li);//把li元素添加到ul中 添加一个字节点
}
}
}
})
</script>
</body>
</html>在收到响应后const movieList = JSON.parse(xhr.responseText).movieList;将json字符串转换为对象并取出movieList数组，然后遍历movieList数组。const li = document.createElement('li');为电影创建新的li 元素，li.innerText = movieList[i].nm + '--' + movieList[i].star;设置了格式。ul.appendChild(li);把li元素添加到ul中。
效果展示
2.jQuery
第一步要在头部导入jquery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button id="btn">获取电影列表</button>
<ul id="list">
</ul>
<script>
let btn=document.getElementById('btn');
let ul=document.getElementById('list');
btn.addEventListener('click',()=>{
$.ajax({
url:"https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get",
method:"get",
data:{
username:'xx',
age:18
},
success:(res)=>{
console.log(res);
}
})
})
</script>
</body>
</html>$.ajax({})发起一个ajax请求
url:目标地址
method：请求方式
data:{} 发送到服务器的额外数据
success:(res)=>{ console.log(res); }：成功获取到服务器响应时执行的函数
看的出来这种方法代码量更少更简洁
3.fetch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button id="btn">fetch获取电影列表</button>
<ul id="list">
</ul>
<script>
let btn = document.getElementById('btn');
let ul = document.getElementById('list');
btn.addEventListener('click', () => {
fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='wlj'&age='18'")
.then((res) => {
// console.log(res);//响应体
return res.json();
}).then((data) => {
const movieList = JSON.parse(xhr.responseText).movieList;//拿到后端数据
for (let i = 0; i < movieList.length; i++) {
const li = document.createElement('li');
li.innerText = movieList[i].nm + '--' + movieList[i].star;
ul.appendChild(li);//把li添加到ul中 添加一个字节点
}
})
})
</script>
</body>
</html>fetch("mock.mengxuegu.com/mock/65a915… 使用fetch发送get请求到指定url并携带参数。
.then()就是个同步，上一步完成后返回res.json();res是响应对象
.then((data) => {//处理解析后的json数据
后面就是一样的提取列表，循环遍历，设置格式，将li元素添加到ul元素中
总结
好好学习，天天向上
腾讯云开发者
