首頁 > web前端 > js教程 > js/ajax跨越訪問-jsonp的原理和實例(javascript和jquery實現代碼)_javascript技巧

js/ajax跨越訪問-jsonp的原理和實例(javascript和jquery實現代碼)_javascript技巧

WBOY
發布: 2016-05-16 17:45:07
原創
1344 人瀏覽過

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

什麼是JSONP協定?
JSONP即JSON with Padding。由於同源策略的限制,XmlHttpRequest只允許請求目前來源(網域名稱、協定、連接埠)的資源。如果要進行跨域請求,我們可以透過使用html的script標記來進行跨域請求,並在回應中傳回要執行的script程式碼,其中可以直接使用JSON傳遞javascript物件。這種跨域的通訊方式稱為JSONP。
很明顯,JSONP是一種腳本注入(Script Injection)行為,需要特別注意其安全性。

Jquery中的jsonp實例
我們需要兩個頁面,分別承擔協定的客戶端和伺服器端角色。

客戶端程式碼

複製程式碼



複製程式碼



複製碼>



jsonp測試範例


遠端資料如下:



複製程式碼


程式碼如下:


程式碼如下:
$str = '[{"id":"1","name":"測試1"},{"id":"2","name" :"測試2"}]';
$str = $jsonp . "(" .$str.")";
echo $str;
?>
 Jsonp的原理和簡單實例
jquery是對其進行了封裝,你可能看不到真正的實作方法,我們用下面的一個例子來說明: 客戶端程式碼: 複製程式碼 程式碼如下:





jsonp測試範例









服務端程式碼
複製程式碼 程式碼如下:

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

 

 
別的相信看程式碼大家應該要明白它是怎麼實現的了。

需要注意

1.由於jquery 在ajax 處理中使用的是utf-8編碼傳遞參數的,所以jsonp處理端用utf-8的編碼最好,這樣省得編碼轉換了,如果不是utf-8記得轉換,否則中文會亂碼。 2.請求的服務端url最好不要寫成http://www.xxxxxxxxxxxx.cn/?act=add這樣的,應寫全其為:http://www.xxxxxxxxxxxxxxx.cn/index.php ?act=add這樣的,在應用的過程中出現了不相容的情況。 到此就ok了,如有朋友碰到什麼問題可寄上來大家共同交流。 歡迎大家轉載,轉載請註明原創包括鏈接一定要加上,否則...此處略去n個字簽名:共同交流,共同學習,幫助需要幫助的人,共同走向成功之路。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板