jQuery getJSON 跨域請求完整實作：JSONP 協議與 PHP 後端範例

核心概念：JSONP

瀏覽器同源策略限制了 XMLHttpRequest 跨域請求，但 <script> 標籤不受此限。JSONP（JSON with Padding）利用此特性：前端指定 callback 參數，後端回傳 callbackName(jsonData) 格式的 JavaScript 程式碼，瀏覽器直接執行，從而實現跨域資料傳遞。jQuery $.getJSON() 內建支援此機制，只需在 URL 附加 callback=?。

前端實作（jQuery）

<script>
$(function() {
    // callback=? 會被 jQuery 自動替換為隨機函數名
    $.getJSON('https://test.com/aa.php?callback=?', {
        classid: 1,
        num: 2
    }, function(json) {
        alert(json.key); // 處理回傳資料
    });
});
</script>

後端實作（PHP）

<?php
$classid = $_GET['classid'];
$num     = $_GET['num'];

if ($classid && $num) {
    $results = array("key" => "value");
    // 關鍵：輸出 callback 函數名 + 括號包裹 JSON 字串
    echo $_GET['callback'] . '(' . json_encode($results) . ')';
}
?>

關鍵點總結

1. callback 參數必須原樣回傳：jQuery 產生的隨機函數名（如 jQuery123456789）必須完整出現在回應開頭，否則瀏覽器不會執行回呼函數。
2. Content-Type：建議輸出 header('Content-Type: application/javascript; charset=utf-8');，雖非強制但符合規範。
3. 安全性：僅允許 GET 請求；嚴格驗證輸入參數；避免在 JSONP 端點執行敏感寫入操作（CSRF 風險）。
4. 錯誤處理：若參數驗證失敗，應輸出 callbackName(null) 或約定錯誤格式，前端在 complete 或 error 回呼中處理。

現代替代方案

現代瀏覽器普遍支援 CORS（Cross-Origin Resource Sharing），只需在後端設定 Access-Control-Allow-Origin 標頭，即可直接使用 fetch 或 $.ajax 進行跨域請求，無需 JSONP 繞彎路，且支援 POST、自定標頭等完整 HTTP 功能。