Ajax请求超时与异常处理

最新推荐文章于 2022-03-22 18:14:21 发布

野生小米椒

最新推荐文章于 2022-03-22 18:14:21 发布

阅读量1.1k

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/x1037490413/article/details/118417338

版权

Ajax 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

超时设置，当服务器响应超时时，请求就取消
timeout属性等于一个整数，用来设置当请求发出后等待接受响应的时间。ontimeout()方法则是当等待超时后，自动执行的回调方法。
异常处理，谷歌控制台在Online设置Offline断网

server.js

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:55
 * @LastEditors: Seven
 * @LastEditTime: 2021-07-02 15:57:25
 */
const express= require('express');
const app=express();
//当浏览器url路径是/server，执行{}里的回调函数，并由response做出响应
//注意/server前没有点 ,之前一直报错
//发送get请求
app.get('/server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
  //设置延时响应
  setTimeout(()=>{
  response.send('Hellow Ajax');
  },3000) 
});
//发送post请求
app.post("/server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("Hellow Ajax POST");
});
app.post("/json-server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data={
    name:'Ajax'
  }
  //对对象进行字符串转换
  let str=JSON.stringify(data)
  //设置响应体
  response.send(str);
});
app.listen(8000,()=>{
  console.log("服务已经启动 8000");
})

html

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:48
 * @LastEditors: Seven
 * @LastEditTime: 2021-07-02 16:00:37
-->
<!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: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <button>点击发送</button>
    <div id="result"></div>
    <script> 
       var btn=document.getElementsByTagName('button')[0]
       var result=document.getElementById("result")
       //绑定事件
      btn.addEventListener('click',function(){
      //1.创建对象
        const xhr=new XMLHttpRequest()
        //设置2s超时
        xhr.timeout=2000;
        //超时回调
        xhr.ontimeout=function(){
          alert('网络异常，请稍后重试！')
        }
        xhr.onerror=function(){
          alert('你的网络似乎出了一些问题')
        }
         //2.初始化，设置请求方法和url  用？和&可传递多个参数，参数可以在控制台的Network和Headers里的Query String Parameters查看
        xhr.open("Get","http://127.0.0.1:8000/server")
        //3.发送
         xhr.send()
         //4.事件绑定，处理服务端返回的结果
         /*  on when 当...时候    
         readyState是xhr对象中的属性，表示状态0 1 2 3 4
         0是未初始化  1是open方法调用完  2是send方法调用完   3是服务器返回部分结果  4是服务器返回全部结果
         */
         xhr.onreadystatechange=function(){
           if(xhr.readyState===4){
             /*判断响应状态码 200 404 403 401 500
            2xx都是成功
            */
             if(xhr.status>=200&&xhr.status<=300){
              
             }
           }
         }
      })        
    </script>
  </body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求超时与异常处理

超时设置，当服务器响应超时时，请求就取消timeout属性等于一个整数，用来设置当请求发出后等待接受响应的时间。ontimeout()方法则是当等待超时后，自动执行的回调方法。异常处理，谷歌控制台在Online设置Offline断网server.js/* * @Description: * @Version: 2.0 * @Autor: Seven * @Date: 2021-06-09 15:59:55 * @LastEditors: Seven * @LastEditTime: 2
复制链接

扫一扫

专栏目录