ajax取消数据获取

回到文章总目录

设置取消获取按钮

接着上一个章节的代码

1.创建在testeight文件夹并在这个文件夹里面
2.创建cancelobain.html文件
3.创建server.js文件

cancelobain.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击获取信息</button><button>取消获取信息</button><div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div><script>// 一:获取元素对象const textsend= document.getElementsByTagName('button')[0];//  使textone 等于无let textone = null;// const result = document.querySelector('#result');// textsend.addEventListener('click', function(){console.log('点击发送测试成功.')// 1.发送请求textone = new XMLHttpRequest();// 超时设置  超过两秒 请求将会自动取消textone.timeout = 4000;// 超时回调,确认超时后，弹出一个窗口textone.ontimeout = function(){alert('两秒内没有接收到返回，故弹出窗口');}// 网络异常// 这个不需要后端去处理，只是用户的网络出现了问题// 只做一个弹出框来友好地告诉用户textone.onerror = function(){alert('网络异常的弹出框.');}// 自动转化// 借助textone对象里面的属性来转化// 设置响应体数据的类型textone.responseType = 'json';// 2.初始化textone.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());// 3.发送textone.send();// 4.事件绑定textone.onreadystatechange = function(){if(textone.readyState === 4){if(textone.status >= 200 && textone.status < 300){// 测试打印console.log(textone.response);//  使用自动转化result.innerHTML = textone.response.name;}}}});const textcancel= document.getElementsByTagName('button')[1];textcancel.addEventListener('click', function(){console.log('点击了第二个按钮取消获取，但是已经发送。');// 取消获取得到的数据textone.abort();});</script>
</body>
</html>

js代码没有改变

案例二，简化
不在前端显示返回信息，只是测试取消功能
创建文件为simpel.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击获取信息</button><button>取消获取的信息</button><div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div><script>// 获取元素const btns = document.querySelectorAll('button');let textone = null;btns[0].onclick =function(){textone = new XMLHttpRequest();textone.open('GET','http://127.0.0.1:8000/ie');textone.send();}// abortbtns[1].onclick =function(){textone.abort();}</script>
</body>
</html>

server.js文件

// 1. 引入express
const express = require('express');// 2.创建对象
const app = express();
// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all  表示可以接收任意类型的请求      如get post 等等
app.get('/ie', (request, response)=>{// 设置响应头 设置允许跨域// 头名字为Access-Control-Allow-Origin// 头的值为response.setHeader('Access-Control-Allow-Origin','*');// 响应头        *号表示所有的头信息都可以接收response.setHeader('Access-Control-Allow-Headers','*');// 响应一个数据   把这个对象返回给浏览器const data = {name: 'setTimeout'};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置定时器延时// setTimeout(()=>{},3000);// 设置响应体// response.send(str);// 把响应体放进延时器函数里面setTimeout(()=>{response.send(str);},3000);});// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{console.log("服务已经启动，8000端口监听中......");
});

ajax取消数据获取相关推荐

关掉ajax 的异步,asp.net ajax 取消异步回送
谁能帮我看一下..点击button1向数据库中插入一条数据,并绑定到gridview1,更新updatepanel1,在更新时我点击"取消"来取消异步回送.结果数据照样插入到表中, ...
ajax的响应与取消响应
第一部分:axios取消响应 1.使用 CancelToken.source 工厂方法创建cancel token CancelToken有一个source静态方法,调用之后返回一个对象,该对象包含一 ...
关于 Ajax 有必要取消吗，请求如何取消？
假如你熟悉 xhr,会知道 Ajax 其实可以前端主动取消,使用的是 XMLHttpRequest.abort(). 当然现在也不是刀耕火种的时代,除了面试,可能基本不会手写 xhr,在无人不知的 a ...
Msdn 杂志 asp.net ajax 文章汇集
asp.net ajax 充分利用客户端 JavaScript.DHTML 和 XMLHttpRequest 对象.其目的是帮助开发人员创建更具交互性的支持 AJAX 的 Web 应用程序 ASP.N ...
ajax 无返回_AJAX技术学习
水里的游鱼是缄默沉静的,陆地上的兽类是喧哗的,空中的飞鸟是喧哗着的.人类却兼有海洋的缄默沉静.陆地的喧哗与天空的音乐. --泰戈尔佳著荐 AJAX技术 AJAX全称为Asynchronous J ...
从前端Vue/Axios到后端交互--浅谈Vue生命周期、Ajax调用
一.基本需求介绍: 此项目实现了对数据库数据的增删查改,后端使用Spring+MyBatis+SpringMVC,前端使用了Vue+JavaScript+AJAX,前后端实现了异步交互,前端页面可以 ...
Ajax同步设置超时时间出错逻辑解决方案
惯性思维害死人啊,都让我感觉老了都,哎写功能时有几个ajax进行数据获取,需要同步获取数据,比如1ajax请求会超时需要判定请求失败,然后给数据给2去ajax请求,惯性思维要同步但是几番挣扎之后 ...
React学习笔记7：React使用注意事项
1. setState setState更新状态的2种写法方式一:setState(stateChange, [callback])------对象式的setState stateChange为状态 ...
reactjs三个常用的Hook：State Hook、 Effect Hook、 Ref Hook
1. React Hook/Hooks是什么? (1). Hook是React 16.8.0版本增加的新特性/新语法 (2). 可以让你在函数组件中使用 state 以及其他的 React 特性 2. ...

ajax取消数据获取

设置取消获取按钮

ajax取消数据获取相关推荐

最新文章

热门文章