首页 web前端 js教程 解决jQuery使用JSONP时产生的错误_jquery

解决jQuery使用JSONP时产生的错误_jquery

May 16, 2016 pm 03:28 PM
jquery jsonp 错误

什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域。跨域,就是在一个域中访问另一个域的数据。

如果只是加载另一个域的内容,而不需要访问其中的数据的话,跨域是很简单的,比如使用iframe。但如果需要从另一个域加载并使用这些数据的话,就会比较麻烦。为了安全性,浏览器对这种情况有着严格的限制,需要在客户端和服务端同时做一些设置才能实现跨域请求。

JSONP简介
JSONP(JSON with Padding)是一种常用的跨域手段,但只支持JS脚本和JSON格式的数据。顾名思义,JSONP是利用JSON作为垫片,从而实现跨域请求的一种技术手段。其基本原理是利用HTML的<script></script>标签天生可以跨域这一特点,用其加载另一个域的JSON数据,加载完成后会自动运行一个回调函数通知调用者。此过程需要另一个域的服务端支持,所以这种方式实现的跨域并不是任意的。

JQuery对JSONP的支持
JQuery的Ajax对象支持JSONP方式的跨域请求,方法是将crossDomain参数指定为true并且将dataType参数指定为jsonp[1],或者使用简写形式:getJSON()方法[2]。例如:

// 设置crossDomain和dataType参数以使用JSONP
$.ajax({
 dataType: "jsonp",
 url: "http://www.example.com/xxx",
 crossDomain: true,
 data: {
  
 }
}).done(function() {
 // 请求完成时的处理函数
});

// 使用getJSON
$.getJSON("http://www.example.com/xxx&#63;jsoncallback=&#63;", {
 // 参数
}, function() {
 // 请求完成时的处理函数
});

登录后复制

使用getJSON时,需要在参数中指定jsoncallback=?,这个就是前面所说的回调函数,JQuery会自动以一个随机生成的值(回调函数名)来替换该参数中的问号部分,从而形成jsoncallback=jQueryxxxxxxx这种形式的参数,然后和其他参数一起使用GET方式发出请求。

使用第一种方式时,只要将dataType参数的值指定为jsonp,JQuery就会自动在请求地址后面加上jsoncallback参数,因此无需手动添加。

JQuery跨域请求的缺陷:错误处理
跨域请求可能会失败,比如对方服务器的安全设置拒绝接受来自我方的请求(我方不在对方的信任列表中),或者网络不通,或对方服务器已关闭,或者请求地址或参数不正确导致服务器报错等等。

在JQuery中,当使用ajax或getJSON发送请求后会返回一个jqXHR对象[3]。该对象实现了Promise协议,所以我们可以使用它的done、fail、always等接口来处理回调。例如我们可以用在它的fail回调中进行请求失败时的错误处理:

var xhr = $.getJSON(...);
xhr.fail(function(jqXHR, textStatus, ex) {
  alert('request failed, cause: ' + ex.message);
});
登录后复制

这种方式能够处理“正常的错误”,例如超时、请求被中止、JSON解析出错等等。但它对那些“非正常的错误”,例如网络不通、服务器已关闭等情况的支持并不好。

例如当对方服务器无法正常访问时,在Chrome下你会在控制台看到一条错误信息:

JQuery不会处理该错误,而是选择“静静地失败”:fail回调不会执行,你的代码也不会得到任何反馈,所以你没有处理这种错误的机会,也无法向用户报告错误。

一个例外是在IE8。在IE8中,当网络无法访问时

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1677
14
CakePHP 教程
1431
52
Laravel 教程
1334
25
PHP教程
1280
29
C# 教程
1257
24
无法完成操作(错误0x0000771)打印机错误 无法完成操作(错误0x0000771)打印机错误 Mar 16, 2024 pm 03:50 PM

