Ajax及其应用
Ajax 工作原理
- Ajax
Ajax 是前后端异步交互的工具，异步更新，ajax 包含 XMLHttpRequests 对象（异步地与服务器交换数据，AJAX 核心）
JavaScript/DOM（信息显示/交互）
CSS（给数据定义样式）
XML 或 JSON（作为转换数据的格式）
- 工作原理
具体操作流程
- 首先通过 PHP 页面将数据库中的数据取出
- 取出后转成 json 格式的字符串，后利用 ajax 把字符串返还给前端
- 再利用 json.parse 解析通过循环添加到页面上
- 反之，前端的数据可以利用 ajax 提交到后台
- 但后台没有办法直接将这些数据插入到数据库中，所以要先提交到 PHP 页面上
- 最后再由 PHP 将数据插入到数据库中
- 实现 Ajax 基本步骤
- 创建 XMLHttpRequest 对象,即创建一个异步调用对象.
const xhr=new XMLHttpRequest();
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.
xhr.open(method,url,flag,name,password)
- 设置响应 HTTP 请求状态变化的函数.
xhr.onreadystatechange=function(){//设置响应http请求状态变化的事件
console.log("请求过程",xhr.readyState);
if(xhr.readyState==4){//判断异步调用是否成功，若成功开始局部更新数据
console.log("状态码为：",xhr.status);
if(xhr.status==200){
console.log("异步调用返回的数据为：",xhr.responseText);
}else{//若果异步调用未成功，弹出警告框，并显示错误代码
alert("erro:HTTP状态码为：",xhr.status);
}
}
}
- 发送 HTTP 请求.
xhr.send()
- 获取异步调用返回的数据.
- 使用 JavaScript 和 DOM 实现局部刷新.
XMLHttpRequests 对象
无刷新更新页面
- 属性
| 属性名称 | 说明 |
|---|---|
| onreadystatechange | 设置回调函数，(作为 readyStates 属性值改变时的事件处理程序)用于指定状态改变时所触发的事件处理器 |
| readyState | 用于获取请求状态的属性：0-未初始化；1-正在加载（已初始化）；2-已加载（请求发送完成）；3-交互中（开始读取响应）；4-完成（读取响应结束） |
| status | 用于描述当前请求的 HTTP 状态码的属性。（仅当 readyState 的值为 3 或 4 时，status 属性才可用）常用值举例：200——正确返回；404——找不到访问对象 |
| statusText | 用于描述 HTTP 状态的代码文本。（仅当 readyState 的值为 3 或 4 时，statusText 属性才可用） |
| responseText | 以文本形式获取响应值。当 readyState 值为 0,1,2 时，responseText 为空字符串；当 readyState 值为 3 时，responseText 为还未完成的响应信息；当 readyState 值为 4 时，responseText 为响应信息。 |
| responseXML | 以 XML 形式获取响应值，并且解析为 DOM 对象返回。用于当接收到完整的 HTTP 响应时（readyState 值为 4 时）描述 XML 响应，若 readyState 的值不为 4.它取值为 null |
- 方法
| 方法 | 具体功能 |
|---|---|
| open("method","URL",["asyncFlag"],["userName"],["password"]) | 建立对服务器的调用。参数可以是 GET、POST、PUT 或 DELET[^1]:rest 动词规范：GET（查询）：获取资源；POST（创建）：创建资源；PUT（修改）：更新资源；DELET（删除）：删除资源。URL 参数是相对 URL 或绝对 URL。剩余三个参数（可选择）分别是：是否异步（默认异步，true），用户名，密码 |
| send(content) | 向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止 |
| abort() | 停止当前请求 |
| setRequestsHeader("header","value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()。设置 header 并和请求一起发送（'POST'方法一定要） |
| getAllResponseHeaders() | 以字符串形式返回完整的 HTTP 头部信息 |
| getRequestHeader("header") | 以字符串的形式返回指定的 HTTP 头部信息 |
- 事件
| 事件 | 触发条件 |
|---|---|
| onreadystatechange | 当 xhr.readyState 改变时触发；但 xhr.readyState 由非 0 值变为 0 时不触发。 |
| onloadstart | 调用 xhr.send()方法后立即触发，若 xhr.send()未被调用则不会触发此事件。 |
| onprogress | xhr.upload.onprogress 在上传阶段（即 xhr.send()之后，xhr.readyState=2 之前）触发，每 50ms 触发一次；xhr.onprogress 在下载阶段（即 xhr.readyState=3 时）触发，每 50ms 触发一次 |
| onload | 当请求完成时触发，此时 xhr.readyState=4 |
| onloadend | 当请求结束（包括请求成功和请求失败）时触发 |
| onabort | 当调用 xhr.abort()后触发 |
| ontimeout | xhr.timeout 不等于 0，由请求开始即 onloadstart 开始算起，当达到 xhr.timeout 所设置时间请求还未结束即 onloadend，则触发此事件 |
| onerror | 在请求过程中，若发生 Network error 则会触发此事件（若发生 Network error 时，上传还没有结束，则会先触发 xhr.upload.onerror，再触发 xhr.onerror ；若发生 Network error 时，上传已经结束，则只会触发 xhr.onerror ）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的 xhr.statusCode 是 4xx 时，并不属于 Network error ，所以不会触发 onerror 事件，而是会触发 onload 事件。 |
请求正常时，事件触发顺序
- 触发 xhr.onreadystatechange (之后每次 readyState 变化时，都会触发一次)
- 触发 xhr.onloadstart //上传阶段开始：
- 触发 xhr.upload.onloadstart
- 触发 xhr.upload.onprogress
- 触发 xhr.upload.onload
- 触发 xhr.upload.onloadend //上传结束，下载阶段开始：
- 触发 xhr.onprogress
- 触发 xhr.onload
- 触发 xhr.onloadend
发生 abort / timeout / error 时事件触发顺序
- 触发 xhr.onreadystatechange 事件，此时 readystate 为 4
- 如果上传阶段还没有结束，则依次触发以下事件：
- xhr.upload.onprogress
- xhr.upload.[onabort 或 ontimeout 或 onerror]
- xhr.upload.onloadend
- 触发 xhr.onprogress 事件
- 触发 xhr.[onabort 或 ontimeout 或 onerror] 事件
- 触发 xhr.onloadend 事件
用法
（以 JSONPlaceHolder 为数据服务）
这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求，
获取了 JSONPlaceholder 的用户信息数据，并将其解析为 JavaScript 对象，
然后生成了一个简单的用户列表，用于展示用户的姓名、邮箱和网站地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax 示例</title>
</head>
<body>
<ul id="users"></ul>
<script>
/*这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求，
获取了 JSONPlaceholder 的用户信息数据，并将其解析为 JavaScript 对象，
然后生成了一个简单的用户列表，用于展示用户的姓名、邮箱和网站地址。*/
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.onload = function () {
if (xhr.status === 200) {
const users = JSON.parse(xhr.responseText);
const listItems = users
.map(
(user) =>
`<li><strong>${user.name}</strong> (${user.email}) - ${user.website}</li>`
)
.join("");
document.getElementById("users").innerHTML = listItems;
} else {
console.error(xhr.statusText);
}
};
xhr.onerror = function () {
console.error("发生了错误");
};
xhr.send();
</script>
</body>
</html>