首頁 > web前端 > js教程 > jquery解決客戶端跨域存取問題_jquery

jquery解決客戶端跨域存取問題_jquery

WBOY
發布: 2016-05-16 16:22:13
原創
1000 人瀏覽過

客戶端「跨域存取」一直是個頭痛的問題,好在有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標準支援跨域的資料交換,應該也是一個將來可選的跨域資料交換的解決方案。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板