最近花了2天時間完整的看了一遍 jQuery 的API,其中 $.getJSON(url[, data][, callback]) 方法的跨域訪問解釋真心看的一頭霧水,大家可以從這里感受一下:
http://hemin.cn/jq/jQuery.getJSON.html
http://www.w3school.com.cn/jquery/ajax_getjson.asp
跨域訪問原理解釋
由於JSON使用一種叫同源策略的安全訪問模式,無論使用jQuery.get()、jQuery.ajax()還是$.getJSON()等方法,直接訪問其他網站接口(即跨域訪問)的請求都會被瀏覽器進行默認攔截(實際上對普通頁面的訪問也會被攔截),但是<script>標簽的資源訪問請求則是允許跨域的,因此為了適應跨網站訪問開放API接口數據的需求,誕生了利用<script>訪問外網JSON數據接口的JSONP技術。
操作方式
假設需要訪問的外網JSON數據接口URL為:http://wavky.com/api/helloWorld
取得的JSON數據格式為:
{"physicalAddress":"廣州市電信192.168.1.1","status":"OK!!!","timestamp":"A.D. 2014-12-23 21:58:51:921","yourIP":"192.168.1.1"}
按照JSONP技術要求進行改造(需要服務端配合):
1、上面的訪問URL改為: "http://wavky.com/api/helloWorld?jsoncallback=?" (即增加一個自定義參數 jsoncallback )
2、getJSON方法調用方式:
$.getJSON("http://wavky.com/api/helloWorld?jsoncallback=?", function(jsonObject){ // 對返回的json的處理代碼 });
其中參數名 jsoncallback 可與服務端開發人員進行協商定義,參數值 ? 將由jQuery自動替換為后面定義的匿名function回調函數的內部名稱
3、請求發出后,服務端接收到一個正常的JSON接口訪問請求,包含一個參數 jsoncallback ,參數值為 callbackFunction233(假設值)
利用參數值 callbackFunction233 對正常返回的JSON字符串進行二次包裹,格式如下(注意包含小括號):
callbackFunction233(原json輸出字符串)
如:
callbackFunction233({"physicalAddress":"廣州市電信192.168.1.1","status":"OK!!!","timestamp":"A.D. 2014-12-23 21:58:51:921","yourIP":"192.168.1.1"})
4、前端頁面中jQuery接收到上面的返回后,調用js解釋器進行解析,執行callbackFunction233函數(即上面第2步調用 $.getJSON() 中第二個參數定義的function)並傳入參數值{"physicalAddress":"廣州市電信....."yourIP":"192.168.1.1"},此后在function中通過變量 jsonObject 進行訪問操作,由此完成JSON跨域訪問