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

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

JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 登入後複製 分開說明：

一、JSONP：

直觀的理解：

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

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

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

誕生背景：

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

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

3.進一步推廣，我們發現，凡是擁有Src屬性的標籤都有跨域能力，如：

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頁面程式碼如下：

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

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

jsonp.html頁面代碼如下：

var localHandler = function(data){ alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result); };

登入後複製 remote.js檔案程式碼如下：

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

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

看jsonp.html頁面的程式碼：

// 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签，设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head，此时调用开始 document.getElementsByTagName('head')[0].appendChild(script);

登入後複製 這次的程式碼變化比較大，不再直接把遠端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（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：

Untitled Page jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } }); });

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

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

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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