快捷導(dǎo)航

js/ajax跨越訪問-jsonp的原理和實例(javascript和jquery實現(xiàn)代碼)

更新時間：2012年12月27日 09:48:30 作者：

最近做了一個項目，需要用子域名調(diào)用主域名下的一個現(xiàn)有的功能，于是想到了用jsonp來解決，在我們平常的項目中不乏有這種需求的朋友，于是記錄下來以便以后查閱同時也希望能幫到大家,需要了解的朋友可以參考下

很慶幸，我又見到了末日后新升的太陽，所以我還能在這里寫文章，言歸正傳哈，最近做了一個項目，需要用子域名調(diào)用主域名下的一個現(xiàn)有的功能，于是想到了用jsonp來解決，在我們平常的項目中不乏有這種需求的朋友，于是記錄下來以便以后查閱同時也希望能幫到大家。

什么是JSONP協(xié)議?
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進行跨域請求，我們可以通過使用html的script標(biāo)記來進行跨域請求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。
很明顯，JSONP是一種腳本注入(Script Injection)行為，需要特別注意其安全性。

Jquery中的jsonp實例
我們需要兩個頁面，分別承擔(dān)協(xié)議的客戶端和服務(wù)器端角色。

客戶端代碼：

復(fù)制代碼代碼如下:

 
<!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>jsonp測試?yán)?lt;/title> 
<script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$.ajax({ 
type: "get", 
async: false, 
url: "http://www.xxxxxxxxxxxx.cn/demos/jsonp.php", 
dataType: "jsonp", 
jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback) 
jsonpCallback:"feedBackState",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動生成的隨機函數(shù)名 
success: function(data){ 
var $ul = $("<ul></ul>"); 
$.each(data,function(i,v){ 
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul) 
}); 
$("#remote").append($ul); 
}, 
error: function(){ 
alert('fail'); 
} 
}); 
}); 
</script> 
</head> 
<body> 
遠(yuǎn)程數(shù)據(jù)如下：<br/> 
<div id="remote"></div> 
</body> 
</html> 

服務(wù)端代碼（本例采用PHP）：

復(fù)制代碼代碼如下:

 
<?php 
$jsonp = $_REQUEST["callback"]; 
$str = '[{"id":"1","name":"測試1"},{"id":"2","name":"測試2"}]'; 
$str = $jsonp . "(" .$str.")"; 
echo $str; 
?> 

Jsonp的原理和簡單實例
jquery是對其進行了封裝，你可能看不到真正的實現(xiàn)方法，我們用下面的一個例子進行說明：
客戶端代碼：

復(fù)制代碼代碼如下:

 
<!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" > 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<title>jsonp測試?yán)?lt;/title> 
<script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> 
<script type="text/javascript"> 
function CallJSONPServer(url){ // 調(diào)用JSONP服務(wù)器，url為請求服務(wù)器地址 
var oldScript =document.getElementById(url); // 如果頁面中注冊了調(diào)用的服務(wù)器，則重新調(diào)用 
if(oldScript){ 
oldScript.setAttribute("src",url); 
return; 
} 
var script =document.createElement("script"); // 如果未注冊該服務(wù)器，則注冊并請求之 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src",url); 
script.setAttribute("id", url); 
document.body.appendChild(script); 
} 
function OnJSONPServerResponse(data){ 
var $ul = $("<ul></ul>"); 
$.each(data,function(i,v){ 
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul) 
}); 
$("#remote").append($ul); 
} 
</script> 
</head> 
<body> 
<input type="button" value="點擊獲取遠(yuǎn)程數(shù)據(jù)" onclick="CallJSONPServer('http://www.xxxxxxxxxxxx.cn/demos/jsonp_original.php')" /> 
<div id="remote"></div> 
</body> 
</html> 

服務(wù)端代碼：

復(fù)制代碼代碼如下:

 
<?php 
$str = '[{"id":"1","name":"測試1"},{"id":"2","name":"測試2"}]'; 
$str = "OnJSONPServerResponse(" .$str.")"; 
echo $str; 
?> 

別的不多說，相信看代碼大家應(yīng)該明白它是怎么實現(xiàn)的了。
需要注意：
1.由于 jquery 在ajax 處理中使用的是utf-8編碼傳遞參數(shù)的，所以jsonp處理端用utf-8的編碼最好，這樣省得編碼轉(zhuǎn)換了，如果不是utf-8記得轉(zhuǎn)換，否則中文會亂碼。
2.請求的服務(wù)端url最好不要寫成http://www.xxxxxxxxxxxx.cn/?act=add這樣的，應(yīng)寫全其為：http://www.xxxxxxxxxxxx.cn/index.php?act=add這樣的，在應(yīng)用的過程中出現(xiàn)了不兼容的情況。
到此就ok了，如有朋友碰到什么問題可發(fā)上來大家共同交流。
歡迎大家轉(zhuǎn)載，轉(zhuǎn)載請注明原創(chuàng) 包括鏈接一定要加上，否則...此處略去n個字
簽名：共同交流，共同學(xué)習(xí)，幫助需要幫助的人，共同走向成功之路。

您可能感興趣的文章: