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技術要求進行改造（須要服務端配合）：

一、上面的訪問URL改成： "http://wavky.com/api/helloWorld?jsoncallback=?"  （即增長一個自定義參數 jsoncallback ）

二、getJSON方法調用方式：  

$.getJSON("http://wavky.com/api/helloWorld?jsoncallback=?", function(jsonObject){ // 對返回的json的處理代碼 }); 

    其中參數名 jsoncallback 可與服務端開發人員進行協商定義，參數值 ? 將由jQuery自動替換爲後面定義的匿名function回調函數的內部名稱

 

三、請求發出後，服務端接收到一個正常的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"})

 

四、前端頁面中jQuery接收到上面的返回後，調用js解釋器進行解析，執行callbackFunction233函數（即上面第2步調用 $.getJSON() 中第二個參數定義的function）並傳入參數值{"physicalAddress":"廣州市電信....."yourIP":"192.168.1.1"}，此後在function中經過變量 jsonObject 進行訪問操做，由此完成JSON跨域訪問