JS JSOP跨域請求執行個體詳解，jsjsop

JS JSOP跨域請求執行個體詳解，jsjsop

在項目開發中遇到跨域的問題，一般都是通過JSONP來解決的。但是JSONP到底是個什麼東西呢，實現的原理又是什麼呢。在項目的空閑時間可以好好的來研究一下了。

1、什麼是JSONP？

要瞭解JSONP，不得不提一下JSON，那麼什麼是JSON？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

2、JSONP有什麼用？

由於同源策略的限制，XmlHttpRequest只允許請求當前源（網域名稱、協議、連接埠）的資源，為了實現跨域請求，可以通過script標籤實現跨域請求，然後在服務端輸出JSON資料並執行回呼函數，從而解決了跨域的資料請求。

JSONP的產生

1.眾所周知，Ajax請求資源受同域的限制，不管是靜態資源，動態網頁面，web服務都不行

2.同時我們發現web頁面上調用JS檔案時則不受跨域的影響（不僅如此，我們還發現凡是擁有‘src'這個屬性的標籤都擁有跨域的能力，比如<script>、<img>、<iframe>等）

3.可想而知，當前階段如果想通過web端（ActiveX控制項、伺服器代理、HTML5的websocket等方式不算）跨域訪問資料就只有一種可能，那就是服務端把資料裝進JS格式的檔案裡，供用戶端調用和處理

4.資料的傳輸，我們知道一種叫JSON的純字元資料格式可以簡潔的描述複雜的資料結構，而且還被JS原生支援，在用戶端可以很容易的處理這種格式的資料

5.這樣解決方案的一目瞭然了，web端通過和呼叫指令碼一模一樣的方式，來調用跨網域服務器上動態產生的JS檔案。伺服器之所以要動態產生JS檔案，目的在於擷取用戶端的回呼函數名並把用戶端需要的資料通過JSON（也可以是純字串）的格式傳進去

6.在用戶端對JS檔案調用成功後，也就擷取到了回呼函數裡的參數，剩下的就是對資料的處理了，這種方法和Ajax看起來很像，但是卻並不一樣（Jquery將JSONP和Ajax封裝在一起，如果不瞭解的人會混為一談）

7.為了便於用戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback參數給服務端，然後服務端返回資料時會將這個callback參數作為函數名來包裹住JSON資料，這樣用戶端就可以隨意定製自己的函數來自動處理返回資料了

好了，不知道大家對JSONP理解了沒有，如果沒有的話，鄙人就出來總結一下，說的不好，不要打我。

其實原理就是，用戶端請求一個連結，並把需要的參數加上，callback表示是一個JSONP的請求（這個前端和後台可以自己統一），後台解析這個請求連結，發現是一個JSONP的請求，然後產生一個調用方法，並根據請求參數動態產生一個字串（可以是JSON,也可以是純字串）塞進調用方法裡，這樣用戶端就可以那到資料並做後續的處理了。

說了這麼多，不上代碼不是我的風格啊，上代碼。。

function test(data){console.log(data)}var url="http://www.x.com/test?a=1&callback=test"//向x.com/test傳遞參數a值為1，並告訴他要調用的函數名是“test”//後台攔截到callback，知道要產生一個調用方法，方法名是test，並傳遞參數，幕後處理產生如下（資料虛構）test("aaaaaa")test({a:1,b:2})//然後前端通過script標籤去訪問並執行，上面的東西var script = document.createElement('script');script.setAttribute('src', url);// 把script標籤加入head，此時調用開始document.getElementsByTagName('head')[0].appendChild(script); //然後就會調用頁面的test方法，這就是jsonp的實現原理。

關於Jquery中JSONP的現實

$.ajax({type: "GET",url: "http://x.d.cn/asych/adv.html?loc=8&callBack=?",//告訴後台這是一個jsonp請求，需要調用什麼方法，如果為“？”，jq會幫你自動產生（如果使用jq一般都設定為“？”，這樣才能在成功時觸發jq的回呼函數）type:"post",//jsonp只能發get請求，就算我佈建要求類型為postdataType:"jsonp",//告訴jquery這是一個jsonp的資料，需要產生script標籤來載入jsdata:{a:"1"},/*success: function (data) {//成功後jq會執行的方法（如果callback參數為“？”）$("body").append(data);},*/error: function (XMLHttpRequest, textStatus, errorThrown) {//alert(errorThrown);}}).done(function(data){$("body").append(data);});

看了上面的代碼和注釋，相信大家都明白了吧，雖然Jquery將JSONP封裝到Ajax中，但是本質上是不同的。

Ajax的核心是通過XmlHttpRequest擷取非本頁內容，而JSONP的核心則是動態添加<script>標籤來調用伺服器提供的js指令碼。

所以Ajax和JSONP的區別不在於是否跨域，Ajax通過服務端代理一樣可以實現跨域，JSONP本身也不排斥同域資料的擷取。

還有上面說到過，JSONP和Ajax的資料格式不一定要是JSON，也可以是純字串。

總而言之，JSONP不是Ajax的一個子集，即使Jquery將JSONP封裝進Ajax，也不能改變這一點。

以上所述是小編給大家介紹的JS JSOP跨域請求執行個體詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！