Ajax及其应用

Ajax 工作原理

  1. Ajax

Ajax 是前后端异步交互的工具,异步更新,ajax 包含 XMLHttpRequests 对象(异步地与服务器交换数据,AJAX 核心)
JavaScript/DOM(信息显示/交互)
CSS(给数据定义样式)
XML 或 JSON(作为转换数据的格式)

  1. 工作原理
    具体操作流程
  • 首先通过 PHP 页面将数据库中的数据取出
  • 取出后转成 json 格式的字符串,后利用 ajax 把字符串返还给前端
  • 再利用 json.parse 解析通过循环添加到页面上
  • 反之,前端的数据可以利用 ajax 提交到后台
  • 但后台没有办法直接将这些数据插入到数据库中,所以要先提交到 PHP 页面上
  • 最后再由 PHP 将数据插入到数据库中
  1. 实现 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 对象

无刷新更新页面

  1. 属性
属性名称 说明
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
  1. 方法
方法 具体功能
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 头部信息
  1. 事件
事件 触发条件
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 事件。

请求正常时,事件触发顺序

  1. 触发 xhr.onreadystatechange (之后每次 readyState 变化时,都会触发一次)
  2. 触发 xhr.onloadstart //上传阶段开始:
  3. 触发 xhr.upload.onloadstart
  4. 触发 xhr.upload.onprogress
  5. 触发 xhr.upload.onload
  6. 触发 xhr.upload.onloadend //上传结束,下载阶段开始:
  7. 触发 xhr.onprogress
  8. 触发 xhr.onload
  9. 触发 xhr.onloadend

发生 abort / timeout / error 时事件触发顺序

  1. 触发 xhr.onreadystatechange 事件,此时 readystate 为 4
  2. 如果上传阶段还没有结束,则依次触发以下事件:
  • xhr.upload.onprogress
  • xhr.upload.[onabort 或 ontimeout 或 onerror]
  • xhr.upload.onloadend
  1. 触发 xhr.onprogress 事件
  2. 触发 xhr.[onabort 或 ontimeout 或 onerror] 事件
  3. 触发 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>


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