php關於ajax跨域問題解析-php教程-PHP中文網

其實網路上關於JSONP的講解有很多，但卻千篇一律，而且雲裡霧裡，對於很多剛接觸的人來講理解起來有些困難，小可不才，試著用自己的方式來闡釋一下這個問題，看看是否有幫助。本文主要跟大家分享php關於ajax跨域問題解析，希望能幫助大家。

1、一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準；

2、不過我們又發現，Web頁面上呼叫js檔案時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有"src"這個屬性的標籤都擁有跨域的能力，如 、 、 ）；

3、於是可以判斷，當前階段如果想透過純web端（ActiveX控制項、服務端代理、屬於未來的HTML5之Websocket等方式不算）跨域存取資料就只有一種可能，那就是在遠端伺服器上設法把資料裝進js格式的檔案裡，供客戶端呼叫和進一步處理；

4.恰巧我們已經知道有一種叫做JSON的純字符數據格式可以簡潔的描述複雜數據，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據；

5、這樣子解決方案就呼之欲出了，web客戶端透過與呼叫腳本一模一樣的方式，來呼叫跨域伺服器上動態產生的js格式檔案（一般以JSON為後綴），顯而易見，伺服器之所以要動態產生JSON文件，目的就在於把客戶端需要的資料裝進去。

6、客戶端在對JSON檔案呼叫成功之後，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠端數據的方式看起來非常像AJAX，但其實不一樣。

7、為了方便客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然後服務端回傳資料時會將這個callback參數當作函數名來包裹住JSON數據，這樣客戶端就可以隨意自訂自己的函數來自動處理回傳資料了。

前端程式碼的ajax中原本為

$.ajax({ type: "get", async: false, url: "url", dataType: "json", success: function(json){ alert('success'); }, error: function(){ alert('fail'); } }); 登入後複製 應變為

$.ajax({ type: "get", async: false, url: "url", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert('success'); }, error: function(){ alert('fail'); } }); 登入後複製

比較json與jsonp格式的差異

#json格式：

{ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} } 登入後複製

#jsonp格式： ## callback({ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} }) 登入後複製

#看出來區別了吧，在url中callback傳到後台的參數是神馬callback就是神馬，jsonp比json外面有多了一層，callback()。這樣就知道怎麼處理它了。於是修改後台程式碼。

所以在php中原本的echo json_encode($xxx)就要改成 $callback = $_GET['callback'];echo $callback.'('.json_encode($xxx).')'; 登入後複製 相關推薦：

##解決ajax跨域的最全方案

Ajax跨域的完美解決方案實例分享

JS實作Ajax跨域請求flask回應內容 #

php8，我來也

30分鐘學會網站佈局

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

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

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

零基礎PS影片教學

16天帶你入門UI視頻教程

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

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

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

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

Websocket影片教學

php關於ajax跨域問題解析