如果您在使用打印机时遇到错误消息,例如操作无法完成(错误0x00000771),可能是因为打印机已断开连接。在这种情况下,您可以通过以下方法解决问题。在本文中,我们将讨论如何在Windows11/10PC上修复此问题。整个错误信息说:操作无法完成(错误0x0000771)。指定的打印机已被删除。修复WindowsPC上的0x00000771打印机错误若要修复打印机错误操作无法完成(错误0x0000771),指定的打印机已在Windows11/10PC上删除,请遵循以下解决方案:重新启动打印假脱机

Windows Update 更新提示Error 0x8024401c错误的解决方法 Windows Update 更新提示Error 0x8024401c错误的解决方法 Jun 08, 2024 pm 12:18 PM

目录解决方法一解决方法二一、删除Windows更新的临时文件二、修复受损的系统文件三、查看并修改注册表项四、关闭网卡IPv6五、运行WindowsUpdateTroubleshootor工具进行修复六、关闭防火墙和其它相关的杀毒软件。七、关闭WidowsUpdate服务。解决方法三解决方法四华为计算机Windows更新出现“0x8024401c”报错问题现象问题原因解决方案仍未解决?最近web服务器因为系统漏洞需要更新,登录服务器之后,更新提示错误代码0x8024401c解决方法一

解读Oracle错误3114:原因及解决方法 解读Oracle错误3114:原因及解决方法 Mar 08, 2024 pm 03:42 PM

标题:分析Oracle错误3114:原因及解决方法在使用Oracle数据库时,常常会遇到各种错误代码,其中错误3114是比较常见的一个。该错误一般涉及到数据库链接的问题,可能导致访问数据库时出现异常情况。本文将对Oracle错误3114进行解读,探讨其引起的原因,并给出解决该错误的具体方法以及相关的代码示例。1.错误3114的定义Oracle错误3114通

香香腐宅app为什么显示错误 香香腐宅app为什么显示错误 Mar 19, 2024 am 08:04 AM

显示错误是在香香腐宅app中可能会出现的问题,有些用户还不太清楚香香腐宅app为什么显示错误,可能是网络连接问题、后台程序过多、注册信息错误等问题,接下来就是小编为用户带来的app显示错误解决方法的介绍,感兴趣的用户快来一起看看吧!香香腐宅app为什么显示错误答:网络连接问题、后台程序过多、注册信息错误等详情介绍:1、【网络问题】解决方法:检查设备连接网络状态,重新连接或选择其他网络连接使用即可。2、【后台程序过多】解决方法:关闭正在运行的其他程序,释放系统,可以加快软件的运行。3、【注册信息错

Linux Oops:详解这一错误的含义 Linux Oops:详解这一错误的含义 Mar 21, 2024 am 09:06 AM

LinuxOops:详解这一错误的含义,需要具体代码示例什么是LinuxOops?在Linux系统中,"Oops"指的是内核出现了一个严重的错误导致系统崩溃的情况。Oops实际上是一种内核崩溃的机制,它会在发生致命错误时停止系统运行,并打印出相关的错误信息,以便开发者对问题进行诊断和修复。Oops通常发生在内核空间中,与用户空间的应用程序无关。当内核遇到

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:&lt

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:

脚本化诊断本机主机已停止工作[修复] 脚本化诊断本机主机已停止工作[修复] Mar 11, 2024 am 09:37 AM

在运行程序或进行故障排除时,如果出现指示脚本诊断本地主机已停止工作的错误消息,这可能是由于多种原因引起的。在Windows11/10PC上修复这个问题可能需要采取不同的方法,因为每台计算机的情况可能不同。一种常见的原因是脚本程序本身存在错误或损坏,导致其无法正常运行。解决这个问题的方法可能包括修复或重装脚本程序,或者尝试使用其他版本的脚本程序。另一种可能的原因是系统文件损坏或缺失,这可能会影响脚本的运行。在这种情况下,您可以尝试运行系统文件检查工具来修复任何受损的文件,或者进行系统恢复以恢复到之

See all articles