AJAX基本操作(三)——响应JSON，请求超时和网络异常，以及取消发送请求

最新推荐文章于 2021-12-26 19:35:09 发布
最新推荐文章于 2021-12-26 19:35:09 发布
阅读量441 收藏
点赞数
分类专栏： AJAX 文章标签： ajax 网络 http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44691513/article/details/113622083
版权

文章目录


本篇文章所采用后端部分如下： 

//1. 引入express
const { request, response } = require('express');
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('HELLO AJAX');
});
app.post('/server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});
app.all('/server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});
app.all('/json-server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
     const data={
         name:'kd',
     }
     let str=JSON.stringify(data)
     response.send(str);
});
//延时响应
app.all('/delay',(request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(()=>{
        response.send('延时响应')
    },1000)
})
//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});

标题响应JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX——JSON</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result=document.getElementById('result')
        window.onkeydown=function(){
            const xhr=new XMLHttpRequest()
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            //自动转换 设置响应体的数据类型
            xhr.responseType='json'
            xhr.send()
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status>=200 && xhr.status<=300){
                        // result.innerHTML=xhr.response//此时返回的是一个字符串。
                       //手动转换
                        // let data=JSON.parse(xhr.response)
                        // console.log(data);
                        // result.innerHTML=data.name
                        console.log(xhr.response);
                        result.innerHTML=xhr.response.name
                    }
                }
            }
        }
    </script>
</body>
</html>

result.innerHTML=xhr.response返回的是一个字符串。我们若采用手动转换的话要使用JSON.parse()方法。
另外我们可以设置响应体的数据类型，从而达到自动转换的效果。

xhr.responseType='json

在这里插入图片描述

超时和网络异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超时</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //超时设置
            xhr.timeout=2000
            //超时回调
            xhr.ontimeout=function(){
                alert('网络异常，请稍后再试')
            }
            //网络异常回调
            xhr.onerror=function(){
                alert('网络似乎出现了点问题')
            }
            xhr.open("GET",'http://127.0.0.1:8000/delay')
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

