站長(zhǎng)交易（http://jy.chinaz.com）幫站長(zhǎng)賺錢 虛擬主機(jī)評(píng)測(cè)+IDC導(dǎo)航=IDC123.COM

簡(jiǎn)介

符合Web2.0特征的眾多網(wǎng)站一個(gè)明顯的特點(diǎn)就是采用Ajax。Ajax提供了在后臺(tái)提交請(qǐng)求訪問數(shù)據(jù)的功能。其實(shí)現(xiàn)主要使用的是XMLHttpRequest函數(shù)，這個(gè)函數(shù)允許客戶端的Javascript
發(fā)送到服務(wù)器端的HTTP請(qǐng)求并獲得返回?cái)?shù)據(jù)。Ajax同時(shí)也是目前眾多的Mashup背后的驅(qū)動(dòng)力量，他們都利用Ajax來聚合不同來源的信息。

理解同源策略的限制
同源策略是指阻止代碼獲得或者更改從另一個(gè)域名下獲得的文件或者信息。也就是說我們的請(qǐng)求地址必須和當(dāng)前網(wǎng)站的地指相同。同源策略通過隔離來實(shí)現(xiàn)對(duì)資源的保護(hù)。這個(gè)策略的歷史非常悠久
從Netscape Navigator 2.0時(shí)代就開始了。

解決這個(gè)限制的一個(gè)相對(duì)簡(jiǎn)單的辦法就是在服務(wù)器端發(fā)送請(qǐng)求，服務(wù)器充當(dāng)一個(gè)到達(dá)第三方資源的代理中繼。雖然是用廣泛但是這個(gè)方法卻不夠靈活。
另一個(gè)辦法就是使用框架(frames)，將第三方站點(diǎn)的資源包含進(jìn)來，但是包含進(jìn)來的資源同樣要受到同源策略的限制。

有一個(gè)很巧妙的辦法就是在頁(yè)面中使用動(dòng)態(tài)代碼元素，代碼的源指向服務(wù)地址并在自己的代碼中加載數(shù)據(jù)。當(dāng)這些代碼加載執(zhí)行的時(shí)候，同源策略就不會(huì)起到限制。但是如果代碼試圖下載文件的時(shí)候
執(zhí)行還是會(huì)失敗，幸運(yùn)的是，我們可以使用JSON(JavaScript Object Notation)來改進(jìn)這個(gè)應(yīng)用。

JSON和JSONP
與XML相比，JSON是一個(gè)輕量級(jí)的數(shù)據(jù)交換格式。JSON對(duì)于JavaScript開發(fā)人員充滿魅力的原因在于JSON本身就是Javascript中的對(duì)象。
例如一個(gè)ticker對(duì)象

var ticker = {symbol:'IBM',price:100}
而JSON串就是 {symbol:'IBM',price:100}
這樣我們就可以在函數(shù)的參數(shù)中傳遞JSON數(shù)據(jù)。我們很容易掌握在函數(shù)中使用動(dòng)態(tài)的JSON參數(shù)數(shù)據(jù)，但是我們的目的并不是這個(gè)。
通過使我們的函數(shù)能夠加載動(dòng)態(tài)的JSON數(shù)據(jù)，我們就能夠處理動(dòng)態(tài)的數(shù)據(jù)，這項(xiàng)技術(shù)叫做 Dynamic Javascript Insertion。
我們看下面的例子

index.html中
<script type="text/javascript">
function showPrice(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
}

var url = "ticker.js"; //Outer JS URL
var script = document.createElement('script');
script.setAttribute('src', url);

//load javascript
document.getElementsByTagName('head')[0].appendChild(script);
</script>
ticker.js中
var data = {symbol:'IBM', price:100};
showPrice(data);

上面的代碼通過動(dòng)態(tài)加入Javascript代碼，來執(zhí)行函數(shù)加載數(shù)據(jù)。

正如之前提到過的，同源策略對(duì)于動(dòng)態(tài)插入的代碼不適用。也就是你可以從不同的域中加載代碼，來執(zhí)行在他們代碼中的JSON數(shù)據(jù)。
這就是JSONP(JSON with Padding)。注意，使用這種方法時(shí)，你必須在頁(yè)面中定義回調(diào)函數(shù)，就像上例中的showPrice一樣。

我們通常所說的JSONP服務(wù)(遠(yuǎn)程JSON服務(wù))，實(shí)際上就是一種擴(kuò)展的支持在用戶定義函數(shù)中包含返回?cái)?shù)據(jù)的能力。這種方法依賴于必須接受一個(gè)回調(diào)函數(shù)的名字作為參數(shù)。
然后執(zhí)行這個(gè)函數(shù)，處理JSON數(shù)據(jù)，并顯示在客戶頁(yè)面上。

JQuery的JSONP支持

從JQery 1.2以后，就開始支持JSONP的調(diào)用。在另外的一個(gè)域名中指定好回調(diào)函數(shù)名稱，你就可以用下面的形式來就加載JSON數(shù)據(jù)。
url?callback=?

示例：
jQuery.getJSON(url + "&callbak=?", function(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
});

jquery會(huì)在window對(duì)象中加載一個(gè)全局的函數(shù)，當(dāng)代碼插入時(shí)函數(shù)執(zhí)行，執(zhí)行完畢后就會(huì)被移除。同時(shí)jquery還對(duì)非跨域的請(qǐng)求進(jìn)行了優(yōu)化，如果這個(gè)請(qǐng)求是在同一個(gè)域名下
那么他就會(huì)像正常的Ajax請(qǐng)求一樣工作。

上例中我們?cè)趧?dòng)態(tài)插入到頁(yè)面的代碼中使用了靜態(tài)的json數(shù)據(jù)，雖然完成了依次JSONP返回，但仍不是JSONP服務(wù)，因?yàn)椴恢С衷赨RL中定義回調(diào)函數(shù)名稱。下面是一個(gè)將其變成JSONP服務(wù)的一個(gè)方法
服務(wù)器端使用PHP。

首先我們來定義接口的規(guī)范，就像這樣：http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是請(qǐng)求條件，callback是回調(diào)函數(shù)名稱。

在頁(yè)面文件中，我們使用JQuery的支持：

//JQuery JSONP Support
var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";
jQuery.getJSON(url, function(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
});

在suggest.php中

$jsondata = "{symbol:'IBM', price:120}";
echo $_GET['callback'].'('.$jsondata.')';

現(xiàn)在，如果我們想制作一些mashup，或者將第三方的資源整合到一個(gè)頁(yè)面中，我們就很容易想到JSONP的解決方法了。

現(xiàn)有的JSONP服務(wù)

既然我們已經(jīng)知道如何使用JSONP，那么我們也就可以使用一些現(xiàn)有的JSONP服務(wù)了，下面是一些例子：

Digg API:http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
Geonames API:http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

注意：

JSONP是一個(gè)非常強(qiáng)大的構(gòu)建mashp的方法，可是不是一個(gè)解決跨域訪問問題的萬能藥。它也有一些缺點(diǎn)

第一也是最重要的：JSONP不提供錯(cuò)誤處理。如果動(dòng)態(tài)插入的代碼正常運(yùn)行，你可以得到返回，但是如果失敗了，那么什么都不會(huì)發(fā)生。你無法獲得一個(gè)404的錯(cuò)誤，也不能取消這個(gè)請(qǐng)求

另外一個(gè)重要的缺點(diǎn)是如果使用了不信任的服務(wù)會(huì)造成很大的安全隱患。