jQuery Jsonp 请求,捕获异常(404,50X)状态异常

soゝso 2018-02-13 08:55:38 1259

  Jsonp   是一种特殊的   Ajax   请求, 如果您对   Jsonp   不了解,那么请看这篇:JSONP 的工作原理,JSONP Demo讲解 。或者看看这篇  Jsonp   教学篇:JSONP 教程 ,里面也讲到了什么是跨域。

我今天被国外的一个画板项目迷上了,我觉得 clone 一版本,并且为了快速的让大家稳定的使用,我利用   CDN   做前后端分离。

前后端分离示意图



遇到的问题(Jsonp)404问题

发现   Jsonp   去请求   CDN  ,如果用户请求的资源是不存在的,那么?必须要告知用户,而   Jsonp   的原理是创建 script 标签,然后加载返回内容作为   JavaScript   脚本去执行,调用方法,达到获取返回值。

ajax代码:

sojson = function (data) {
   console.log("返回值",data)
}
$.ajax({
    url:"//cdn.www.sojson.com/sketch/11333111111.json",
    dataType:"jsonp",
    error:function (e) {
        d = "error", alert("Uh-oh, an error occured while trying to load this sketch.")
    }
});

返回值:

sojson("294x223","297x230","299x235"]);

当返回值作为脚本去执行的时候,调用了上面的 sojson 方法。

但是当资源404的时候,或者报错的时候,也就是返回不成功的时候,  jsonp   是无法得到状态,也不会进 success,也不会进 error 方法。有人会说 script 的话,有 onerror 方法,但是这个方法有浏览器兼容问题。

最终解决Jsonp,异常捕获

其实有点投机取巧,就是采用 timeout 属性,因为当资源只要没有正确返回,就会计算在 timeout 时间消耗内。

$.ajax({
    url:"//cdn.www.sojson.com/sketch/11333111111.json",
    timeout:4000,//超过4秒没正确返回,就会进入 error
    dataType:"jsonp",
    error:function (e) {
        d = "error", alert("Uh-oh, an error occured while trying to load this sketch.")
    }
});

就这样就 OK 了。

版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/274.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

相关文章
【Exception】Java 异常处理基本规则,Java异常处理的基本规范
Elasticsearch JSONP 请求提示{"error":"JSONP is disabled."}
JQuery Ajax四种写法,Ajax请求返回JSON 操作Demo
Shiro 教程,关于最近反应的相关异常问题,解决方法合集。
Spring 3.x 升级到Spring 4.x 注意事项和步骤,错误解决方法
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决
JSOUP 教程,JSOUP请求JSON ,JSOUP返回JSON 数据
JSON格式讲解,JSON取对象,JSONObject和JSONArray的操作
免费天气API,全国天气 JSON API接口,可以取五天的天气预报
Java取浏览器请求头(User-Agent),分析浏览器信息,系统信息的几种办法。
最新文章
Linux Centos 使用 Redis service 启动,Redis service 脚本编写 31
恭喜SOJSON获得阿里云618“上云接力赛”第一名,获得代金券6.18万 185
Springboot 集成Freemarker 自定义标签解决方案 483
七牛云到底有多垃圾?用七牛云需要知道的事,不然不小心就一套房没了 28176
JavaScript怎么识别360浏览器?JS识别360急速模式方案,360流氓浏览器 1087
关于本站所有JavaScript 加密、混淆、解密、美化等安全说明 1791
Jsoup 提交参数乱码,解决思路,解决过程及解决方案 834
生成新浪短网址、百度短网址,t.cn / dwz.cn 的生成方式,短链还原 786
ICP怎么操作取消备案,企业、个人怎么自己申请取消备案? 628
Javascript 加密/压缩后运行不了,JavaScript报错排查讲解 575
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 179812
Elasticsearch教程(四) elasticsearch head 插件安装和使用 140402
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 137421
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 88600
Elasticsearch教程(六) elasticsearch Client创建 82527
Elasticsearch教程(一),全程直播(小白级别) 78809
Elasticsearch教程(二),IK分词器安装 77688
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 77161
Elasticsearch教程(五) elasticsearch Mapping的创建 70696
免费天气API,天气JSON API,不限次数获取十五天的天气预报 60390

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...