DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS JSOP跨域請求實例詳解
JS JSOP跨域請求實例詳解
編輯:關於JavaScript     

在項目開發中遇到跨域的問題,一般都是通過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請求,就算我設置請求類型為post
dataType:"jsonp",//告訴jquery這是一個jsonp的數據,需要生成script標簽來加載js
data:{
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跨域請求實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved