Ajax取消请求和请求重复发送问题

最新推荐文章于 2022-11-30 19:39:58 发布

野生小米椒

最新推荐文章于 2022-11-30 19:39:58 发布

阅读量251

点赞数

分类专栏： Ajax

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

版权

Ajax 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.取消请求
server.js

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:55
 * @LastEditors: Seven
 * @LastEditTime: 2021-07-02 15:57:25
 */
const express= require('express');
const app=express();
//当浏览器url路径是/server，执行{}里的回调函数，并由response做出响应
//注意/server前没有点 ,之前一直报错
//发送get请求
app.get('/server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
  //设置延时响应
  setTimeout(()=>{
  response.send('Hellow Ajax');
  },3000) 
});
//发送post请求
app.post("/server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("Hellow Ajax POST");
});
app.post("/json-server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data={
    name:'Ajax'
  }
  //对对象进行字符串转换
  let str=JSON.stringify(data)
  //设置响应体
  response.send(str);
});
app.listen(8000,()=>{
  console.log("服务已经启动 8000");
})

html

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:48
 * @LastEditors: Seven
 * @LastEditTime: 2021-07-02 16:59:17
-->
<!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>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <button>点击发送</button>
    <button>取消发送</button>
    <script> 
      var btn=document.querySelectorAll("button")
      let x=null;//这里要用let，用const的话后面如果修改变量会报错
      btn[0].onclick=function(){
         x=new XMLHttpRequest()
         x.open('Get',"http://127.0.0.1:8000/server")
         x.send()
      }
      btn[1].onclick=function(){
        x.abort()
      }
      
    </script>
  </body>
</html>

2.重复发送请求
server.js

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:55
 * @LastEditors: Seven
 * @LastEditTime: 2021-07-02 15:57:25
 */
const express= require('express');
const app=express();
//当浏览器url路径是/server，执行{}里的回调函数，并由response做出响应
//注意/server前没有点 ,之前一直报错
//发送get请求
app.get('/server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
  //设置延时响应
  setTimeout(()=>{
  response.send('Hellow Ajax');
  },3000) 
});
//发送post请求
app.post("/server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("Hellow Ajax POST");
});
app.post("/json-server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data={
    name:'Ajax'
  }
  //对对象进行字符串转换
  let str=JSON.stringify(data)
  //设置响应体
  response.send(str);
});
app.listen(8000,()=>{
  console.log("服务已经启动 8000");
})

html

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:48
 * @LastEditors: Seven
 * @LastEditTime: 2021-07-02 17:08:15
-->
<!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>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <button>点击发送</button>
    <script> 
      var btn=document.querySelectorAll("button")
      let x=null;
      let isSending=false;//是否正在发送Ajax请求
      btn[0].onclick=function(){
        if(isSending) x.abort()
         x=new XMLHttpRequest()
         x.open('Get',"http://127.0.0.1:8000/server")
         x.send()
         isSending=true;
         x.onreadystatechange=function(){
           if(readyState===4){
             isSending=false;
           }
         }
      }     
    </script>
  </body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax取消请求和请求重复发送问题

1.取消请求server.js/* * @Description: * @Version: 2.0 * @Autor: Seven * @Date: 2021-06-09 15:59:55 * @LastEditors: Seven * @LastEditTime: 2021-07-02 15:57:25 */const express= require('express');const app=express();//当浏览器url路径是/server，执行{}里的回调函数，并由
复制链接

扫一扫

专栏目录