03——promise ajax请求

最新推荐文章于 2024-04-23 00:37:13 发布

野生小米椒

最新推荐文章于 2024-04-23 00:37:13 发布

阅读量123

点赞数

分类专栏： Promise

本文链接：https://blog.csdn.net/x1037490413/article/details/118570567

版权

Promise 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用XMLHttpRequest对象通过Ajax技术从'https://api.apiopen.top/getJoke'获取数据。当用户点击按钮时，触发异步GET请求。如果请求成功，响应将被打印到控制台；如果请求失败，将输出错误状态。

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

<!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">
      <button class="btn">点击发送Ajax</button>
    </div>
    <script>
      const btn = document.querySelector(".btn");
      btn.addEventListener("click", function () {
        const p = new Promise((resolve, reject) => {
          const x = new XMLHttpRequest();
          x.open("GET", "https://api.apiopen.top/getJoke");
          x.send();
          x.onreadystatechange = function () {
            if (x.readyState === 4) {
              if (x.status >= 200 && x.status < 300) {
                resolve(x.response);
              } else {
                reject(x.status);
              }
            }
          };
        });
        p.then(
          (value) => {
            console.log(value)
          },
          (reason) => {
            console.log(reason);
          }
        );
      });
    </script>
  </body>
</html>