Ajax应用

最新推荐文章于 2024-08-08 17:09:09 发布

尤德夸

最新推荐文章于 2024-08-08 17:09:09 发布

阅读量232

点赞数 3

文章标签： ajax javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_57782274/article/details/129674075

版权

本文介绍了Ajax的基本概念，包括它是如何实现局部刷新以提升用户体验的。详细阐述了Ajax的工作原理，包括创建XMLHttpRequest对象、初始化请求、发送请求和处理服务端返回结果的步骤。此外，文章还展示了原生AjaxGET请求的代码示例，并封装了一个Ajax函数用于向JSONPlaceHolder获取数据。最后，通过HTML和JavaScript实现了按钮点击获取和展示数据的功能。

摘要由CSDN通过智能技术生成

Ajax简介：Ajax是前端向服务端请求数据的工具。它可以避免网页的整体刷新，它可以只刷新网页的局部。来提高用户的体验性。

Ajax的工作原理：

ajax请求步骤：

创建XMLHttpRequest对象

初始化,调用open方法设置请求方法和url

调用send方法发送请求

事件绑定处理服务端返回结果

ajax原生GET案例：

      //1.创建对象
      const xhr = new XMLHttpRequest();
      //2.初始化.设置请求方法和url
      xhr.open("GET", "http://127.0.0.1:8000/server");
      //3.发送
      xhr.send();
      //4.事件绑定 处理服务端返回结果
      xhr.onreadystatechange = function () {
        //服务端返回所有结果
        if (xhr.readyState === 4) {
          //判断响应状态码
          if (xhr.status >= 200 && xhr.status < 300) {
            //处理结果
            //1.响应行
            console.log(xhr.status); //状态码
            console.log(xhr.statusText); //状态字符串
            console.log(xhr.getAllResponseHeaders); //响应头
            console.log(xhr.response); //响应体
          }
        }
      };

XMLHttpRequest对象常用属性和方法：

readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行

readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后

readyState === 2 : 表示 send 方法已经执行完成

readyState === 3 : 表示正在解析响应内容

readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

status为响应状态码，来展示服务器的响应状态

封装Ajax向JSONPlaceHolder获取数据

封装ajax

const ajax = {
  xhr: new XMLHttpRequest(), //创建对象
  getJson: function (url, success, failure) {//获取响应体
    if (!this.xhr) {
      if (failure) failure(new Error("can not create ajax accessor"));
      return false;
    }//若XMLHttpRequest对象创建失败返回错误

    this.xhr.onreadystatechange = function () {
      if (this.readyState === XMLHttpRequest.DONE) {//判断请求是否完成
        if (this.status >= 200 && this.status < 300) {//判断状态码是否为成功
          if (success) success(this.response);//调用成功的回调
        } else {
          if (failure) failure(new Error("ajax get failed."));//调用失败的回调
          return false;
        }
      }
    };
    this.xhr.open("GET", url);
    this.xhr.responseType = "json";
    this.xhr.send();
  },
};

对于请求的类型，看需要对数据进行什么样的操作而定。常用的请求有POST、DELETE、GET、PUT，对应增删查改。

向JSONPlaceHolder获取并处理数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="controler">
        <button id="btn-last">上一篇</button>
        <button id="btn-next">下一篇</button>
      </div>
      <div class="mian">
        <h4 id="title"></h4>
        <p id="content"></p>
      </div>
    </div>
    <script src="ajax.js"></script>
    <script>
      window.onload = function () {
        var btnl = document.querySelector("#btn-last");
        var btnn = document.querySelector("#btn-next");
        var title = document.querySelector("#title");
        var content = document.querySelector("#content");
        var page = 0;
        var baseurl = "https://jsonplaceholder.typicode.com/posts/";
        btnl.onclick = function () {
          page++;//拼接地址，得到具体地址
          ajax.getJson(
            baseurl + page,
            function (data) {
              title.innerText = data.title;
              content.innerText = data.body;
            },//设置成功回调
            function (err) {
              console.log(err);
            }//设置失败回调
          );
        };

        btnn.onclick = function () {
          page--;
          ajax.getJson(
            baseurl + page,
            function (data) {
              title.innerText = data.title;
              content.innerText = data.body;
            },
            function (err) {
              console.log(err);
            }
          );
        };
      };
    </script>
  </body>
</html>