五、手动取消ajax请求 解决重复发送请求问题
生活随笔
收集整理的這篇文章主要介紹了
五、手动取消ajax请求 解决重复发送请求问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
server.js:
// 1. 引入express const express = require('express')// 2. 創建應用對象 const app = express()// 3. 創建路由規則 app.get('/server', (request, response) => {// 設置響應頭 設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 設置響應體response.send('hello ajax！！！') })// all 可以接收任意類型的請求 app.all('/server', (request, response) => {// 設置響應頭 設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允許前端post請求 自定義請求頭名稱response.header('Access-Control-Allow-Headers', '*');// 設置響應體response.send('hello ajax post') })app.all('/json-server', (request, response) => {// 設置響應頭 設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允許前端post請求 自定義請求頭名稱response.header('Access-Control-Allow-Headers', '*');// 響應一個數據const data = {name: 'zep'};// 對 對象進行字符串轉換let str = JSON.stringify(data)// 設置響應體,send方法只接收字符串類型的參數response.send(str) })// 專門針對IE緩存 app.get('/ie', (request, response) => {// 設置響應頭 設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 設置響應體response.send('hello ie3!!!') })// 延時響應 app.get('/delay', (request, response) => {// 設置響應頭 設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 設置定時器，當客戶端發起請求時，服務端延遲3s再將響應數據發給客戶端setTimeout(() => {// 設置響應體response.send('hello 延遲響應3秒!!!')}, 3000)})// 4. 監聽端口 啟動服務 app.listen(8000, () => {console.log('服務已經啟動，8000端口監聽中...') })1. 取消請求
2. 解決重復發送請求問題
增加一個標識變量 isSending
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>AJAX 重復請求 請求</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><button>點擊發送請求</button><button>點擊取消請求</button> <script>// 獲取button元素const btns = document.querySelectorAll('button');let xhr = null;// 標識變量let isSending = false; // 是否正在發送AJAX請求// 綁定事件btns[0].onclick = function() {// 如果正在發送，則取消該請求，創建一個新的if(isSending) {xhr.abort();}// 1.創建對象xhr = new XMLHttpRequest();// 修改標識變量的值isSending = true;// 2.初始化 設置請求方法 和 urlxhr.open('GET', 'http://127.0.0.1:8000/delay');// 3.發送xhr.send();// 4.事件綁定，處理服務端返回的結果xhr.onreadystatechange = function() {if(xhr.readyState === 4) {// 修改標識變量isSending = false;}}}btns[1].onclick = function () {// 取消請求xhr.abort()}</script></body> </html>總結
以上是生活随笔為你收集整理的五、手动取消ajax请求 解决重复发送请求问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python网络爬虫系列（四）——req
- 下一篇： 四、数据预处理——处理连续型特征：二值化