js跨域請求的5中解決方式_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js跨域請求的5中解決方式_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:52 PM

js跨域請求

跨域請求資料解決方案主要有以下解決方法：

JSONP方式
表单POST方式
服务器代理
Html5的XDomainRequest
Flash request

分開說明：

一、JSONP：

直觀的理解：

就是在客戶端動態註冊一個函數

function a(data)，然後將函數名稱傳到伺服器，伺服器傳回一個a({/*json*/})到客戶端運作,這樣就呼叫客戶端的

function a(data),從而實現了跨域.

誕生背景：

1、Ajax直接請求普通文件存在跨域無權訪問的問題，甭管是靜態頁面、動態網頁、web服務、wcf、只要是跨域請求，一律不行。

2、不過，web頁面上呼叫js檔案時則不受此影響

3.進一步推廣，我們發現，凡是擁有Src屬性的標籤都有跨域能力，如：<script><img src="/static/imghwm/default1.png" data-src="http://remoteserver.com/remote.js" class="lazy" alt="js跨域請求的5中解決方式_javascript技巧" ><iframe></script>

4、於是，目前如果想透過純web端（ActiveX控制項、服務端代理程式、屬於未來的HTML5之Websocket等方式不算）跨網域存取數據，就只能使用以下方式：就是在遠端伺服器上設法把資料裝進js格式的文字裡，供客戶端呼叫和進一步處理。

5、JSON就是一種純字元資料格式，且能唄js原生支援。

6、這樣解決方案出爐：web客戶端透過與呼叫腳本一模一樣的方式，來呼叫跨域伺服器上動態產生的js格式檔案（一般以json為後綴）。

7.客戶端在對json檔案呼叫成功後，也就得到了所需數據，剩下的就是按照自己的需求進行處理了。

8為了方便客戶端使用數據，逐漸形成了一種非正式的傳輸協議，稱為jsonp。協定的一個重點是允許使用者傳遞一個callback參數給伺服器，然後伺服器返回資料時會將這個callback參數作為函數名稱來包裹住json數據，這樣客戶端就可以隨意自訂自己的函數來處理傳回資料了。

具體實作：

不管jQuery也好，extjs也罷，又或者是其他支援jsonp的框架，他們幕後所做的工作都是一樣的，下面我來循序漸進的說明一下jsonp在客戶端的實現：

1、我們知道，就算跨域js檔案中的程式碼（當然指符合web腳本安全策略的），web頁面也是可以無條件執行的。

遠端伺服器remoteserver.com根目錄下有個remote.js檔案程式碼如下：

alert('我是遠端檔案');

本地伺服器localserver.com下方有個jsonp.html頁面程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript"></script>
</head>
<body>

</body>
</html>

毫無疑問，頁面將會彈出一個提示窗體，顯示跨域呼叫成功。

2、現在我們在jsonp.html頁面定義一個函數，然後在遠端remote.js中傳入資料進行呼叫。

jsonp.html頁面代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  var localHandler = function(data){
    alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
  };
  </script>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

remote.js檔案程式碼如下：

localHandler({"result":"我是遠端js帶來的資料"});
運行之後查看結果，頁面成功彈出提示窗口，顯示本地函數被跨域的遠端js呼叫成功，並且還接收了遠端js帶來的資料。很欣喜，跨域遠端取得資料的目的基本上實作了，但是又一個問題出現了，我要怎麼讓遠端js知道它應該呼叫的本地函數叫什麼名字呢？畢竟是jsonp的服務者都要面對許多服務對象，而這些服務對象各自的本地函數都不相同啊？我們接著往下看。

3、聰明的開發者很容易想到，只要服務端提供的js腳本是動態產生的就行了唄，這樣呼叫者可以傳一個參數過去告訴服務端「我想要一段呼叫XXX函數的js程式碼，請你回傳給我”，於是伺服器就可以按照客戶端的需求來產生js腳本並回應了。

看jsonp.html頁面的程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  // 得到航班信息查询结果后的回调函数
  var flightHandler = function(data){
    alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
  };
  // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
  var url = "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998&callback=flightHandler";
  // 创建script标签，设置其属性
  var script = document.createElement('script');
  script.setAttribute('src', url);
  // 把script标签加入head，此时调用开始
  document.getElementsByTagName('head')[0].appendChild(script); 
  </script>
</head>
<body>

</body>
</html>

這次的程式碼變化比較大，不再直接把遠端js檔案寫死，而是編碼實作動態查詢，而這也正是jsonp客戶端實現的核心部分，本例中的重點也就在於如何完成jsonp調用的全過程。

我們看到調用的url中傳遞了一個code參數，告訴伺服器我要查的是CA1998次航班的信息，而callback參數則告訴伺服器，我的本地回調函數叫做flightHandler，所以請把查詢結果傳入這個函數中進行呼叫。

flightHandler({
  "code": "CA1998",
  "price": 1780,
  "tickets": 5
});

我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。

什么？你用的是jQuery，想知道jQuery如何实现jsonp调用？好吧，那我就好人做到底，再给你一段jQuery使用jsonp的代码（我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变）：

OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>Untitled Page</title>
   <script type="text/javascript" src=jquery.min.js"></script>
   <script type="text/javascript">
   jQuery(document).ready(function(){ 
    $.ajax({
       type: "get",
       async: false,
       url: "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998",
       dataType: "jsonp",
       jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
       jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"&#63;"，jQuery会自动为你处理数据
       success: function(json){
         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
       },
       error: function(){
         alert('fail');
       }
     });
   });
   </script>
   </head>
 <body>
 </body>
 </html>

是不是有点奇怪？为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！哈哈，这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用，是不是很爽呀？

以上所述就是本文的全部内容了，希望大家能够喜欢。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。