Ajax及其应用

最新推荐文章于 2024-10-04 20:50:40 发布

m0_55718253

最新推荐文章于 2024-10-04 20:50:40 发布

阅读量64

点赞数 3

文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/m0_55718253/article/details/129678782

版权

1、Ajax简介及其工作原理

Ajax全称为Asynchronous JavaScript AND XML，就是异步的JavaScript和XML，通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据(在页面不刷新的情况下，向服务器发送请求，实现数据交换，更加快速，用户体验更好)。Ajax不是新的编程语言，而且一种将现有的标准组合在一起使用的新方式。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，即AJAX引擎，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax工作流程分为四步：

        (1)创建xhr对象 var xhr = new XMLHttpRequest()
        (2)设置请求方法和地址 xhr.open('请求方法','请求地址')
        (3)发送请求 xhr.send()
        (4)注册响应事件 xhr.οnlοad=function(){ }

<script>
      var button = document.querySelector("button");
      var result = document.querySelector("#result");
      button.addEventListener("click", function () {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化，设置请求方法和url
        xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200&c=300");
        //3.发送
        xhr.send();
        //4.事件绑定，处理服务器端返回的结果
        //readystate是xhr对象中的属性，表示状态0(未初始化)，1(open方法调用完毕)，2(send方法调用完毕)，3(服务端返回了部分结果)，4(服务端返回了所有结果)
        xhr.onreadystatechange = function () {
          //判断（服务端返回了所有结果）
          if (xhr.readyState === 4) {
            //判断响应状态码 200 404 403 401 500
            //2xx,2开头的状态码都表示成功
            if (xhr.status >= 200 && xhr.status < 300) {
              //处理结果 行 头 空行 体
              console.log(xhr.status); //状态码
              console.log(xhr.statusText); //状态字符串
              console.log(xhr.getAllResponseHeaders()); //响应头
              console.log(xhr.response); //响应体
              //设置result文本
              result.innerHTML = xhr.response;
            }
          }
        };
      });
    </script>

2、XMLHttpRequest对象的属性、方法和事件的深入理解

一、XMLHttpRequest对象的属性

（1）readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：

（2）responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        document.myForm.time.value = xhr.responseText;
    }
}

（3）onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数，状态改变时触发。

（4）其他属性

常见的状态码：

二、XMLHttpRequest对象的方法

（1） open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

（2）send() 方法

send() 方法将请求送往服务器。

3、Ajax及XMLHttpRequest对象的用法

以JSONPlaceHolder为数据服务，向其发送Ajax请求来获取数据

<!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>Ajax with Promise</title>
</head>

<body>
    <div class="container">
        <div class="controller">
            <button id="btn-prev">上一篇</button>
            <button id="btn-next">下一篇</button>
        </div>
        <div class="main">
            <h4 id="title"></h4>
            <h5 id="author"></h5>
            <p id="content"></p>
        </div>
    </div>
    <script>
        window.onload = function () {
            const btnPrev = document.querySelector("#btn-prev");
            const btnNext = document.querySelector("#btn-next");
            const postTitle = document.querySelector("#title");
            const postBody = document.querySelector("#content");
            const postAuthor = document.querySelector("#author");
            var page = 0;
            var basePostUrl = "https://jsonplaceholder.typicode.com/posts";
            var baseUserUrl = "https://jsonplaceholder.typicode.com/users";

            btnNext.onclick = function () {
                page++;
                render(page);
            }
            btnPrev.onclick = function () {
                page--;
                page = page < 1 ? 1 : page;
                render(page);
            }

            function render(page) {
                let data = {};
                // 使用getJSON函数
                // 先从posts中获取指定post数据，
                // 再利用post数据中的userId获取该post的用户信息，
                // 最后将收集到的数据显示在页面中。
                getJSON(`${basePostUrl}/${page}`).then((post) => {
                    data.title = post.title;
                    data.content = post.body;
                    return getJSON(`${baseUserUrl}/${post.userId}`);
                    // then()方法可以不返回值，也可以返回一个值或Promise对象。
                    // 如果不返回特定的Promise对象，则会在其内部创建一个状态为fulfilled的Promise对象，再将返回值作为这个新Promise对象的结果。
                    // 如果在then()方法中发生了错误，也会在其内部创建一个状态为rejected的Promise对象，后链式调用中最近的一个catch()方法处理。
                }).then((user) => {
                    data.username = user.name;
                    // 填充数据到页面元素
                    postTitle.textContent = data.title;
                    postBody.textContent = data.content;
                    postAuthor.textContent = data.username;
                }).catch(function (err) {
                    console.log(err.message);
                    // 在不返回特定的Promise对象时，catch()方法也会在其内部创建一个Promise对象，原理与then()方法类似。
                });
            }
        }

        // 利用Promise封装Ajax的GET请求，从指定url上获取JSON数据。
        function getJSON(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState === XMLHttpRequest.DONE) {
                        if (this.status.toString().startsWith("2")) {
                            resolve(this.response);
                        } else {
                            reject(new Error(`HTTP request Error : ${this.statusText}`));
                        }
                    }
                };
                xhr.open("GET", url);
                xhr.responseType = "json";
                xhr.send();
            });
        }
    </script>
</body>

</html>

展示结果如下：