jsonp使用筆記

jsonp使用筆記

參考：
【AngularJs】—JSONP跨域訪問數據傳輸
jsonP服務端代碼

---

1. jsonp簡介

JSONP的原理是通過<script>標籤發起一個GET請求來取代XHR請求。JSONP生成一個<script>標籤並插到DOM中，然後瀏覽器會接管並向src屬性所指向的地址發送請求。

當服務器返回請求時，響應結果會被包裝成一個JavaScript函數，並由該請求所對應的回調函數調用。

一句話就是利用script標籤繞過同源策略，獲得一個類似這樣的數據，jsonpcallback是頁面存在的回調方法，參數就是想得到的json。

2. 客戶端實現

• angularjs

$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) { 
    //當callback爲JSON_CALLBACK時，只會調用success
　　// 數據
});

• jquery

$.ajax({
    type: "get",
    async: false,
    url: "http://localhost:7001/wsltest/JsonpServlet",
    dataType: "jsonp",
    //jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認爲:callback)
    //jsonpCallback:"?",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動爲你處理數據
    success: function(json){
        console.log(json);
    },
    error: function(){
        alert('error');
    }
});

3. 服務端寫法

• Java:

//在返回數據時，把要返回的數據包裹到callback中
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
    jsonP = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
    out.write(");");
}

4.其他

• 雖然Jquery、angular等將jsonp封裝成ajax的形式，但兩者原理不同。
• jsonp只能使用get請求。
*