jQueryの$.getJSONを利用したJSONPによるクロスドメインリクエストの実装方法

jQueryの$.getJSONメソッドを使用すると、異なるドメイン間でのデータ通信(クロスドメイン通信)を簡潔に実装できます。これは内部的にJSONP(JSON with Padding)という仕組みを利用しており、URLにcallback=?というパラメータを付与することで、ブラウザの同一起源ポリシー(Same-Origin Policy)を回避します。

1. サーバー側(PHP)の実装

サーバー側では、リクエストに含まれるcallbackパラメータを取得し、JSONデータをその関数名でラップして出力する必要があります。以下の例は、ユーザーの予約情報を受け取り、バリデーション結果を返すAPIのサンプルです。

<?php
/* 予約登録API (api_handler.php) */

// クライアントから送信されたパラメータの取得
$customerName = isset($_GET['u_name']) ? trim($_GET['u_name']) : '';
$contactTel  = isset($_GET['u_tel']) ? trim($_GET['u_tel']) : '';
$location    = isset($_GET['u_addr']) ? trim($_GET['u_addr']) : '';
$callback    = isset($_GET['callback']) ? $_GET['callback'] : '';

$response = array();

// バリデーション論理
if (empty($customerName)) {
    $response['status'] = 1; // 名前未入力
} elseif (empty($contactTel)) {
    $response['status'] = 2; // 電話番号未入力
} elseif (empty($location)) {
    $response['status'] = 3; // 住所未入力
} else {
    // データベース保存処理(例)
    // $db->query("INSERT INTO reservations ...");
    $response['status'] = 0; // 成功
}

// JSONP形式でレスポンスを返す
// 重要: callback関数名(JSONデータ) の形式にする必要があります
header('Content-Type: application/javascript; charset=utf-8');
echo $callback . '(' . json_encode($response) . ');';
exit;

2. クライアント側(jQuery)の実装

フロントエンドでは、$.getJSONを使用してAPIを呼び出します。URLの末尾にcallback=?を付与することで、jQueryが自動的にランダムな関数名を生成し、クロスドメイン通信を処理します。

$(document).ready(function() {
    // 送信データの定義
    var postData = {
        u_name: "田中 太郎",
        u_tel:  "090-1234-5678",
        u_addr: "東京都千代田区"
    };

    // クロスドメインリクエストの実行
    var apiUrl = "http://external-domain.com/api_handler.php?callback=?";
    
    $.getJSON(apiUrl, postData, function(json) {
        // サーバーからのレスポンスに応じた処理
        switch(json.status) {
            case 1:
                alert("お名前を入力してください。");
                break;
            case 2:
                alert("ご連絡先電話番号を入力してください。");
                break;
            case 3:
                alert("ご住所を入力してください。");
                break;
            case 0:
                alert("予約が正常に完了しました。");
                break;
            default:
                alert("予期しないエラーが発生しました。");
        }
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error("通信エラーが発生しました: " + textStatus);
    });
});

実装のポイント

  • callbackパラメータ: jQueryはURL内のcallback=?を検知すると、自動的にJSONPリクエストとして処理します。サーバー側はこのパラメータ名を関数名として使用しなければなりません。
  • レスポンス形式: サーバーが返すのは純粋なJSONではなく、JavaScriptの関数実行コード(例:jQuery123({...}))である必要があります。
  • セキュリティ: 実際の運用では、入力値のサニタイズや、特定のドメインからのリクエストのみを許可するなどの制限を検討してください。

タグ: jQuery JSONP PHP AJAX cross-domain

8月9日 19:41 投稿