Ajax及其应用

孽之极 · 发表于 2023-3-20 23:15:07

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()未被调用则不会触发此事件。onprogressxhr.upload.onprogress 在上传阶段（即 xhr.send()之后，xhr.readyState=2 之前）触发，每 50ms 触发一次；xhr.onprogress 在下载阶段（即 xhr.readyState=3 时）触发，每 50ms 触发一次onload当请求完成时触发，此时 xhr.readyState=4onloadend当请求结束（包括请求成功和请求失败）时触发onabort当调用 xhr.abort()后触发ontimeoutxhr.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>
</body>
</html>

复制代码

来源:https://www.cnblogs.com/guo-jiaojiao/p/17238251.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！