javascript實現跨域的方法彙總

時間 2019-12-09

標籤 javascript 實現方法彙總欄目 JavaScript 简体版

原文原文鏈接

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

json與jsonp的區別：php

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

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

方法一：java

利用script標籤請求（<script src="http://....jsp?callback=回調函數名"></script>）
在使用script標籤請求前，先進行回調函數的申明調用，node

<script>
  function 回調函數名（data數據）{  。。。。 }
</script>
<script src="http://....jsp?callback=回調函數名"></script>

CSS3和Html5 圖表與圖形表單驗證導航菜單 table選項卡視頻播放器日期和時間

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

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

方法二：web

jquery實現異域加載方法更爲簡單(與ajax異步請求方式相同）ajax

或者簡寫形式
var url = "http://.....jsp?callback=?"; // 在jquery中此處的callback值能夠爲任意，由於json

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對象：

　　　　var ws = new WebSocket(url);

　　主要處理的事件類型有（onopen,onclose,onmessage,onerror）;

　　　　例如：

ws.onopen = function(){
 
　　console.log("open")；
 
　　// 向後臺發送數據
 
　　ws.send("open");
 
}

　　　　後臺能夠是java,php,nodejs等，對數據處理用時間onmessage事件對返回的值進行前端處理。

ws.onmessage = function(eve){
 
　　console.log(eve.data);
 
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。