Jquery跨域請求php數據
我們一般用到ajax的時候是在同服務器下,一般情況下不會跨域,但有時候需要調用其他域名或ip下的數據的時候,遇到跨域請求數據的時候。
今天在工作中碰到javascript(以下簡稱js)跨域的問題,以前有看過相關的文章不過沒有親自操作實踐只是瀏覽了一下。由於很多頁面調用相同的東西,我把需要出來操作的js代碼統一放在了一個命名為.js文件中,如果是主域名訪問不會出現什么問題,二級域名訪問死活代碼沒有執行,糾結了我很長時間,不過最終還是搞定了,以下作為這次經過和經驗的總結!
什么引起了ajax不能跨域請求的問題?
ajax本身實際上是通過XMLHttpRequest對象來進行數據的交互,而瀏覽器出於安全考慮,不允許js代碼進行跨域操作,所以會警告。
跨域的安全限制都是指瀏覽器端來說的,服務器端是不存在跨域安全限制的。所以針對這2種情況衍生出2類跨域解決方案,一類是服務器端做中轉類似代理方式,一類是js處理瀏覽器端的真正跨域訪問。
以下代碼是我寫在js文件中的一部分代碼:
$.ajax({ type:'get', url:"",//將要請求的方式 contentType: "application/json",//contentTy類型 data:"", dataType:'jsonp', //數據格式 jsonp: "callback", //傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認為:callback) jsonpCallback:"flightHandler", //自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名,也可以寫"?",jQuery會自動為你處理數據 success : function(data){ //請求成功 alert($data); }, error: function () { //請求失敗 } });
以上代碼是用於請求php文件異步獲取數據實現二級聯動菜單.或許你看到了標紅的字樣,平常異步調用數據dataType使用的都是json,而標紅的是jsonp!是的你沒有看錯就是jsonp。
兩者有什么請區別呢?
JSON和JSONP雖然只有一個字母的差別,但其實他們根本不是一回事兒:JSON是一種數據交換格式,而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。
請求的php文件返回數據的格式為json,范例代碼如下:
$result = json_encode(array($data)); echo "flightHandler($result)"; //此處的flightHandler是上面$ajax中jsonpCallback定義的名稱,由於jquery已經封裝好了jsonp可以直接拿去用。 //當使用jsonp時,使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名,以執行回調函數。 //有人建議此處的函數名稱可以弄成動態獲取的,為了實現不同的操作代碼范例: //或 $method = isset($_GET[‘method’])?trim($_GET[‘method’]):’flightHandler’;//獲取方法名稱 $result = json_encode(array($data)); echo $method ."($result)";
Jsonp原理:
1):首先在客戶端注冊一個callback (如:’jsoncallback’), 然后把callback的名字(如:jsonp1236827957501)傳給服務器。
此時,服務器先生成 json 數據。
2):然后以 js語法的方式,生成一個function , function 名字就是傳遞上來的參數 ‘jsoncallback’的值jsonp1236827957501 .
3):最后將 json 數據直接以入參的方式,放置到 function 中,這樣就生成了一段 js 語法的文檔,返回給客戶端。客戶端瀏覽器,解析js標簽,並執行返回的js 文檔,此時js文檔數據,作為參數,傳入到了客戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))里.(動態執行回調函數)
可以說jsonp的方式原理上和是一致的(qq空間就是大量采用這種方式來實現跨域數據交換的) .JSONP是一種腳本注入(Script Injection)行為,所以也有一定的安全隱患.