js實現跨域的方法

時間 2019-11-11

原文原文鏈接

因爲同源策略的限制，XMLHttpRequest只容許請求當前源（包含域名、協議、端口）的資源。

json與jsonp的區別：
   JSON是一種數據交換格式，而JSONP是一種依靠開發人員創造出的一種非官方跨域數據交互協議。

script標籤常常被用來加載不一樣域下的資源，能夠繞過同源策略。（有src屬性的均可以獲取異域文件）。
若是請求的這個遠程數據自己就是一段可執行的js，那麼這些js會被執行（至關於eval）。

方法一：
利用script標籤請求（<script src="http://....jsp?callback=回調函數名"></script>）
在使用script標籤請求前，先進行回調函數的申明調用，
   <script>
       function 回調函數名（data數據）{   。。。。 }
   </script>
   <script src="http://....jsp?callback=回調函數名"></script>

使用JSON來傳遞javascript對象是一種最簡單的方式了，這樣的跨域通信方式稱爲JSONP。

   遠程服務器拼湊字符串：
       回調函數名( {"name1":"data1","name2","data2"} )
   這種之後臺拼湊json數據，利用回調函數傳參的形式返回給客戶端
   （能夠直接調用至關於已經將獲取的字符串進行eval了處理）
   例如：function databack(data){ alert(data.name1) } // 會輸出顯示"data1"

方法二：
jquery實現異域加載方法更爲簡單(與ajax異步請求方式相同）
   $.ajax({
       type : "get",
       dataType:"json",
       success : function(data){ alert(data.name1) };
   })
   或者簡寫形式
   var url = "http://.....jsp?callback=?"; // 在jquery中此處的callback值能夠爲任意，由於

jquery進行處理後都是利用success回調函數進行數據的接受；
   $.getJSON( url, function(data){ alert(data.name1) });

方法三：
ajax跨域之服務端代理
   在同源的後臺設置一個代理程序（proxy.jsp...）;在服務器端與異域的服務器交互。

   jquery前臺傳輸數據：
       例如：
   　　$.get(
      　　 'http://。。。.jsp',   // 代理程序地址
      　　 {
       　　    name1 : "data1",
       　　    name2 : "data2"
       　　 },
     　　 function(data){
   　　    if(data == 1) alert('發送成功！');
       　　 }
  　　 );

   後臺數據的處理 :
       String data1 = request.getParameter("name1");
       ........
       // 此處的url爲另外一域下的地址並帶有參數
       String url = "http://.....com/.../sss.jsp?" +　"name1=" + data1+　"name2=" +

data2;
       // 跳轉到另外一個域進行數據的處理並返回json格式的數據
       request.getRequestDispatcher(url).forward(request,response);

方法四：
   利用iframe標籤的src屬性，進行跨域的訪問，將獲取到的值存儲到當前的iframe中，而後再

同一頁面進行獲取該iframe的body內的值。
   <body>
       <div id="show"></div>
       <iframe id="frame" style="display: none;"></iframe>
   </body>
   <script>
$("#frame").attr("src", "路徑?time=" + new Date().getTime()).load(function(){
   // 獲取iframe標籤的值並進行獲取，顯示到頁面
   $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()

+ " ]");
});
   </script>

方法五：
   HTML5中websocket能夠進行跨域的訪問;
　　建立一個websocket對象：javascript