LMLPHP后院

Ajax跨域原理JQuery之Jsonp使用剖析技术

maybe yes 发表于 2014-12-27 18:21

有关Ajax技术,对于我们这些经常在互联网打滚的人来说,已经是再熟悉不过了。关于Ajax原理,之前我也研究过,这里顺带解说一番。JavaScript是一种基于事件的单线程执行脚本语言,要实现Ajax通信,必须先实例化 XMLHttpRequest 对象,然后对该对象的 onreadystatechange 注册事件,然后再执行 open 和 send 方法。一般来说,实现简单的Ajax请求,我们只需要在 readyState 等于 4(请求完成) 之后再进行后续的状态码判断并处理。对于IE浏览器,实现起来稍有不同,IE系列是使用 ActiveXObject 控件来实现异步请求的,不同版本的IE浏览器在写法上稍有不同,因此完整的Ajax类需要对IE系列浏览器做个判断,不过IE11之后已经不再是IE内核了,此是后话。

Ajax技术是遵循同源策略的,所有浏览器都是如此。试想,如果可以随意请求别的网站的资源,互联网不就乱套了吗。通过安装浏览器插件使用 background 技术也可以实现跨域并与外部进行通信,著名的360网页抢票插件就是这么实现的。在现实的需求中,经常会需要跨域,Ajax不可以,HTML的一些其他的标签,比如 IMG, LINK, SCRIPT等都是可以的,万维网的设计者们在这一点上还是放松了,不过这样确实带来不少方便。著名的JSONP技术,就是通过SCRIPT标签来实现请求外部资源,网上很多的文章和帖子都说成了“Ajax跨域”,其实这样已经不再是Ajax技术了。

Jsonp虽然能够很方便的请求外部资源,实现跨域与服务端通信,但也有所限制的。这种限制要求服务端返回的内容必须是合法的 JavaScript 代码,一般都需要配合客户端的要求返回相应的回调函数。之前本人每次使用Jsonp实现跨域,都是动态的创建SCRIPT标签,然后发出请求,虽然知道JQuery也有提供这样的功能,之前感觉使用起来很是麻烦。最近使用JQuery的Ajax方法,才发现它封装的比较好,JQuery每次发给服务端的函数名都是唯一的,这点确实避免了复杂环境下容易出错的问题

附上使用JQuery实现Jsonp代码示例,下面的代码每次请求都是以 jsonpcallback 作为参数名发送一个类似于“jQuery21102093567821251967_1419672602306”这样的唯一的函数名给服务端,服务端以这个名称返回回调函数和数据

<script>
$.ajax({
	url:'url',
	dataType:"jsonp",
	jsonp:"jsonpcallback",
	success:function(data){
		custom_callback(data);
	}
});
</script>

相关文章
2021-06-20 11:30:12 1624159812 0.026579