Ajax及其应用

2023-03-20 22:36 由饺子jo 发表于 #前端开发

Ajax 工作原理
XMLHttpRequests 对象
用法

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>

热门相关：首席的独宠新娘寂静王冠霸皇纪豪门闪婚：帝少的神秘冷妻天启预报