【Ajax】设置用户只可发送一次数据,多余数据不做反应

说明

  • 设置变量 isSending 发送后改变状态
  • isSending 状态改变后不执行发送

前端页面

<html>
    <head>
        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    head>
    <body>
        <button>点击请求button>
        <div id="content" style="width: 300px;height:200px;border:1px solid;">div>
    body>
    <script>
        const btn = document.getElementsByTagName('button');
        const content = document.getElementById('content');
        let xhr = null
        let isSending = false // 是否正在发送Ajax请求
        
        btn[0].onclick = function(){
            if(!isSending){
                isSending = true
                xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://127.0.0.1:8000/delay');
                xhr.send('a=200&b=300')
                xhr.onreadystatechange = function(){

                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            content.innerHTML = xhr.response;
                    }
                    }
                }
            }
        }

    script>
html>

后端脚本

const express = require('express');
const app = express()
app.get('/server', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello Ajax')

})
app.get('/delay', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    setTimeout(()=>{
        Response.send('Hello Ajax')
    }, 3000)
})
app.get('/ie', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello IE')
})
app.post('/server', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello Ajax-4')
})
app.listen(8000, ()=>{
    console.log('8000 running meproject express')
})

你可能感兴趣的:(网络应用,ajax,javascript,前端)