ajax 第九节 服务请求发送与服务取消

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ajax 第九节 服务请求发送与服务取消脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

=================服务端server.js 设置延时时间========================

//引用 express
const { request, response, json } = require('express');
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则,
// request 是对请求报文的封装
// response 是对响应报文的封装
//app.all 可以接收任意类型的请求头
app.get('/cache', (request, response) => {
    //设置响应头,设置充许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        response.send('name-xxxxx');
    }, 3000);
})
// 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动,8000端口监听中.......');
})

===================客户端 index.html 发送与取消======================

ajax 第九节 服务请求发送与服务取消

 

 

<!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: solid 1px red;
        }
        .abc {
            width: 200px;
            height: 100px;
            border: solid 1px pink;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <button>取消请求</button>
</body>
<script>
    const btns = document.querySelectorAll('button');
    let xhr = null;
    btns[0].onclick = function () {
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8000/cache');
        xhr.send();
    }
    btns[1].onclick = function () {
        xhr.abort();
    }
</script>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的ajax 第九节 服务请求发送与服务取消全部内容,希望文章能够帮你解决ajax 第九节 服务请求发送与服务取消所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: