json和jsonp

1. 場景

在拉京東城市選擇的基礎數據時候，遇到被服務器拒絕的狀況，也就是ajax跨域問題

2. json和jsonp

說的直白一點，在咱們作ajax異步的一些功能的時候，必定會或多或少的遇到兩個問題，（一、數據的交換。二、跨域問題）

JSONP的最基本的原理是：動態添加一個

<script type="text/javascript"> function jsonpCallback(result) { alert(result.msg); } </script> <script type="text/javascript" src=" http://crossdomain.com/jsonServerResponse?jsonp= jsonpCallback"></script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

從紅色的地方能夠看出，兩個名字要一直，不過通常採用callback而後後面加一個「？」此時jquery會自動生成一個函數名，這樣能夠作到發送不少請求的時候，並不會互相影響。 
同源策略 ：即JavaScript只能訪問與包含它的文檔在同一域下的內容。jsonp能夠跨越同源策略，當咱們使用了jsonp，將會是另一種協議通訊了。 
JSONP的優勢是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。 
JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

3.使用方法

$.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?", function(json){ if(json.屬性名==值){ // 執行代碼 } }); $.ajax({ async:false, url: http://跨域的dns/document!searchJSONResult.action, type:"GET", dataType:'jsonp',

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

一般狀況通常是這兩種使用方法，在跨域問題上，很是簡單。