1.代码

1.1前端代码

<!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 POST 请求</title>
    <style>
      #result {
    
    
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <button>发送请求</button>
    <button>取消请求访问</button>
    <div id="result"></div>
  </body>
  <script>
    const button0 = document.getElementsByTagName("button")[0];
    const button1 = document.getElementsByTagName("button")[1];
    const result = document.getElementById("result");

    let xhr = null;
    let isSending = false;

    button0.onclick = function () {
    
    
      //如果isSending为true则取消之前的请求
      if (isSending) xhr.abort();

      xhr = new XMLHttpRequest();
      //当开始访问的时候，将isSending设置为true
      isSending = true;
      xhr.open("GET", "http://127.0.0.1:8000/server?" + Date.now());
      xhr.send();
      xhr.onreadystatechange = function () {
    
    
        if (xhr.readyState === 4) {
    
    
          //访问结束，将isSending设置为false
          isSending = false;
          if (xhr.status >= 200 && xhr.status < 300) {
    
    
            result.innerHTML = xhr.response;
          } else {
    
    
          }
        }
      };
    };

    button1.onclick = function () {
    
    
      xhr.abort();
    };
  </script>
</html>

1.2服务端代码

const express = require("express");
const app = express();

app.get("/server", (request, response) => {
    
    
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data = {
    
    
    name: "lixv000",
  };
  let str = JSON.stringify(data);

  setTimeout(() => {
    
    
    response.send(str);
  }, 3000);
});

app.listen(8000, () => {
    
    
  console.log("服务已经启动，8000端口监听中……");
});

2.运行结果

在这里插入图片描述

ajax——通过标识符解决重复发出请求的问题

1.代码

1.1前端代码

1.2服务端代码

2.运行结果

猜你喜欢