jQuery逆引きリファレンス
Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工／編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
別稿「TIPS：一般的なAjax通信を実装するには？」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるdataFilterについて解説します。dataFilterパラメーターを利用することで、Ajax通信で得たコンテンツをdoneメソッド（成功コールバック）で処理する前に、加工／編集できます。
dataFilterは一般的には、コンテンツに含まれる<>などの予約文字をエスケープするなど、サニタイズ用途での利用を目的としたパラメーターです。以下のサンプルでも、サーバーサイドから得たコンテンツをHTMLエスケープした上で、doneメソッドに引き渡す例を紹介しています。
|
<!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, '<').replace(/>/g, '>');
}
}
)
.done(function(data) {
$('#result').html('<pre>' + data + '</pre>');
});
});
});
</script>
</body>
</html>
|
dataFilterパラメーターに指定されたコールバック関数（フィルター関数）は、以下の引数を受け取ります。
- data： サーバーから取得したコンテンツ（生の文字列）
- type： 応答データの型（
dataTypeパラメーターの設定値）
この例では、サーバーサイドから読み込んだコンテンツ（引数data）から<／>を検索し、<／>に置き換えています。変換した結果は、フィルター関数の戻り値として返すことで、成功コールバックに引き継がれます。
dataFilterパラメーターをコメントアウトすると、確かにエスケープ処理が無効化され、正しくファイルの内容が表示できないことが確認できます（図2）。
API：jQuery.ajax() カテゴリ：Ajax > Low-Level Interface（低レベルインターフェース）
※以下では、本稿の前後を合わせて5回分（第60回～第64回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
60. 非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。
61. Ajax通信の前に処理を実行するには？（$.ajax［beforeSend］）
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。
62. 【現在、表示中】≫ Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工／編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
63. Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