//超时设置
            xhr.timeout=2000
            //超时回调
            xhr.ontimeout=function(){
                alert('网络异常，请稍后再试')
            }
            //网络异常回调
            xhr.onerror=function(){
                alert('网

在这里插入图片描述

取消发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素
        const btns=document.querySelectorAll('button')
        let x=null
        btns[0].onclick=function(){
            x=new XMLHttpRequest()
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
        }
        // abort
        btns[1].onclick=function(){
            x.abort()
        }
    </script>
</body>
</html>

我们设置的是1秒后发送ajax请求，如果我们在1秒内点击取消发送则状态码将会变成cancled
在这里插入图片描述

拾玥花开
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax请求时间延长,Ajax请求的时间太长
weixin_35886741的博客
08-05 1558
我问你，是因为我没有任何想法...Ajax请求的时间太长我做了从服务器获取较小的数据的Ajax请求。 json的答案已经被服务器缓存了，所以速度非常快。像window.xhr = $.ajax({url: domain+'index.php?fx_action=ajax&fx_mode=continents&fx_type=countries&fx_ajaxid='+win...
利用jsonp实现跨域操作并做出超时处理
ganlubaba666的博客
05-05 2884
什么是jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，是一种非官方跨域数据交互协议，可用于解决主流浏览器的跨域数据访问的问题。用 JSONP 抓到的资料并不是 JSON，而是任意的填充JSON数据的JavaScript。 为什么要使用jsonp 1.Ajax直接请求普通文件存在跨域无权限访问的问题 2.web页面上调用js文件时不受是否跨域的影响，凡是有s...
jquery getJSON 中对超时Timeout的处理
weixin_30900589的博客
04-10 250
调用 jquery1.4 的getJSON()方法时，如下代码就能处理当URL为非法URL,或者URL繁忙而不能返回响应、超时等状况。代码源自 http://stackoverflow.com/questions/4138470/jquery-getjson-with-timeoutfunction testAjax(){ varparams="test=123"; v...
为jquery的ajax请求添加超时timeout时间的操作方法
10-18
主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法，文中通过一段简单的代码给大家介绍jquery ajax超时设置方法，感兴趣的朋友跟随脚本之家小编一起看看吧
Ajax中的高级请求和响应
03-04
对于很多Web开发人员来说，只需要生成简单的请求并接收简单的响应即可;但是对于希望掌握Ajax的开发人员来说，必须要全面理解HTTP状态代码、就绪状态和XMLHttpRequest对象。在本文中，BrettMcLaughlin将向您介绍各种...
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
10-15
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
掌握Ajax，第7部分:在请求和响应中使用XML
03-04
在本文中，您将看到服务器如何在请求响应中发送XML。　现在如果不使用XML就不能进行任何有意义的编程。无论考虑转向XHTML的网页设计人员、使用JavaScript的Web程序员、使用部署描述文件和数据绑定的服务器端程序员，...
HttpClient超时设置
热门推荐
iris0123456的专栏
06-10 6万+
DefaultHttpClient:请求超时httpclient.getParams().setParameter(CoreConnectionPNames.CONNECTION_TIMEOUT, 60000); 读取超时httpclient.getParams().setParameter(CoreConnectionPNames.SO_TIMEOUT, 60000);HttpClientHtt
【uniapp】使用jsonp报超时 Uncaught (in promise) {statusText: “Request Timeout“, status: 408}
kikikiuu的博客
11-11 2103
使用腾讯地图api跨域，用jsonp解决 报超时 Uncaught (in promise) {statusText: “Request Timeout”, status: 408} 解决方案： 在jonp对象中加个参数 output: 'jsonp' let url = 'https://apis.map.qq.com/ws/geocoder/v1/?address='; this.$jsonp(url, { key: '腾讯地图key', address:this.addres.
jquery ajax jsonp一直网络超时,jQuery ajax（jsonp）忽略超时并且不会触发错误事件
weixin_29011993的博客
08-06 354
jQuery ajax(jsonp)忽略超时并且不会触发错误事件为了添加一些基本的错误处理，我想重写一段使用jQuery的$ .getJSON来从Flickr中提取一些照片的代码。这样做的原因是$ .getJSON不提供错误处理或使用超时。因为$ .getJSON只是$ .ajax的包装，所以我决定改写这个东西并惊喜，它完美无缺。现在开始有趣了。当我故意导致404(通过更改URL)或导致网络超时(...
(转)json数据解析异常而导致网络请求失败的解决办法(其一)
北京流年
02-20 6567
原文出处 https://www.jianshu.com/p/d6bd6bd5fce3 参考文章 问题概述 笔者在开发过程中临时遇到一个本来仅有web端的项目临时增加Android端，导致后端在出接口时并未考虑Android端的json数据的解析，导致接口是这样的。。。。 正确请求 { "code": 0, "data": { "user": { ...
ext ajax 超时,确定$.ajax错误是否为超时
weixin_28705579的博客
08-05 140
确定$.ajax错误是否为超时我在利用jQuery.ajax( settings ).但是，我想知道是否有人玩过超时设置？我知道它基本上是用来指示请求的本地时间，但是如果达到超时，它能触发什么吗？还是干脆就不听回应了？阅读jQuery站点，我可以看到没有传递任何参数，因此它似乎是一个具有一种功能的简单设置。这很好。但是，如果到达超时，我希望触发警报或函数。在这种情况下，我可以看到错误设置不会被触发...
AJAX (4) — AJAX请求超时与缓存问题 、取消请求、请求重复发送问题
m0_59897687的博客
12-26 1096
目录 一、AJAX请求超时与缓存问题 1.server.js文件 2.html文件 二、AJAX取消请求 三、AJAX请求重复发送问题 nodemon自动重启工具 nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。 安装命令：npm install -g nodemon 一、AJAX请求超时与缓存问题 先设计出一个需求： 点击按钮，向服务端发送请求，服务端返回结果，...
ajax服务器超时,当服务器会话超时时出现JSON/AJAX问题
weixin_39674190的博客
08-06 295
我在我的站点内进行ajax和json调用，在服务器端会话超时时间为120分钟。时间到期后，用户尝试从已加载的页面进行ajax或json调用，即可完成调用，我只是坐在那里没有响应。我正在使用一个sturts.xml文件来处理我所有的动作/ url调用，并且这个文件有一个拦截器，可以在每次调用服务器时运行。拦截器会检查您是否登录，如果不是，则会将您发送到登录屏幕。问题是，ajax和json的调用将全部...
html中jsonp错误,解决jQuery使用JSONP时产生的错误
weixin_39968640的博客
06-23 532
什么是域，简单来说就是协议+域名或地址+端口，3者只要有任何一个不同就表示不在同一个域。跨域，就是在一个域中访问另一个域的数据。如果只是加载另一个域的内容，而不需要访问其中的数据的话，跨域是很简单的，比如使用iframe。但如果需要从另一个域加载并使用这些数据的话，就会比较麻烦。为了安全性，浏览器对这种情况有着严格的限制，需要在客户端和服务端同时做一些设置才能实现跨域请求。JSONP简介JSONP...
ajax发送json数据请求
最新发布
07-27
你可以使用以下代码通过Ajax发送JSON数据请求： ```javascript var data = { key1: value1, key2: value2 }; $.ajax({ type: "POST", url: "your-url", data: JSON.stringify(data), contentType: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值