跨域之一JSONP

一、跨域请求限制：同源策略

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

本段摘自http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/index.html

二、JSONP解决方案

浏览器准许加载不同域的JS，即<script src=""/>中src可以指向其他域中的js地址，JSONP就是利用这一点实现跨越请求。

代码片段1: http://www.jsonp.client.com/home页面中包含下面代码（注意script标签的scr属性值的域名和本域名不同）

<script type="text/javascript">
            function showPrice(data) {
                alert("Symbol: " + data);
            }
        </script>
        <script src="http://www.jsonp.service.com/JsonpWebService/home/JsonpAction?callback=showPrice"></script>
           

代码片段2： http://www.jsonp.service.com/jsonpwebservice/home/index页面是个JSONP服务（关于如何写JSONP服务暂时先不管）

public void JsonpAction()
        {
            string callback = this.Request["callback"];

            this.Response.Write(string.Format("{0}(\'{1}\')", callback, "helloWorld"));
        }
           

这样就基本实现了跨域请求了。

三、JSONP原理

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

本段摘自：http://www.nowamagic.net/librarys/veda/detail/224

四、如何写JSONP Web服务

代码片段2就是个JSONP web服务。就是返回回调方法的调用格式：callbackFunc(业务逻辑数据)。

五、JSONP的优缺点

缺点：只支持GET请求（本质造就了这个不是缺点的缺点）

六、JQuery与JSONP 

JQuery的Ajax和getJSON方法都对JSONP支持。getJSON是对Ajax方法的缩写，这里只讨论Ajax方法。

6.1 跟JSONP相关的参数

 $.ajax({

                    url: url, // 

                    async: false,

                    data: previewItem,

                    dataType: "jsonp",

                    jsonpCallback: "showPrice",

                    jsonp: '回调方法在QueryString中的别名',

                    crossDomain:true,

                    success: function (data) {

                        console.log(data);

                    }

                });

6.1.1： URL

URL中一般包含"callback=?"的QueryString，JQuery会自动生成个callback函数，并把生成的函数名作为URL的参数传给WebServer。

6.1.2： async

JQuery只支持异步的JSONP 请求，会忽略async的值

6.1.3：jsonp

替换URL回调方法QueryString的Name，比如：？callback=callbackFunc 替换成 ？jsonp=callbackFunc

6.1.4: jsonpCallback

指定JSONP的回调方法名字

6.1.5：success

JSONP 请求成功后会执行success方法，参数为 后台传递的数据。如果指定了jsonpCallback，则会先执行jsonpCallback，再执行success。

Ajax其他的Filter方法如error，beforeSend等都会被忽略的，只有在成功时调用success方法，所以JSONP请求只知道成功，不知道失败。