jquery解決用戶端跨域訪問問題,jquery用戶端跨域
用戶端“跨域訪問”一直是一個頭疼的問題,好在有jQuery幫忙,從jQuery-1.2以後跨域問題便迎刃而解。由於自己在項目中遇到跨域問題,藉此機會對跨域問題來刨根問底,查閱了相關資料和自己的實踐,算是解決了跨域問題。便記錄下來,以供查閱。
jQuery.ajax()支援get方式的跨域,這其實是採用jsonp的方式來完成的。
真實案例:
複製代碼 代碼如下:
$.ajax({
async:false,
url: 'http://www.mysite.com/demo.do', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //預設callback
data: mydata,
timeout: 5000,
beforeSend: function(){ //jsonp 方式此方法不被觸發。原因可能是dataType如果指定為jsonp的話,就已經不是ajax事件了
},
success: function (json) { //用戶端jquery預先定義好的callback函數,成功擷取跨網域服務器上的json資料後,會動態執行這個callback函數
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被觸發
//請求出錯處理
alert("請求出錯(請檢查相關度網路狀況.)");
}
});
注意:
複製代碼 代碼如下:
$.getJSON(" http://www.mysite.com/demo.do?name1="+value1+"&callback=?",
function(json){
if(json.屬性名稱==值){
// 執行代碼
}
});
這種方式其實是上例$.ajax({..}) api的一種進階封裝,有些$.ajax api底層的參數就被封裝而不可見了。
在服務端通過callback= request.getParameter("callback") 得到jQuery端隨後要回調的jsonp32440980
然後返回類似:"jsonp32440980("+要返回的json數組+")";
jquery就會通過回調方法動態載入調用這個:jsonp32440980(json數組);
這樣就達到了跨域資料交換的目的.
jsonp的最基本的原理是:動態添加一個是一致的(qq空間就是大量採用這種方式來實現跨域資料交換的) 。JSONP是一種指令碼注入(Script Injection)行為,所以也有一定的安全隱患。
注意:jquey是不支援post方式跨域的。
這是因為雖然採用post +動態產生iframe是可以達到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的),但這樣做是一個比較極端的方式,不建議採用。也可以說get方式的跨域是合法的,post方式從安全形度上被認為是不合法的,萬不得已還是不要post,client端跨域訪問的需求看來也引起w3c的注意了,看資料說html5 WebSocket標準支援跨域的資料交換,應該也是一個將來可選的跨域資料交換的解決方案。