Jsonp的調用方式說明

Jsonp的調用本質上是利用的src的越過跨域的方式調用的，

如上的方式我們在自己的開發過程中應該都有使用過，在自己的網站上，調用其他網站的js腳本或者圖片，以上的調用過程其實也是跨域的，但是調用結果是完全沒有問題的；

Jsonp就是利用如上的方式完成調用的，

使用如上的方式在頁面初始化的時候，可以調用百度云的api，并且傳遞了三個參數

Name:1

Value:2

callback=callBackFunction

百度云的后端可以接收到如上三個參數，這樣就完成了跨域；

當然，前端需要編寫callbackFunction;

Function callbackFunction(json){

? ? ? ? ?//處理邏輯

}

?

?

那ajax是如何實現的呢？

?$.ajax({

? ? ? ? ? ? ?type: "post",

? ? ? ? ? ??

? ? ? ? ? ? ?data: {"username":'user',"password":'123123'},

? ? ? ? ? ? ?dataType: "jsonp",

? ? ? ? ? ? ?jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback)

? ? ? ? ? ? ?jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據

? ? ? ? ? ? ?success: function(data){ ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ?},

? ? ? ? ? ? ?error:function(e){

? ? ? ? ? ? ?}

? ? ? ? ?});

? ? })

?

?

參數說明：

①DataType:”jsonp”,當dataType指定為jsonp的時候，系統會自動創建類似于如下標簽

<script src=“” />這樣的標簽，然后將url及參數拼串，放入src屬性中,繼而解決跨域

?

②Jsonp:”callback”, 傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名，如果不指定，則默認傳遞callback

?

③jsonpCallback:“flightHandler”, 自定義的jsonp回調函數名稱，如果不指定ajax會自動生成一個函數名稱（類似于jquery_5648946541684656789()的方法名）然后ajax會自動創建一個這樣的function方法；

自動生成一個

? ? Function flightHandler(json){

? ? ? ?//success方法中的邏輯

}

沒有指定jsonpCallback的時候，創建一個如下的方法

? ? Function jquery_5648946541684656789 (json){

? ? ? ?//success方法中的邏輯

}

④其余參數和普通的ajax的參數是一致的；

?

所以，使用jsonp的時候，是可以不用傳遞如下兩個參數的；

Jsonp:”callback”；

jsonpCallback:“flightHandler”；

最終<script src=””/>中的src就會拼接成

?

以上就是ajax使用jsonp解決跨域的原理
后端操作

?

? ? @RequestMapping("/name123123")
? ? ?
? ? public String exchangeJson3(HttpServletRequest request, HttpServletResponse response) throws IOException {
? ? ?
? ? ? ? response.setContentType("text/plain");
? ? ?
? ? ? ? response.setHeader("Pragma", "No-cache");
? ? ?
? ? ? ? response.setHeader("Cache-Control", "no-cache");
? ? ?
? ? ? ? response.setDateHeader("Expires", 0);
? ? ?
? ? ? ? Map<String,String> map = new HashMap<String,String>();
? ? ?
? ? ? ? map.put("result", "content");
? ? ?
? ? ? ? PrintWriter out = response.getWriter();
? ? ?
? ? ? ? String jsonString=JSONObject.toJSONString(map);
? ? ?
? ? ? ? String jsonpCallback = request.getParameter("callback");//客戶端請求參數
? ? ?
? ? ? ? out.println(jsonpCallback+"("+jsonString+")");//返回jsonp格式數據
? ? ?
? ? ? ? out.flush();
? ? ?
? ? ? ? out.close();
? ? ?
? ? ? ? return null;
? ? ?
? ? ? ? }

如上標紅的兩行是關鍵

request.getParameter("callback");獲取方法名稱 ；Callback 是Jsonp:”callback”中指定的名稱，

若指定為Jsonp:”funciton”，則后端獲取方式改為request.getParameter("funciton ");

?

out.println(jsonpCallback+"("+jsonString+")");//返回jsonp格式數據，如上是拼接一個方法名，然后將放回的json串，以參數的形式放入到方法中，返回給前端，然后就能執行前端由ajax自動生成的jsonpCallback方法

?
調用總結

? ? 使用jsonp確實可以完成跨域的請求，只要指明datatype=”jsonp”,請求就可以發送到后端，這時候可以在后端將數據存儲到redis或者數據庫等進行處理
? ? 如果想要拿到后端的返回結果，則后端必須使用out.println(jsonpCallback+"("+jsonString+")");