1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>TestAjax</title>
    6.     <style>
    7.         #result{
    8.             width: 200px;
    9.             height: 100px;
    10.             border: solid 1px #2a5caa;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15.     <button>发送请求</button>
    16.     <div id="result"></div>
    17.     <script>
    18.         const btn = document.getElementsByTagName('button')[0];
    19.         const result = document.querySelector('#result');
    20.         btn.addEventListener('click',function (){
    21.             const xhr = new XMLHttpRequest();
    22.             // 请求取消
    23.             xhr.timeout = 2000;
    24.             // 超时回调
    25.             xhr.ontimeout = function (){
    26.                 alert("请求超时，请稍后重试")
    27.             }
    28.             // 网络异常回调
    29.             xhr.onerror = function (){
    30.                 alert("网络异常，请稍后重试")
    31.             }
    32.             xhr.open('GET','http://localhost:8000/delayed');
    33.             xhr.send();
    34.             xhr.onreadystatechange = function (){
    35.                 if (xhr.readyState === 4){
    36.                     if (xhr.status >= 200 && xhr.status < 300){
    37.                         result.innerHTML = xhr.response;
    38.                     }
    39.                 }
    40.             }
    41.         });
    42.     </script>
    43. </body>
    44. </html>
    1. const express = require('express')
    3. const app = express()
    5. app.all('/delayed', (request,response) =>{
    7.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
    8.     response.setHeader('Access-Control-Allow-Headers','*') // 设置所有请求头都可以允许书写
    9.     // 延时响应
    10.     setTimeout(()=>{
    11.         response.send("延时响应");
    12.     },3000);
    14. });
    16. app.listen(8000,()=>{
    17.     console.log("服务已启动");
    18. });