`

由于jsonp书写规范引起的兼容性问题

    博客分类:
  • js
 
阅读更多

先来看一段jsonp代码:

$.ajax({
	url : "http://isspre.cnsuning.com/iss/turingShelf/ajaxIsNormalLevel_ProductObj.lazyLoadSmart.html",
	async : false,
	cache : false,
	type  : "GET",
	dataType : "jsonp",
	jsonp : ProductObj.lazyLoadSmart,
	error : function(XMLHttpRequest, textStatus, errorThrown) {
		console.log(textStatus);
	},
	success : function(data) {
		console.log(data);
	}
});

(ProductObj.lazyLoadSmart是回调函数,此处省略)

这段代码在Firefox 40以下版本里执行时,请求状态一直为1(参考:http://guwq2014.iteye.com/blog/2271926) ,请求一直没有发送出去(注意:是请求根本没有发送出去,更不用说有返回了)。为什么会这样呢?

          原来这段jsonp代码书写不规范,导致低版本浏览器对这段代码的兼容性有问题。

规范的写法是:

$.ajax({
	url : "http://isspre.cnsuning.com/iss/turingShelf/ajaxIsNormalLevel_ProductObj.lazyLoadSmart.html",
	async : false,
	cache : false,
	type  : "GET",
	dataType : "jsonp",
	timeout : 5000,
	jsonp : "jsonpcallback",
        jsonpCallback : "ProductObj.lazyLoadSmart",
	error : function(XMLHttpRequest, textStatus, errorThrown) {
		console.log(textStatus);
	},
	success : function(data) {
		console.log(data);
	},
	complete:function(){
		
	}
});

 注意jsonp和jsonpcallback部分的写法,特别是jsonp和jsonpcallback参数的值必须加引号,否则执行会有问题。

分享到:
评论

相关推荐

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    JSONP三种方式解决跨域问题

    1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等

    json和jsonp数据格式返回

    - 安全性:由于JSONP依赖于动态执行用户提供的脚本,存在安全风险,如XSS攻击。 - 单向通信:JSONP只能由服务器主动调用客户端指定的函数,不能由客户端发起回调,因此不支持POST等请求方法。 - 无错误处理:如果...

    jsonp示例2则

    虽然JSONP在解决跨域问题上十分有效,但它也有一定的安全性和局限性。由于JSONP完全依赖于服务器返回的JavaScript代码,如果服务器被恶意篡改,可能会执行有害的脚本。此外,JSONP只能用于GET请求,无法处理POST、...

    跨域访问解决方法-jsonp

    为了解决这个问题,开发者通常采用JSONP(JSON with Padding)技术。本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一...

    js跨域jsonp的使用

    - 安全性较低:由于服务器直接返回可执行的JavaScript代码,如果服务器端返回恶意代码,可能会导致安全问题。 - 无错误处理:如果请求失败或者服务器返回的不是预期的函数调用格式,客户端无法捕获并处理这些错误。 ...

    Jsonp和java操作

    JSONP (JSON with Padding) 是一种跨域数据交互协议,主要应用于JavaScript...随着CORS(Cross-Origin Resource Sharing)的发展,JSONP的重要性逐渐降低,但考虑到兼容性和简单性,JSONP仍然在某些场景下被广泛使用。

    jsonp原理.txt

    2. **安全性问题**:JSONP容易受到XSS攻击,因为任何外部脚本都可以通过这种方式注入到页面中。 3. **依赖于服务器的支持**:服务器必须能够正确处理JSONP请求,并将数据包装成函数调用的形式返回。 #### 六、总结...

    jsonp的demo

    总结起来,JSONP是一种早期解决跨域问题的方法,尤其在需要兼容旧版浏览器或者无法使用CORS的情况下。然而,随着现代浏览器的发展,CORS已经成为更安全、更灵活的跨域解决方案。但理解JSONP的工作原理对于Web开发者...

    JSONP简单调用实例

    JSONP简单调用实例。ASP.NET和纯HTML。jQuery的$.ajax的调用!jsonP说白了,就是在json字符串外面包上一个:参数名称+左右括弧!只是包了个:jsonpCallback() 而已! 相关文章:...

    JSONP 实例

    尽管JSONP能解决跨域问题,但它也有局限性。例如,JSONP只支持GET请求,无法处理POST等其他HTTP方法。此外,由于数据是通过JavaScript函数调用返回的,没有标准的HTTP错误码,因此处理错误比较困难。最后,JSONP的...

    jsonp异步

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了HTML的`<script>`标签可以跨域请求资源的特性来...但JSONP由于其简单性和兼容性,仍然在某些场景下被广泛使用,特别是对于那些不支持CORS的旧版浏览器。

    纯servlet实现JSONP

    在这个纯Servlet实现JSONP的例子中,我们将深入理解JSONP的工作原理,以及如何在Java的Servlet环境中实现这一功能。 首先,让我们了解JSONP的基本概念。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    Ajax结合Jsonp实例

    为了解决这个问题,我们通常会采用Jsonp技术。 **2. Jsonp原理** Jsonp的基本原理是在HTML中创建一个`<script>`标签,它的`src`属性指向服务器提供的动态生成的JavaScript代码。服务器返回的JavaScript代码通常包含...

    后台php设置jsonp

    后台php设置jsonp

    学习总结:前端跨域请求的解决办法——JSONP

    2. **兼容性**:虽然JSONP在大部分现代浏览器中都能很好地工作,但仍然需要注意老版本浏览器的兼容性问题。 3. **超时处理**:由于JSONP无法进行错误处理,需要在前端设置适当的超时机制,防止请求长时间无响应。 ...

    Jsonp+asp.net

    JSONP (JSON with Padding) 是一种跨域数据交互协议,常用于解决JavaScript由于同源策略限制而无法直接访问不同源的HTTP请求的问题。在标题"Jsonp+asp.net"中,我们可以理解为这个项目或教程是关于如何在ASP.NET环境...

    解决跨域封装的jsonp.js文件

    解决跨域封装的jsonp

    jsonp源码以及jar包

    7. **安全性**:需要注意的是,JSONP存在一定的安全风险,因为它依赖于客户端执行服务器返回的代码。如果服务器端数据被恶意篡改,可能会导致跨站脚本攻击(XSS)。因此,在使用JSONP时,必须确保数据来源可信。 8. *...

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    - JSONP存在一定的安全性问题,因为它允许任意来源的脚本执行。因此,在使用JSONP时,服务器端应该对请求进行严格的验证,以防止恶意请求。 - 由于JSONP的本质是执行来自外部源的JavaScript代码,因此在生产环境中...

Global site tag (gtag.js) - Google Analytics