【Ajax】笔记-取消请求

这篇具有很好参考价值的文章主要介绍了【Ajax】笔记-取消请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在进行AJAX(Asynchronous JavaScript and XML) 请求时,有时候我们需要取消正在进行的请求。取消请求可以帮助我们提高用户体验,病减少不必要的网络流量和服务器负载。

取消请求的方法
在AJAX请求中,我们可以使用以下方法来取消正在进行的请求:
使用abort()方法:使用abort()方法可以取消当前正在进行的ajax请求。改方法会终端请求病终止与服务器的连接。
前端JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;

        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

后端服务:

//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 1000)
});

测试:文章来源地址https://www.toymoban.com/news/detail-585586.html

  1. 正常请求
    【Ajax】笔记-取消请求,# Ajax,ajax,笔记,okhttp
    2.在返回结果之前取消
    【Ajax】笔记-取消请求,# Ajax,ajax,笔记,okhttp

到了这里,关于【Ajax】笔记-取消请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AJAX学习笔记2发送Post请求

    AJAX学习笔记1发送Get请求_biubiubiu0706的博客-CSDN博客 继续 AJAX发送POST请求  无参数 测试 改回来   测试 AJAX POST请求   请求体中提交参数 测试 后端打断点 如何用AJAX模拟form表单post请求提交数据呢? 设置请求头必须在open之后,send之前 请求头里的设置好比form表单的enctype

    2024年02月10日
    浏览(43)
  • AJAX学习笔记1发送Get请求

    传统请求有哪些方式,及缺点 传统请求有哪些? 1.直接在浏览器地址栏上输入URL. 2.点击超连接. a href=\\\"/上下文/请求地址\\\"超链接请求/a  ----相对路径 a href=\\\"http://www.baidu.com\\\"超链接请求/a  ----绝对路径 3.提交form表单 form action=\\\"/上下文/请求地址\\\" method=\\\"post\\\" 4.使用JS代码 window.open(\\\"u

    2024年02月10日
    浏览(47)
  • 原生js发送ajax请求---ajax请求篇(一)

    在原生js中我们使用的是XMLHttpRequest对象来发送ajax请求 主要步骤就是:    1.创建XMLHTTPRequest对象 2.使用open方法设置和服务器的交互信息 3.设置发送的数据,开始和服务器端交互 4.注册事件 5.更新界面 (1) get方式  (2)post方式  二、也可以对原生js发送ajax请求进行封装 以

    2024年02月12日
    浏览(39)
  • 【Ajax】如何通过axios发起Ajax请求

    ✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习 Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请

    2024年02月02日
    浏览(54)
  • 【AJAX】使用JQ发送AJAX发送请求

    运行结果  获取的响应是字符串,如何把字符串变成JSON对象 方法一:JSON.parse(data) 方法二:设置响应数据类型为json格式 // $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]),,\\\'json)     $.get(\\\'http://127.0.0.1:8000/server\\\', { a: 100, b: 200 }, function (data) {

    2024年02月13日
    浏览(46)
  • 什么是AJAX?如何使用原生JavaScript进行AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(38)
  • Ajax-概念、Http协议、Ajax请求及其常见问题

    其他AJAX知识 AJAX同源策略及跨域问题解决方案——点击此处 AJAX请求的不同发送方式——点击此处 AJAX 全称为Asynchronous Javascript And XML,就是 异步的JS和XML 。通过AJAX 可以在浏览器中向服务器发送异步请求,最大的优势: 无刷新获取数据 。AJAX 不是新的编程语言,而是一种将现

    2024年02月13日
    浏览(39)
  • 什么是AJAX?如何使用原生JavaScript搭建AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(43)
  • ajax请求——XMLHttpRequest请求

     个人练习笔记-----Ajax01 一、GET  https://v5.crmeb.net/api/groom/list/3?page=1limit=9  ------协议:// 域名 / 地址?参数 1.xhr.open(\\\"GET\\\",\\\"https://v5.crmeb.net/api/groom/list/3?page=1limit=9\\\");对应的参数从下图中所示中获取 2.xhr.setRequestHeader(\\\"Content-Type\\\",\\\"application/json\\\");//验证身份 xhr.setRequestHeader(\\\"Authori-Z

    2024年02月03日
    浏览(45)
  • Ajax的请求响应

    Ajax的全称是Asynchronous JavaScript and XML,即异步的JavaScript和XML(传输储存数据)。它是一种在不重新加载整个页面的情况下更新部分页面的技术。 Ajax的原理 1.用户通过页面上的操作(如点击按钮)触发JavaScript函数的执行; 2.JavaScript函数通过XMLHttpRequest对象向服务器发送请求;

    2024年04月27日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包