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

最新推荐文章于 2024-06-20 20:55:24 发布

原创最新推荐文章于 2024-06-20 20:55:24 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

14 篇文章

订阅专栏

本文详细解析了一段不规范的JSONP代码在Firefox40以下版本中导致请求状态始终为1的原因，并提供了正确的JSONP书写规范，确保请求能够正常发送并接收响应。

先来看一段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参数的值必须加引号，否则执行会有问题。