客戶端“跨域訪問”一直是一個頭疼的問題椰于，好在有jQuery幫忙，從jQuery-1.2以后跨域問題便迎刃而解仪搔。由于自己在項目中遇到跨域問題瘾婿，借此機會對跨域問題來刨根問底，查閱了相關(guān)資料和自己的實踐烤咧，算是解決了跨域問題偏陪。便記錄下來，以供查閱煮嫌。
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 方式此方法不被觸發(fā)昌阿。原因可能是dataType如果指定為jsonp的話饥脑，就已經(jīng)不是ajax事件了 }, success: function (json) { //客戶端jquery預(yù)先定義好的callback函數(shù)，成功獲取跨域服務(wù)器上的json數(shù)據(jù)后懦冰，會動態(tài)執(zhí)行這個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ā) //請求出錯處理 alert("請求出錯(請檢查相關(guān)度網(wǎng)絡(luò)狀況.)"); } });
注意：
$.getJSON(" http://www.mysite.com/demo.do?name1="+value1+"&callback=?", function(json){ if(json.屬性名==值){ // 執(zhí)行代碼 } });
這種方式其實是上例$.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)用這個:jsonp32440980(json數(shù)組);
這樣就達到了跨域數(shù)據(jù)交換的目的.
jsonp的最基本的原理是:動態(tài)添加一個是一致的(qq空間就是大量采用這種方式來實現(xiàn)跨域數(shù)據(jù)交換的) 刷钢。
JSONP是一種腳本注入(Script Injection)行為笋颤，所以也有一定的安全隱患。
注意：jquey是不支持post方式跨域的闯捎。
這是因為雖然采用post +動態(tài)生成iframe是可以達到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)椰弊，但這樣做是一個比較極端的方式，不建議采用瓤鼻。也可以說get方式的跨域是合法的，post方式從安全角度上被認為是不合法的贤重，萬不得已 還是不要post茬祷，client端跨域訪問的需求看來也引起w3c的注意了，看資料說html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換并蝗，應(yīng)該也是一個將來可選的跨域數(shù)據(jù)交換的解決方案祭犯。
