簡單地使用json並不能支援跨域資源請求，為了解決這個問題，需要採用jsonp資料交互協定。眾所周知，js檔案的呼叫不受跨域與否的限制，因此如果想透過純web端跨域存取數據，只能在遠端伺服器上設法將json資料封裝進js格式的檔案中，供客戶端呼叫和進一步處理，這就是jsonp協議的原理。 JSON 和 JSONP JSONP是一種發送JSON資料的方法，無需擔心跨域問題。 JSONP不使用該XMLHttpRequest物件。 JSONP使用標籤代替。 <br>由於跨域策略，從另一個網域請求檔案可能會導致問題。從另一個網域請求外部腳本沒有此問題。 JSONP使用此優勢，並使用腳本標記而不是XMLHttpRequest物件請求檔案。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script src="demo_jsonp.php"></pre><div class="contentsignin">登入後複製</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong>伺服器檔案</strong></span></p><p>伺服器上的檔案將結果包裝在函數呼叫中：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?php $myJSON = '{"name":"John", "age":30, "city":"New York"}'; echo "myFunc(".$myJSON.");"; ?></pre><div class="contentsignin">登入後複製</div></div><p>結果傳回對名為“myFunc”的函數的調用，並將JSON資料作為參數。確保客戶端上存在該功能。 </p><p><span style="font-size: 16px;"><strong style="color: rgb(61, 70, 77); font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;">JavaScript函數</strong></span></p><p>名為「myFunc」的函數位於客戶端，並準備處理JSON資料：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function myFunc(myObj) { document.getElementById("demo").innerHTML = myObj.name; } xmlhttp.send("x=" + dbParam);</pre><div class="contentsignin">登入後複製</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"> <span style="font-size: 16px;"><strong>建立動態script標記</strong></span></p><p>根據您放置腳本標記的位置，上面的範例將在頁面載入時執行「myFunc」函數，這不是很令人滿意。只應在需要時建立script標記：<br/>點擊按鈕時建立並插入<script>標籤：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function clickButton() { var s = document.createElement("script"); s.src = "demo_jsonp.php"; document.body.appendChild(s); }</pre><div class="contentsignin">登入後複製</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong> 動態JSONP結果</strong></span></p> <p>上面的範例仍然是非常靜態的。透過將JSON傳送到php檔案使範例動態化，並讓php檔案根據取得的資訊傳回JSON物件。 <br/>PHP檔案</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?phpheader("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit); $outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC);echo "myFunc(".json_encode($outp).")"; ?></pre><div class="contentsignin">登入後複製</div></div><p><strong>PHP檔案解釋：</strong><br/>使用PHP函數json_decode()將請求轉換為物件 。 <br/>存取資料庫，並使用要求的資料填充陣列。 <br/>將陣列加入到物件中。 <br/>使用json_encode()函數將陣列轉換為JSON 。 <br/>在傳回物件周圍包裹「myFunc()」</p><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><strong>JavaScript範例:</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function clickButton() { var obj, s obj = { table: "products", limit: 10 }; s = document.createElement("script"); s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj); document.body.appendChild(s); } function myFunc(myObj) { var x, txt = ""; for (x in myObj) { txt += myObj[x].name + " "; } document.getElementById("demo").innerHTML = txt; }</pre><div class="contentsignin">登入後複製</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong>回呼函數</strong></span></p><p>當您無法控制伺服器檔案時，如何讓伺服器檔案呼叫正確的函數？有時伺服器檔案會提供回呼函數作為參數：<br/>php檔案會呼叫您傳遞的函數作為回呼參數：<br/>PHP檔案：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?php $callback = trim($_GET('callback')); $myJSON = '{ "name":"John", "age":30, "city":"New York" }'; echo $callback."(".$myJSON.");"; ?></pre><div class="contentsignin">登入後複製</div></div><p>javascript :</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function clickButton() { var s = document.createElement("script"); s.src = "jsonp_demo_db.php?callback=myDisplayFunction"; document.body.appendChild(s); }</pre><div class="contentsignin">登入後複製</div></div><p>更多程式設計相關知識，請訪問：<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">程式設計入門</a>！ ！ </p>
