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)查看评论