jquery解決客戶端跨域訪問問題
客戶端“跨域訪問”一直是一個(gè)頭疼的問題,好在有jQuery幫忙,從jQuery-1.2以后跨域問題便迎刃而解。由于自己在項(xiàng)目中遇到跨域問題,借此機(jī)會對跨域問題來刨根問底,查閱了相關(guān)資料和自己的實(shí)踐,算是解決了跨域問題。便記錄下來,以供查閱。
jQuery.ajax()支持get方式的跨域,這其實(shí)是采用jsonp的方式來完成的。
真實(shí)案例:
$.ajax({
async:false,
url: 'http://www.mysite.com/demo.do', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默認(rèn)callback
data: mydata,
timeout: 5000,
beforeSend: function(){ //jsonp 方式此方法不被觸發(fā)。原因可能是dataType如果指定為jsonp的話,就已經(jīng)不是ajax事件了
},
success: function (json) { //客戶端jquery預(yù)先定義好的callback函數(shù),成功獲取跨域服務(wù)器上的json數(shù)據(jù)后,會動態(tài)執(zhí)行這個(gè)callback函數(shù)
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被觸發(fā)
//請求出錯(cuò)處理
alert("請求出錯(cuò)(請檢查相關(guān)度網(wǎng)絡(luò)狀況.)");
}
});
注意:
這種方式其實(shí)是上例$.ajax({..}) api的一種高級封裝,有些$.ajax api底層的參數(shù)就被封裝而不可見了。
在服務(wù)端通過callback= request.getParameter("callback") 得到j(luò)Query端隨后要回調(diào)的jsonp32440980
然后返回類似:"jsonp32440980("+要返回的json數(shù)組+")";
jquery就會通過回調(diào)方法動態(tài)加載調(diào)用這個(gè):jsonp32440980(json數(shù)組);
這樣就達(dá)到了跨域數(shù)據(jù)交換的目的.
jsonp的最基本的原理是:動態(tài)添加一個(gè)是一致的(qq空間就是大量采用這種方式來實(shí)現(xiàn)跨域數(shù)據(jù)交換的) 。JSONP是一種腳本注入(Script Injection)行為,所以也有一定的安全隱患。
注意:jquey是不支持post方式跨域的。
這是因?yàn)殡m然采用post +動態(tài)生成iframe是可以達(dá)到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的),但這樣做是一個(gè)比較極端的方式,不建議采用。也可以說get方式的跨域是合法的,post方式從安全角度上被認(rèn)為是不合法的,萬不得已還是不要post,client端跨域訪問的需求看來也引起w3c的注意了,看資料說html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換,應(yīng)該也是一個(gè)將來可選的跨域數(shù)據(jù)交換的解決方案。
相關(guān)文章
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性,需要的朋友可以參考下。2010-11-11
JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作示例
這篇文章主要介紹了JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作,涉及jquery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11
jquery異步調(diào)用頁面后臺方法‏(asp.net)
給出了兩個(gè)簡單的例子,無參數(shù)的和有參數(shù)的,返回的都是json數(shù)據(jù)。2011-03-03
jQuery實(shí)現(xiàn)彈出窗口彈出div層的實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)彈出窗口彈出div層的實(shí)例代碼,點(diǎn)擊頁面的鏈接,彈出一個(gè)div層,同時(shí)頁面的其他部分變灰并且不能點(diǎn)擊,,具體實(shí)現(xiàn)代碼大家參考下本文吧2017-01-01
jQueryUI寫一個(gè)調(diào)整分類的拖放效果實(shí)現(xiàn)代碼
最近,想用jQuery做一個(gè)網(wǎng)頁的樹目錄結(jié)構(gòu),并且可以使用鼠標(biāo)拖動調(diào)整選項(xiàng)的位置。我在網(wǎng)上找了一下插件,基本上看了好幾款比較著名的,都覺得代碼太復(fù)雜了或者界面太丑了等各種不符合我的要求2012-05-05
jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
這篇文章主要對jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼,需要的朋友可以參考一下2013-06-06

