jQuery の$.Ajax データタイプ

jQuery ajax リクエストのデータタイプは、サーバーに期待されるデータのタイプです。このチュートリアルでは、jQueryajax でのデータタイプの使用について説明します。

jQuery の Ajax データタイプ

ajax リクエストのデータタイプは、サーバーに期待するデータのタイプを指します。データが指定されていない場合、jQuery は応答の MIME タイプに基づいてデータを作成します。

通常、データはプレーンテキスト、HTML、または JSON です。データタイプを使用した単純な ajax リクエストを以下に示します。

$.ajax({
    type : "POST",
    url : user,
    datatype : "application/json",
    contentType: "text/plain",
    success : function(employee_data) {
      //some code here
    },
    error : function(error) {
   //some error error here
},

上記のリクエストでサーバーに期待するデータタイプは JSON です。データタイプのタイプは常に文字列です。

ajax リクエストで使用可能なデータタイプは次のとおりです。

• XML は、jQuery で処理できるドキュメントの XML ファイルを返します。

• HTML は、DOM に挿入されている間にスクリプトタグが評価されるプレーンテキストとして HTML を返します。

• script は応答を JavaScript として評価し、プレーンテキストとして返します。キャッシュオプションが true になるまで、URL でクエリ文字列パラメータ =[TIMESTAMP] を使用してキャッシュを無効にする必要があります。このメソッドは、リモートドメインリクエストの POST リクエストを GET に変換します。

• JSON は応答を JSON として評価し、JavaScript オブジェクトを返します。クロスドメインの JSON リクエストは、リクエストオプションに jsonp : false が含まれていない限り、jsonp に変換されます。

  JSON データは厳密に解析されます。誤動作している JSON はすべて拒否され、エラーがスローされます。新しいバージョンの jQuery では、空の応答も拒否されます。

• jsonp は、JSONP を使用して JSON ブロックにロードされます。URL の最後にコールバックを追加して指定できます。

  キャッシュオプションが true になるまで URL に _=[TIMESTAMP] を追加することで、キャッシュを無効にすることもできます。

• text はプレーンテキスト文字列を返します。

次の例は、上記のデータタイプを使用したいくつかの ajax リクエストです。

Ajax リクエストに XML を使用する

カスタム XML スキーマでデータを転送するための ajax リクエスト。

$.ajax({
  url: 'http://demoxmlurl',
  type: 'GET',
  dataType: 'xml',
  success: parseXml
});
});

Ajax リクエストに HTML を使用する

HTML ブロックをページのどこかに転送するための ajax リクエスト。

$.ajax({
  type: 'POST',
  url: 'post.php',
  dataType: 'json',
  data: {id: $('#id').val()},
});

Ajax リクエストにスクリプトを使用する

ページに新しいスクリプトを追加するための ajax リクエスト。

$.ajax({url: 'http://unknown.jquery.com/foo', dataType: 'script', cache: true})
    .then(
        function() {
          console.log('Success');
        },
        function() {
          console.log('Failed');
        });

Ajax リクエストに JSON を使用する

JSON データを転送するための ajax リクエストには、あらゆるタイプのデータが含まれます。

$.ajax({
  url: 'delftstack.php',
  type: 'POST',
  data: {ID: ID, First_Name: First_Name, Last_Name: Last_Name, Salary: Salary},
  dataType: 'JSON',
  success: function(employee_data) {
    console.log('Success');
    $('#result').text(employee_data);
  }
});

Ajax リクエストに JSONP を使用する

別のドメインから JSON データを転送するための ajax リクエスト。

$.ajax({
  type: 'GET',
  url: url,
  async: false,
  jsonpCallback: 'jsonCallback',
  contentType: 'application/json',
  dataType: 'jsonp',
  success: function(json) {
    console.dir(json.sites);
  },
  error: function(er) {
    console.log(er.message);
  }
});

Ajax リクエストにテキストを使用する

プレーンテキスト文字列を転送するための ajax リクエスト。

$.ajax({
  type: 'POST',
  url: 'delftstack.php',
  data: '{}',
  async: true,
  dataType: 'text',
  success: function(data) {
    console.log(data);
  }
});