JavaScript 跨域：谈谈跨域之 JSONP

在 Web 开发中，后台开发人员应该会通常遇到这个问题：跨域，而使用 JSONP 就是其中解决办法之一，当然，还有其它解决方法，比如：window.name、window.postMessage、CORS、iframe 之类。本文只介绍 JSONP。

首先，看看维基关于 JSONP 定义。

 JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。

 由于同源策略，一般来说位于server1.example.com的网页无法与不是 server1.example.com的服务器沟通，而HTML的 <script>元素是一个例外。
  利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的 JSONP。用JSONP抓到的资料并不是
  JSON，而是任意的JavaScript，用 JavaScript直译器执行而不是用JSON解析器解析。

通过维基百科可知，JSONP( JSONP ) 简而言之：

         在 JavaScript 中，涉及到跨域操作，通常会报出错误（SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.）。

          打个比方，在一个页面中，其 URL 为: www.jj.com ，而该页面中有一个 iframe，而该 iframe Src 属性值为 www.jj1.com ，在获取 iframe DOM 及进行操作，就会抛出上面错误。而在页面文件( HTML+CSS+Javascript）中，其中 script 、img、iframe等标签的 src 属性便没有这个限制，可指定取任何域链接。而 JSONP 便是利用此原理。

　       关于 Javascript 判断跨域，就是简单通过 url ，如果请求 url 与当前页面 url 中 协议不同（http、https）、域名不同、端口不同，甚至一个为域名，另一个为域名解析后 IP 服务器地址，也将认定为跨域。

 JavaScript JSONP

     1 首先，在页面 www.jj.com/index.html 中 <Script type='text/javascript'></script> 标签中，自定义一个函数 function ，假设为 A，函数体逻辑根据需求而定。

     2 另外，再利用 <Script type='text/javascript' src='http://www.jj1.com/index.js'></script> src  属性无跨域限制，将 src 属性值设置为 跨域 url 地址。页面再加入该 index.js 文件，而 index.js 文件中，就是利用上一步页面中自定义的函数 A，而其内容可假设为 A()。

    3 页面通过步骤二 Script 标签远程加载的 js，而其内容为 A()，而在该页面也已经声明了 函数 A，从而就成功执行了函数，实现了页面跨域。

     

    jQuery  JSONP

    在知名 JavaScript 库：jQuery 中，同样对 JSONP 功能进行了封装，而其原理就是上方提到的 Script 标签 src 无跨域限制。不过，在 jQuery 中，因为该内容封装在 $.ajax(参数) 方法，而用户只需设置其参数（对象类型）的 datatype：”jsonp“、jsonpCallback："函数名" (此处，若不设置，jQuery 内部将生成拼接成随机字符串)，便可实现跨域。

此处，强调一点，虽然 jQuery 将 JSONP 功能封装在 $.ajax 中，而该功能实现实际与 ajax 没有任何关系，而完全是利用 script 标签 src 属性无跨域限制。

　接下来，看看在 www.jianke.com 购物车功能实现中，便利用到了 $.ajax 中 JSONP 功能。

一 javascript 代码分析

二 http 协议请求分析

     此外，本篇文章只大概讲了一下 JSONP，后续将会详细分析 $.ajax 实现原理。如有错误，烦请指正。

参考资料：http://www.cnblogs.com/twobin/p/3395086.html

https://zh.wikipedia.org/wiki/JSONP