很慶幸，我又見(jiàn)到了末日后新升的太陽(yáng)，所以我還能在這里寫文章，言歸正傳哈，最近做了一個(gè)項(xiàng)目，需要用子域名調(diào)用主域名下的一個(gè)現(xiàn)有的功能，于是想到了用jsonp來(lái)解決，在我們平常的項(xiàng)目中不乏有這種需求的朋友，于是記錄下來(lái)以便以后查閱同時(shí)也希望能幫到大家。
什么是JSONP協(xié)議?
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進(jìn)行跨域請(qǐng)求，我們可以通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對(duì)象。這種跨域的通訊方式稱為JSONP。
很明顯，JSONP是一種腳本注入(Script Injection)行為，需要特別注意其安全性。
Jquery中的jsonp實(shí)例
我們需要兩個(gè)頁(yè)面，分別承擔(dān)協(xié)議的客戶端和服務(wù)器端角色。
客戶端代碼：
<!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測(cè)試?yán)?lt;/title> <script type="text/javascript" src="http://www.yzswyl.cn/js/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://www.yzswyl.cn/demos/jsonp.php", dataType: "jsonp", jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback) jsonpCallback:"feedBackState",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(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）：
<?php$jsonp = $_REQUEST["callback"];$str = '[{"id":"1","name":"測(cè)試1"},{"id":"2","name":"測(cè)試2"}]';$str = $jsonp . "(" .$str.")";echo $str;?>
效果演示：
Jsonp的原理和簡(jiǎn)單實(shí)例
jquery是對(duì)其進(jìn)行了封裝，你可能看不到真正的實(shí)現(xiàn)方法，我們用下面的一個(gè)例子進(jìn)行說(shuō)明：
客戶端代碼：
<!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測(cè)試?yán)?lt;/title> <script type="text/javascript" src="http://www.yzswyl.cn/js/jquery.min.js"></script> <script type="text/javascript"> function CallJSONPServer(url){ // 調(diào)用JSONP服務(wù)器，url為請(qǐng)求服務(wù)器地址 var oldScript =document.getElementById(url); // 如果頁(yè)面中注冊(cè)了調(diào)用的服務(wù)器，則重新調(diào)用 if(oldScript){ oldScript.setAttribute("src",url); return; } var script =document.createElement("script"); // 如果未注冊(cè)該服務(wù)器，則注冊(cè)并請(qǐng)求之 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="點(diǎn)擊獲取遠(yuǎn)程數(shù)據(jù)" onclick="CallJSONPServer('http://www.yzswyl.cn/demos/jsonp_original.php')" /> <div id="remote"></div> </body> </html>
服務(wù)端代碼：
<?php$str = '[{"id":"1","name":"測(cè)試1"},{"id":"2","name":"測(cè)試2"}]';$str = "OnJSONPServerResponse(" .$str.")";echo $str;?>
效果展示：
別的不多說(shuō)，相信看代碼大家應(yīng)該明白它是怎么實(shí)現(xiàn)的了。
需要注意：
1.由于 jquery 在ajax 處理中使用的是utf-8編碼傳遞參數(shù)的，所以jsonp處理端用utf-8的編碼最好，這樣省得編碼轉(zhuǎn)換了，如果不是utf-8記得轉(zhuǎn)換，否則中文會(huì)亂碼。
2.請(qǐng)求的服務(wù)端url最好不要寫成http://www.yzswyl.cn/?act=add這樣的，應(yīng)寫全其為：http://www.yzswyl.cn/index.php?act=add這樣的，在應(yīng)用的過(guò)程中出現(xiàn)了不兼容的情況。
到此就ok了，如有朋友碰到什么問(wèn)題可發(fā)上來(lái)大家共同交流。
聯(lián)系客服
