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

我怕爱的太早我们不能终老 提交于 2019-12-01 02:39:30

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

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

原文链接 : http://blog.lmlphp.com/archives/49  来自 : LMLPHP后院

有 关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>

阅(33)评(0)查看评论


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!