|
|
出于安全的考慮，如果你要從www.a.com通過(guò)Ajax來(lái)請(qǐng)求另外一個(gè)網(wǎng)站www.b.com的內(nèi)容，瀏覽器是不允許你這樣做的（不理解這里的安全是指什么？想想如果沒(méi)有這個(gè)限制的話，黑客可以做些什么）。那什么樣的情況下算是跨域？域名不同那當(dāng)然算是跨域了，例如a.com向b.com發(fā)送請(qǐng)求，這當(dāng)然就是跨域了，不允許的。不過(guò)子域名不同（例如sub.a.com向www.a.com發(fā)送請(qǐng)求）甚至是同域名不同端口（例如a.com:80向a.com:8080）也算是跨域的。
下面演示一個(gè)跨域的例子：
復(fù)制代碼 代碼如下:
<script type="text/Javascript" >
//jQuery代碼
$("#btnCrossDomainRequest").click(function(){
$.get('http://www.jb51.NET', function(data){
alert('success');
});
});
</script>
（在IE8下提示沒(méi)有權(quán)限，在FF3.5.5和Google瀏覽器下都沒(méi)有提示，汗~我記得FF以前的版本是有提示的。。IE6下應(yīng)該會(huì)彈窗提示(沒(méi)記錯(cuò)的話)）
跨域AJAX請(qǐng)求的解決方案
在AJAX應(yīng)用環(huán)境中，由于安全的原因，瀏覽器不允許XMLHttpRequest組件請(qǐng)求跨域資源。在很多情況下，這個(gè)限制給我來(lái)帶來(lái)的諸多不便。很多同行，研究了各種各樣的解決方案：
1. 通過(guò)修改document.domain和隱藏的IFrame來(lái)實(shí)現(xiàn)跨域請(qǐng)求。這種方案可能是最簡(jiǎn)單的一種跨域請(qǐng)求的方案，但是它同樣是一種限制最大的方案。首先，它只能實(shí)現(xiàn)在同一個(gè)頂級(jí)域名下的跨域請(qǐng)求；另外，當(dāng)在一個(gè)頁(yè)面中還包含有其它的IFrame時(shí)，可能還會(huì)產(chǎn)生安全性異常，拒絕訪問(wèn)。
2.通過(guò)請(qǐng)求當(dāng)前域的代理，由服務(wù)器代理去訪問(wèn)另一個(gè)域的資源。XMLHttpRequest通過(guò)請(qǐng)求本域內(nèi)的一個(gè)服務(wù)器資源，將要訪問(wèn)的目標(biāo)資源提供給服務(wù)器，交由服務(wù)器去代理訪問(wèn)目標(biāo)資源。這種方案，可以實(shí)現(xiàn)完全的跨域訪問(wèn)，但是開(kāi)發(fā)，請(qǐng)求過(guò)程的消費(fèi)會(huì)比較大。
3. 通過(guò)HTML中可以請(qǐng)求跨域資源的標(biāo)簽引用來(lái)達(dá)到目的，比如Image,Script,LINK這些標(biāo)簽。在這些標(biāo)簽中，Script無(wú)疑是最合適的。在請(qǐng)求每一個(gè)腳本資源時(shí)，瀏覽器都會(huì)去解析并運(yùn)行腳本文件內(nèi)定義的函數(shù)，或需要馬上執(zhí)行的JavaScript代碼，我們可以通過(guò)服務(wù)器返回一段腳本或 JSON對(duì)象，在瀏覽器解析執(zhí)行，從而達(dá)到跨域請(qǐng)求的目的。使用script標(biāo)簽來(lái)實(shí)現(xiàn)跨域請(qǐng)求，只能使用get方法請(qǐng)求服務(wù)器資源。
第一個(gè)解決方案需要根域名是相同的，例如 a.domain.com和 b.domain.com。整個(gè)解決方案大概如下圖所示：
第二個(gè)解決方案就是在服務(wù)器端通過(guò)WebClient(或者其他)的類來(lái)請(qǐng)求跨域的內(nèi)容，這里需要注意的一點(diǎn)是，如果你要將cookies信息也包含在WebClient的請(qǐng)求中的話，你需要手動(dòng)的去將Cookies信息加到WebClient中去。
第三個(gè)解決方案就和我們下面需要說(shuō)道的JSONP有關(guān)的。
JSONP
JSONP全稱應(yīng)該是“JSON with padding”吧，它正是利用了<script />可以跨域請(qǐng)求的特性。簡(jiǎn)單來(lái)說(shuō)JSONP就是在客戶端將要用來(lái)處理請(qǐng)求結(jié)果的函數(shù)名作為參數(shù)傳遞給服務(wù)器端，然服務(wù)器端將請(qǐng)求結(jié)果數(shù)據(jù)作為參數(shù)包裝在這個(gè)函數(shù)中并返回給客戶端執(zhí)行。有點(diǎn)抽象？那么直接看圖吧：
下面來(lái)個(gè)實(shí)例講解一下。這個(gè)實(shí)例就是為我們的博文自動(dòng)生成一個(gè)短址的url，為了墻內(nèi)的朋友方便，我們就直接使用國(guó)內(nèi)的http://s8.hk提供的短址服務(wù)(API地址)。
我們?cè)囅?
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
$("#shortIt").click(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
$.get(c_url,function(data){
alert(data);
})
});
</script>
測(cè)試下，什么？不可以？肯定不可以啦，因?yàn)槭强缬蚵铮晕覀冃枰?lt;script />標(biāo)簽可以跨域請(qǐng)求的特性：
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
function alertShortUrl(url){
alert(url);
}
$("#shortItByJSONP").click(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
//注意下面將函數(shù)名‘a(chǎn)lertShortUrl'傳進(jìn)去咯
c_url += '&jsonp=alertShortUrl'
//生成一個(gè)<script />標(biāo)簽并添加到<head />中
script = $('<script type="text/Javascript" />')
.attr('src', c_url);
//這里為什么要用appendChild？
//因?yàn)閖Query的append方法對(duì)<script/>已經(jīng)做了處理
//你也可以用$('head').append(script);
//這里不用只是為了讓你看得更清楚點(diǎn)而已。
$('head')[0].appendChild(script[0]);
});
</script>
哈哈，再點(diǎn)點(diǎn)測(cè)試按鈕看看？很好，成功了。
其實(shí)不用這么麻煩，因?yàn)閖Query自從1.2版以后就已經(jīng)添加了對(duì)JSONP的支持，你只需要給一個(gè)問(wèn)號(hào)作為占位符就可以了，所以我們上面的代碼可以寫(xiě)成：
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
$("#shortItByjQueryJSONP").click(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
//注意下面只需一個(gè)問(wèn)號(hào)，不用具體的函數(shù)名
c_url += '&jsonp=?'
//注意是getJSON 哦
$.getJSON(c_url, function(data){
alert(data);
});
});
</script>
哈哈，是不是很簡(jiǎn)便呢？下面就用這個(gè)實(shí)現(xiàn)為我們的文章添加自動(dòng)縮短網(wǎng)址的功能吧：
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
$(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
//注意下面只需一個(gè)問(wèn)號(hào)，不用具體的函數(shù)名
c_url += '&jsonp=?'
$.getJSON(c_url, function(data){
//這里要這么處理、放到哪里就看你自己喜歡咯.而且這還和你博客使用的模板有關(guān)的哦
$("<div>本文短址：</div>").css("font-weight", "normal")
.css("font-size", "12px")
.append($("<a>"+data+"</a>").attr("href", data))
.appendTo(".post .postTitle");
});
});
</script>
OK，打完收工。Enjoy it!
再多說(shuō)幾句，在twitter上很多還是用bit.ly、j.mp等國(guó)外的短址服務(wù)，墻得厲害，每次看不到很郁悶。盡量不要用那些墻得厲害的吧。
JavaScript技術(shù)：AJAX的跨域與JSONP(為文章自動(dòng)添加短址的功能)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
