Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

Ajax通信で得られたコンテンツを加工するには?($.ajax[dataFilter])

2017年1月12日

$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工/編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:一般的なAjax通信を実装するには?」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるdataFilterについて解説します。dataFilterパラメーターを利用することで、Ajax通信で得たコンテンツをdoneメソッド(成功コールバック)で処理する前に、加工/編集できます。

 dataFilterは一般的には、コンテンツに含まれる<>などの予約文字をエスケープするなど、サニタイズ用途での利用を目的としたパラメーターです。以下のサンプルでも、サーバーサイドから得たコンテンツをHTMLエスケープした上で、doneメソッドに引き渡す例を紹介しています。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
  <input type="button" id="btn" value="コードの表示" />
  <div id="result"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  // ボタンクリック時に指定されたファイルを読み込み、その内容を表示
  $('#btn').click(function() {
    $.ajax('ajax.html',
      {
        type: 'get',
        dataType: 'html',
        // 取得したデータをエスケープ処理
        dataFilter: function(data, type) {
          return data.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        }
      }
    )
    .done(function(data) {
      $('#result').html('<pre>' + data + '</pre>');
    });
  });
});
</script>
</body>
</html>
サーバーサイドから取得したコンテンツをエスケープ処理するコード(datafilter.html)
図1 ボタンをクリックすると、指定されたファイルの内容を表示

 dataFilterパラメーターに指定されたコールバック関数(フィルター関数)は、以下の引数を受け取ります。

  • data: サーバーから取得したコンテンツ(生の文字列)
  • type: 応答データの型(dataTypeパラメーターの設定値)

 この例では、サーバーサイドから読み込んだコンテンツ(引数data)から<>を検索し、&lt;&gt;に置き換えています。変換した結果は、フィルター関数の戻り値として返すことで、成功コールバックに引き継がれます。

 dataFilterパラメーターをコメントアウトすると、確かにエスケープ処理が無効化され、正しくファイルの内容が表示できないことが確認できます(図2)。

図2 dataFilterパラメーターをコメントアウトした場合(タグがエスケープされないため、HTMLとして解釈された結果を表示)
処理対象:基本 カテゴリ:Ajax
API:jQuery.ajax() カテゴリ:Ajax > Low-Level Interface(低レベルインターフェース)

※以下では、本稿の前後を合わせて5回分(第60回~第64回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
60. 非同期通信のキャッシュを無効化するには?($.ajax[cache])

Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
61. Ajax通信の前に処理を実行するには?($.ajax[beforeSend])

Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
62. 【現在、表示中】≫ Ajax通信で得られたコンテンツを加工するには?($.ajax[dataFilter])

$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工/編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
63. Ajax通信で成功/失敗コールバックに任意の値を渡すには?($.ajax[context])

主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
64. アニメーションを一時停止するには?(delay)

実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。

サイトからのお知らせ

Twitterでつぶやこう!