使用chrome擴展程序及jsonp實現跨域訪問

    做爲跨域訪問，不少人都知道，因爲同源策略（所謂同源，即域名、協議、端口相同），形成js不能操做非同源的web頁面的內容，隨着前端的不斷髮展，使用的不斷深刻，這也產生了不少的不便。下面，我將經過兩種方式進行跨域訪問：

一、經過chrome擴展程序：

    對於使用chrome瀏覽器的用戶，能夠經過此方式方便的進行跨域訪問，並且不須要進行後臺數據的操做，只需在前端就能進行跨域訪問且取得裏面你想要的內容，例如當想要取得http://files.qidian.com/Author6/2877557/46513147.txt裏面內容的時候，就可使用此方法方便取得。

在這以前，首先得對chrome擴展程序進行簡單的配置，從而產生一個屬於本身的chrome擴展程序。下面一個簡潔步驟：

首先，在桌面，也能夠在你任何磁盤裏新建一個文件夾，而我則建了個名chrome文件夾，裏面最重要的是包含一個manifest.json的文件,詳細信息可參閱http://docs.lmk123.com/getstarted.html；

manifest.json文件內容以下：

其中最重要的是permissions中「http://*/*」,其表明可以運行的網址範圍，還有就是content_scripts中的js，其表示須要使用的js文件。

在myOwn.js中代碼爲：$.get("http://files.qidian.com/Author6/2877557/46513147.txt",function(res){
                console.log(res)；
})；

最後就是將你本身寫的擴展程序安裝至chrome，方法是：打開chrome——>右上角「自定義及控制」——>工具——>擴展程序；進入後，點擊「加載正在開發的擴展程序」，選擇你上面建立的文件夾，個人就是chrome，後獲得：

只要啓動就說明成功了；可是因爲在每一個http網站都會執行此myOwn.js；因此測試完後能夠刪除就行；

如今只要你隨便進入一個http://*/*網站，它就會執行，並獲得你想要的結果但因爲請求的文件的編碼問題，會出現亂碼，只須要使用我上個博客中提供的函數進行請求處理，就能夠成功獲得天朝文；注意就是在使用這個擴展程序的時候，當你每次修改你的js文件後，須要在剛剛加載擴展程序頁面進行刷新才能更新；即按F5或ctrl+R；

二、使用jsonp進行跨域訪問；

最簡單理解jsonp理解，就是說經過script元素做爲ajax傳輸機制，只須要設置其src地址，就能夠不受同源策略的影響，就能夠進行跨域訪問：

我進行測試，是先在我本身的apache服務器上建了一個ajax.txt文件，內容是：

    document.write("測試ajax跨域中文代碼");

而在webstorm 7上建立一個csjsonp.html文件；裏面代碼爲：

<script src="http://localhost/phpstorm/ajax.txt"></script>

結果，在網頁中打印：說明進行了跨域訪問，由於個人csjsonp.html地址爲：http://localhost:63342/across_domain/csjsonp.html;兩個端口號不一樣；若經過ajax請求；即將csjsonp代碼改成：

<script>
        $.get("http://localhost/phpstorm/ajax.txt",function(res){
            alert(res);
        })
    </script>
後刷新，則不會打印結果，且報錯：

這就是最簡單的jsonp跨域；可是有時候在使用，須要的不是一開始就將其寫入script標籤中，而是動態獲得，此時就須要動態添加script標籤進行請求，可是，這種須要先後臺均進行修改，咱們先將csjsonp.html修改成：

<script>
        var oScript = document.createElement("script");
        oScript.src="http://localhost/phpstorm/ajax.txt";
        document.body.appendChild(oScript);
        function jsonpback(res){
            alert(res);
        }
    </script>
若是你不改請求文件中內容，刷新後將不會有任何反應，可是，若是咱們將ajax.txt文件內容改成：

jsonpback("測試ajax跨域中文代碼");

結果呢，刷新就將打印出結果：，也就是說，須要在先後臺添加一個回調函數jsonpback；

使用jquery進行jsonp爲：

<script>         $.ajax({             url:"http://localhost/phpstorm/ajax.txt",             dataType:"jsonp",             jsonpCallback:"jsonpback",             success:function(res){                 alert(res);             }         })     </script> 對於跨域訪問，還有不少方式和不一樣的狀況，可根據狀況進行選擇。