AJAX是前后端交互的重要工具
结合前后端交互基础理解：前后端交互详解(建议收藏)-CSDN博客
1. AJAX
- 到底什么是Ajax?
- ajax 全名 async javascript and XML(异步JavaScript和XML)，是一种用于向服务器异步发送 HTTP 请求并接收响应的技术。
XML 指可扩展标记语言（eX tensible M arkup Language）。
XML 被设计用来传输和存储数据，不用于表现和展示数据，HTML 则用来表现数据。
- 是前后台交互的能力也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
- 是⼀个默认异步执行机制的功能，AJAX分为同步（async = false）和异步（async = true）
- 什么是同步请求？(false)
定义：发送一个请求后，必须等待该请求的响应返回，才能继续发送下一个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。
优点：
简单直观
结果即时可见
缺点：
在网络延迟或处理时间长时效率低下
占用较多系统资源
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
- 什么是异步请求？(默认:true)
定义：发送请求后，无需等待响应即可继续执行其他任务。响应通过回调函数、事件监听等方式处理。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。
说明：异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始。
优点：
支持高效并发处理
提高资源利用率
提升用户体验，减少等待时间
缺点：
实现相对复杂
错误处理较为困难
增加开发和维护成本
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
- 选择策略
在决定使用同步还是异步交互时，应考虑以下因素：
性能需求：如果系统需要处理大量并发请求，异步交互是更好的选择。 用户体验：为了提升应用的响应速度和流畅度，减少用户等待时间，异步交互是优选。
开发成本：如果项目时间紧迫或开发资源有限，同步交互可能更合适，因为它实现简单。
业务逻辑：根据具体业务场景和需求，灵活选择最适合的交互方式。
2. AJAX 的优势
不需要插件的支持，原生 js 就可以使用
用户体验好（不需要刷新页面就可以更新数据）
减轻服务端和带宽的负担
缺点：搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
3. AJAX 的操作流程
具体操作流程：
- 首先通过PHP页面将数据库中的数据取出
- 取出后转成json格式的字符串，后利用ajax把字符串返还给前台
- 再利用json.parse解析通过循环添加到页面上
- 那么反之，前端的数据可以利用ajax提交到后台
- 但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
- 最后再由PHP将数据插入到数据库中
4. AJAX 的使用
- 在 js 中有内置的构造函数来创建 ajax 对象
- 创建 ajax 对象以后，我们就使⽤ ajax 对象的方法去发送请求和接受响应
- Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
事件，对象，属性，方法
事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
事件可以由用户操作触发，例如：鼠标事件、键盘事件等等；也可以通过 JS 脚本代码来触发，例如：通过element.click()方法，触发对应元素的点击事件；还可以由API生成，例如：动画完成后触发对应事件、视频播放被暂停时触发对应事件；最后还可以通过自定义事件来进行触发。这四种方式都会创建并传递event对象。
除了我们自己绑定的事件处理函数之外，浏览器会对某些元素的某些事件存在默认处理，例如： a 标签的click点击事件，默认处理为跳转到链接的地址。当然我们也可以通过event对象的preventDefault() 方法来阻止浏览器的默认处理。
我们还需要注意元素的嵌套关系，因为由于元素结构上的重叠，事件会随着嵌套关系依次传递，也就是事件冒泡和事件捕获。
Event对象示例和常用属性见可参考文章：JS 之 事件Event对象详解（属性、方法、自定义事件）_js event-CSDN博客
三个事件的触发时机
mousedown当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mouseup
当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
click
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click 事件。
注意：触发click事件的条件是按下并松开鼠标左键！，按下并松开鼠标右键并不会触发click事件。
三个事件的触发顺序
若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件
若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件
XMLHttpRequest 对象方法描述
1.创建⼀个 ajax 对象
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
上面就有了⼀个 ajax 对象
我们就可以使⽤这个 xhr 对象来发送 ajax 请求了
2.配置链接信息
XMLHttpRequest 对象属性描述(用于和服务器交换数据。)
//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest()
// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', './data.php')
上面的代码执行完毕以后，本次请求的基本配置信息就写完了
3.发送请求
//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()
上面代码是把配置好信息的 ajax 对象发送到服务端
一个最基本的 ajax 请求就是上面三步 但是光有上面的三个步骤，我们确实能把请求发送到服务端
如果服务端正常的话，响应也能回到客户端，但是我们拿不到响应
如果想要拿到响应，我们需要有两个前提条件
本次 HTTP 请求是成功的，也就是我们下面要说的 http 状态码为 200 ~ 299
ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段
5.AJAX 状态码
-
ajax 状态码 - xhr.readyState
-
是用来表示一个 ajax 请求的全部过程中的某一个状态
readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 : 表示 send 方法已经执行完成
readyState === 3 : 表示正在解析响应内容
readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了 -
这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据
-
所以，配合 http 状态码为 200 ~ 299
一个 ajax 对象中有一个成员叫做 xhr.status
这个成员就是记录本次请求的 http 状态码的 -
两个条件都满足的时候，才是本次请求正常完成
readyStateChange
在 ajax 对象中有一个事件，叫做 readyStateChange 事件
这个事件是专门用来监听 ajax 对象的 readyState 值改变的的行为
也就是说只要 readyState 的值发生变化了，那么就会触发该事件。
所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了
const xhr = new XMLHttpRequest() xhr.open('get', './data.php')
xhr.send()
xhr.onreadyStateChange = function () {
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4
// 并且 http 的状态码是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
// 这里表示验证通过
// 我们就可以获取服务端给我们响应的内容了 }
}
使用 ajax 发送请求时携带参数
- 我们使用 ajax 发送请求也是可以携带参数的
- 参数就是和后台交互的时候给他的一些信息
- 但是携带参数 get 和 post两个方式还是有区别的
GET 还是 POST？
- 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
- 然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
发送一个带有参数的 get 请求
-
get 请求的参数就直接在 url 后面进行拼接就可以
const xhr = new XMLHttpRequest()
// 直接在地址后面加一个 ?，然后以 key=value 的形式传递 // 两个数据之间以 & 分割
xhr.open('get', './data.php ? a=100 & b=200')
xhr.send()
这样服务端就能接受到两个参数 一个是 a，值是 100，一个是 b，值是 200
发送一个带有参数的 post 请求
post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接
const xhr = new XMLHttpRequest() xhr.open('post', './data.php')
// 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content- type
// 告诉一下服务端我给你的是一个什么样子的数据格式 xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded')
// 请求体直接再 send 的时候写在 () 里面就行
// 不需要问号，直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')
// 1. 创建 ajax 对象
let xhr = new XMLHttpRequest()
// 2. 配置请求信息 xhr.open('GET', './test.php', true)
// 3. 发送请求 xhr.send()
// 4. 接受响应 xhr.onload = function () {
console.log(xhr.responseText) }
6.AJAX封装
<!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>
/*
type 代表 请求方式
url 代表 请求url路径
data 代表 发送数据
success 代表 下载数据成功以后执行的函数
error 代表 下载数据失败以后执行的函数
*/
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
//设置提交数据格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error：" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
/*
当我们下载完数据以后需要对数据的处理方式不一样
【注】$ajax，我们需要按照传参的顺序，依次传入我们的参数。
*/
aBtns[0].onclick = function(){
$ajax({
url: "code14/1.get.php",
data: {
username: "小明",
age: 18,
password: "123abc"
},
success: function(result){
alert("GET请求到的数据：" + result);
},
error: function(msg){
alert("GET请求数据错误：" + msg);
}
})
}
aBtns[1].onclick = function(){
$ajax({
type: "post",
url: "code14/2.post.php",
data: {
username: "小花",
age: 18,
password: "123abc"
},
success: function(result){
alert("POST请求到的数据：" + result);
},
error: function(msg){
alert("POST请求数据错误：" + msg);
}
})
}
}
</script>
</head>
<body>
<button>GET请求</button>
<button>POST请求</button>
</body>
</html>
参考文章：看这一篇就够了！-Ajax详解_ajax解析-CSDN博客