跨域請求數據解決方案主要有如下解決方法:
? 1 2 3 4 5 JSONP方式 表單POST方式 服務器代理 Html5的XDomainRequest Flash request分開說明:
一、JSONP:
直觀的理解:
就是在客戶端動態注冊一個函數
function a(data),然后將函數名傳到服務器,服務器返回一個a({/*json*/})到客戶端運行,這樣就調用客戶端的
function a(data),從而實現了跨域.
誕生背景:
1、Ajax直接請求普通文件存在跨域無權訪問的問題,甭管是靜態頁面、動態網頁、web服務、wcf、只要是跨域請求,一律不行。
2、不過,web頁面上調用js文件時則不受此影響
3、進一步推廣,我們發現,凡是擁有Src屬性的標簽都有跨域能力,如:<script><img><iframe>
4、于是,當前如果想通過純web端(ActiveX控件、服務端代理、屬于未來的HTML5之Websocket等方式不算)跨域訪問數據,就只能使用如下方式:就是在遠程服務器上設法把數據裝進js格式的文本里,供客戶端調用和進一步處理。
5、JSON就是一種純字符數據格式,且能唄js原生支持。
6、這樣解決方案出爐:web客戶端通過與調用腳本一模一樣的方式,來調用跨域服務器上動態生成的js格式文件(一般以json為后綴)。
7、客戶端在對json文件調用成功后,也就得到了所需數據,剩下的就是按照自己的需求進行處理了。
8為了便于客戶端使用數據,逐漸形成了一種非正式的傳輸協議,稱之為jsonp。該協議的一個要點就是允許用戶傳遞一個callback參數給服務器,然后服務器返回數據時會將這個callback參數作為函數名來包裹住json數據,這樣客戶端就可以隨意定制自己的函數來處理返回數據了。
具體實現:
不管jQuery也好,extjs也罷,又或者是其他支持jsonp的框架,他們幕后所做的工作都是一樣的,下面我來循序漸進的說明一下jsonp在客戶端的實現:
1、我們知道,哪怕跨域js文件中的代碼(當然指符合web腳本安全策略的),web頁面也是可以無條件執行的。
遠程服務器remoteserver.com根目錄下有個remote.js文件代碼如下:
alert('我是遠程文件');
本地服務器localserver.com下有個jsonp.html頁面代碼如下:
? 1 2 3 4 5 6 7 8 9 10 <!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" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>毫無疑問,頁面將會彈出一個提示窗體,顯示跨域調用成功。
2、現在我們在jsonp.html頁面定義一個函數,然后在遠程remote.js中傳入數據進行調用。
新聞熱點
疑難解答