使用jsonp解決跨域請求
由于同源策略的限制,在一個源下只允許請求當(dāng)前源(域名、協(xié)議、端口)的資源。如果要在當(dāng)前源下請求另一個源的數(shù)據(jù),就是跨域請求了.最近碰到這個問題,上網(wǎng)找了一些資料發(fā)現(xiàn)用JSONP可以解決跨域請求的問題,特此記錄下來.JSONP是一個非官方的協(xié)議,它允許在服務(wù)器端集成script tags返回至客戶端,通過javascript callback的形式實(shí)現(xiàn)跨域訪問。也就是我們可以通過客戶端使用html的script標(biāo)記來跨域請求服務(wù)端,服務(wù)端響應(yīng)中返回一段script代碼,來回調(diào)客戶端的一個javascript函數(shù).可以直接使用JSON傳遞javascript對象。
具體使用方式是這樣的:
假定現(xiàn)在有兩個域:
域A:client.com
域B:server.com
現(xiàn)在client.com需要訪問server.com獲得一些數(shù)據(jù),就可在client.com的頁面中嵌入
下面這樣的代碼:
<script type="text/javascript">
// 服務(wù)端返回數(shù)據(jù)的回調(diào)函數(shù)
function callbackFun(result) {
alert(result);
}
// 創(chuàng)建一個script標(biāo)簽
var requestData = document.createElement("script") ;
requestData.type = "text/javascript";
// src請求指向server端
requestData.src = "http://server.com?param1=xxx¶m2=xxx";
if (heads.length) {
heads[0].appendChild(requestData);
} else {
document.documentElement.appendChild(requestData);
}
</script>
// 服務(wù)端返回數(shù)據(jù)的回調(diào)函數(shù)
function callbackFun(result) {
alert(result);
}
// 創(chuàng)建一個script標(biāo)簽
var requestData = document.createElement("script") ;
requestData.type = "text/javascript";
// src請求指向server端
requestData.src = "http://server.com?param1=xxx¶m2=xxx";
if (heads.length) {
heads[0].appendChild(requestData);
} else {
document.documentElement.appendChild(requestData);
}
</script>
上述src的請求在server.com中將返回如下數(shù)據(jù):
callbackFun('[{"key1" : "value1}, {"key2" : "value2"}]')
其實(shí)這個回調(diào)函數(shù)里可以返回任何數(shù)據(jù),可以是json,可以是xml,可以是一段頁面代碼...
這樣就完成了一次跨域請求
這樣就完成了一次跨域請求
@import url(http://www.aygfsteel.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
-->槍聲依舊<--
posted @ 2012-03-08 21:43 槍聲依舊 閱讀(1377) | 評論 (0) | 編輯 收藏