jQuery の$.Ajax データタイプ

$.ajax では、dataType オプションを使って、コードが受け取ることを想定する応答の種類を指定します。このオプションは、応答を受信した後の jQuery の処理方法に影響します。リクエスト本文で送信するデータの形式を表す contentType とは別の設定です。たとえば、JSON を送信しながらテキスト形式の応答を受け取ることもできます。それぞれのオプションは、送信と受信のどちらを指定するものかに応じて選びます。

$.ajax における dataType の意味

dataType には、"json" や "html" のような文字列を設定します。この値は、成功時のハンドラーが処理する想定の応答形式を示します。MIMEタイプではないため、"application/json" ではなく "json" を指定してください。このオプションを省略すると、jQuery は応答のコンテンツタイプから処理方法を推測する場合があります。アプリケーションが特定の形式を前提とするなら、期待する形式を設定して意図を明確にしましょう。

サーバーは、指定した形式に合う内容を返す必要があります。dataType: "json" と設定しても、任意の応答テキストが有効なJSONに変換されるわけではありません。同様に、contentType で応答の解析方法を選ぶこともできません。

基本的な $.ajax リクエストで dataType を設定する

$.ajax に渡す設定オブジェクトに、このオプションを記述します。例のURLは、アプリケーションで使用するエンドポイントに置き換えてください。この自己完結型のJavaScript例は設定オブジェクトを示し、想定する応答形式を出力しますが、$.ajax の呼び出しやネットワークリクエストの送信は行いません。

次の例を実行します。

このセクションのコードと表示されるラベルや出力は英語のままです。

const request = {
  url: "/api/employees",
  method: "GET",
  dataType: "json"
};
console.log(`${request.method} ${request.url}: expecting ${request.dataType}`);

出力:

GET /api/employees: expecting json

jQueryを読み込んだアプリケーションでは、この設定を $.ajax に渡し、success またはPromiseのコールバックで解析済みの応答を処理します。本文を送信するリクエストでは、本文の形式を contentType で指定し、値は data に設定します。理由がない限り、本文のないGETリクエストにリクエスト本文のコンテンツタイプを追加しないでください。

応答タイプを選ぶ

アプリケーションで処理する必要のある応答に合わせて値を選びます。

• "xml" は、コードで調査または処理するXML文書に使います。
• "html" は、コードでマークアップとして使うHTML断片または文書に使います。安全な処理方法がない場合、返されたマークアップは信頼できないものとして扱ってください。
• "script" は、JavaScriptとして評価することを想定した応答に使います。信頼できる送信元からの応答であり、リモートスクリプトの評価が適切な場合に限って使用してください。
• "json" は、オブジェクトや配列など、JavaScriptの値として使う構造化データに使います。
• "jsonp" は、コールバックで包まれた応答を返すJSONPエンドポイントに使います。これは独立した応答方式であり、あらゆるJSONエンドポイントをクロスドメイン対応にする一般的な方法ではありません。
• "text" は、コードで独自に処理するプレーンな文字列に使います。

このオプションは、エンドポイントが実際に返す形式に合わせてください。応答形式やサーバーの動作が想定と異なる場合は、手当たり次第にオプションを変更するのではなく、応答とリクエストを調べてください。

応答タイプごとの例

以下はそれぞれ、$.ajax の設定オブジェクトを示す例であり、リクエストを実行したものではありません。エンドポイントのパスはプレースホルダーです。各パスを指定形式を返すURLに置き換え、アプリケーションに必要な成功時の処理を追加してください。

• XML: $.ajax({ url: "/placeholder.xml", method: "GET", dataType: "xml" }) は、コードで調査または処理するXML応答を想定しています。
• HTML: $.ajax({ url: "/placeholder.html", method: "GET", dataType: "html" }) はマークアップを想定しています。返されたHTMLは安全な方法で扱ってください。
• Script: $.ajax({ url: "/trusted-script.js", method: "GET", dataType: "script" }) は、評価を意図したJavaScriptに使います。信頼できる送信元からの応答であり、リモートスクリプトの評価が適切な場合に限って使用してください。
• JSON: $.ajax({ url: "/api/employees", method: "GET", dataType: "json" }) は、成功時のハンドラーで使うオブジェクトや配列などの構造化データを想定しています。
• JSONP: $.ajax({ url: "/jsonp-capable-endpoint", method: "GET", dataType: "jsonp" }) には、JSONPに対応し、クライアントが期待するコールバック形式で応答するサーバーが必要です。
• Text: $.ajax({ url: "/status", method: "GET", dataType: "text" }) は、コードで処理または表示するプレーンな文字列を想定しています。

各例は、オプションと適切なエンドポイントのプレースホルダーの組み合わせを示しています。エンドポイントの実在や、リクエストの送信を示すものではありません。

解析、キャッシュ、クロスドメインの挙動

応答の解析、キャッシュの動作、クロスドメインの処理は、jQueryのバージョンやリクエストの状況によって異なる場合があります。ここでの例は、不正なJSONや空のJSON、スクリプトのキャッシュ、JSONとJSONP間の変換について、特定の結果を保証するものではありません。アプリケーションで使うバージョンのドキュメントを確認し、選択した応答タイプにエンドポイントが対応していることを確かめてください。

JSONPは通常のJSONと置き換え可能ではありません。コールバックで包まれた応答を返すように設計されたエンドポイントが必要です。また、クロスオリジンリクエストの可否はブラウザーとサーバーの動作にも左右されます。"json" を選ぶだけでクロスオリジンアクセスが許可されるわけではありません。リクエストに失敗した場合は、応答本文、応答ヘッダー、ブラウザーのコンソール、サーバー設定を調べ、コードが期待する形式と照らし合わせてください。