快捷導(dǎo)航

jquery解決客戶(hù)端跨域訪(fǎng)問(wèn)問(wèn)題

更新時(shí)間：2015年01月06日 09:40:03 投稿：hebedich

這篇文章主要介紹了jquery解決客戶(hù)端跨域訪(fǎng)問(wèn)問(wèn)題,jQuery.ajax()支持get方式的跨域，這其實(shí)是采用jsonp的方式來(lái)完成的，需要的朋友可以參考下

客戶(hù)端“跨域訪(fǎng)問(wèn)”一直是一個(gè)頭疼的問(wèn)題，好在有jQuery幫忙，從jQuery-1.2以后跨域問(wèn)題便迎刃而解。由于自己在項(xiàng)目中遇到跨域問(wèn)題，借此機(jī)會(huì)對(duì)跨域問(wèn)題來(lái)刨根問(wèn)底，查閱了相關(guān)資料和自己的實(shí)踐，算是解決了跨域問(wèn)題。便記錄下來(lái)，以供查閱。

jQuery.ajax()支持get方式的跨域，這其實(shí)是采用jsonp的方式來(lái)完成的。

真實(shí)案例：

復(fù)制代碼代碼如下:

 
 $.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的話(huà)，就已經(jīng)不是ajax事件了

            },

            success: function (json) { //客戶(hù)端jquery預(yù)先定義好的callback函數(shù)，成功獲取跨域服務(wù)器上的json數(shù)據(jù)后，會(huì)動(dòng)態(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ā)

                //請(qǐng)求出錯(cuò)處理 

                alert("請(qǐng)求出錯(cuò)(請(qǐng)檢查相關(guān)度網(wǎng)絡(luò)狀況.)"); 

            } 

        });

注意：

復(fù)制代碼代碼如下:

$.getJSON("             function(json){
                if(json.屬性名==值){
                    // 執(zhí)行代碼
                }
        });

這種方式其實(shí)是上例$.ajax({..}) api的一種高級(jí)封裝，有些$.ajax api底層的參數(shù)就被封裝而不可見(jiàn)了。

    在服務(wù)端通過(guò)callback= request.getParameter("callback") 得到j(luò)Query端隨后要回調(diào)的jsonp32440980
    然后返回類(lèi)似:"jsonp32440980("+要返回的json數(shù)組+")";
    jquery就會(huì)通過(guò)回調(diào)方法動(dòng)態(tài)加載調(diào)用這個(gè):jsonp32440980(json數(shù)組);
    這樣就達(dá)到了跨域數(shù)據(jù)交換的目的.
    jsonp的最基本的原理是:動(dòng)態(tài)添加一個(gè)是一致的(qq空間就是大量采用這種方式來(lái)實(shí)現(xiàn)跨域數(shù)據(jù)交換的) 。JSONP是一種腳本注入(Script Injection)行為，所以也有一定的安全隱患。

注意：jquey是不支持post方式跨域的。
這是因?yàn)殡m然采用post +動(dòng)態(tài)生成iframe是可以達(dá)到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)，但這樣做是一個(gè)比較極端的方式，不建議采用。也可以說(shuō)get方式的跨域是合法的，post方式從安全角度上被認(rèn)為是不合法的，萬(wàn)不得已還是不要post，client端跨域訪(fǎng)問(wèn)的需求看來(lái)也引起w3c的注意了，看資料說(shuō)html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換，應(yīng)該也是一個(gè)將來(lái)可選的跨域數(shù)據(jù)交換的解決方案。