1、一個(gè)眾所周知的問(wèn)題艺谆,Ajax直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問(wèn)的問(wèn)題,甭管你是靜態(tài)頁(yè)面拜英、動(dòng)態(tài)網(wǎng)頁(yè)静汤、web服務(wù)、WCF居凶,只要是跨域請(qǐng)求虫给,一律不準(zhǔn);
2侠碧、不過(guò)我們又發(fā)現(xiàn)抹估,Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響(不僅如此,我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力弄兜,比如<script>药蜻、<img>、<iframe>)替饿;
3语泽、于是可以判斷,當(dāng)前階段如果想通過(guò)純web端(ActiveX控件视卢、服務(wù)端代理踱卵、屬于未來(lái)的HTML5之Websocket等方式不算)跨域訪問(wèn)數(shù)據(jù)就只有一種可能,那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里据过,供客戶端調(diào)用和進(jìn)一步處理惋砂;
4、恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)绳锅,更妙的是JSON還被js原生支持西饵,所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù);
5鳞芙、這樣子解決方案就呼之欲出了罗标,web客戶端通過(guò)與調(diào)用腳本一模一樣的方式庸队,來(lái)調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件(一般以JSON為后綴),顯而易見(jiàn)闯割,服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件彻消,目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。
6宙拉、客戶端在對(duì)JSON文件調(diào)用成功之后宾尚,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了谢澈,這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來(lái)非常像AJAX煌贴,但其實(shí)并不一樣。
7锥忿、為了便于客戶端使用數(shù)據(jù)牛郑,逐漸形成了一種非正式傳輸協(xié)議,人們把它稱作JSONP敬鬓,該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端淹朋,然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了钉答。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查詢結(jié)果后的回調(diào)函數(shù)
var flightHandler = function(data){
alert('你查詢的航班結(jié)果是:票價(jià) ' + data.price + ' 元础芍,' + '余票 ' + data.tickets + ' 張。');
};
// 提供jsonp服務(wù)的url地址(不管是什么類型的地址数尿,最終生成的返回值都是一段javascript代碼)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 創(chuàng)建script標(biāo)簽仑性,設(shè)置其屬性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script標(biāo)簽加入head,此時(shí)調(diào)用開(kāi)始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
但是要注意JSONP只支持GET請(qǐng)求右蹦,不支持POST請(qǐng)求诊杆。