jQuery.getJSON跨域訪問的正確使用方式(史上最傻瓜式解釋)


最近花了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跨域訪問

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM