跨域之一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請求隻知道成功，不知道失敗。