第9回 Ajax編（後編）：連載：jQuery逆引きリファレンス（7/10 ページ）
ｊQueryにおいて、Ajax関連操作のコアである「$.ajaxメソッド」についてまとめた、すぐに役立つ9本を一挙公開。
$.ajaxメソッドのifModifiedオプションをtrue（有効）にすることで、サーバ側のコンテンツが更新された場合にのみ、successイベントを発生させ、通信成功時の処理を行うことができます。これによって、サーバ側の応答が更新されていない場合の無駄な処理を省くことができます。
少しだけ内部的な挙動を補足しておくと、ifModifiedオプションを有効にした場合、jQueryはLast-Modified応答ヘッダ（コンテンツの最終更新日時）をチェックします。このとき、初回アクセスと2回目以降のアクセスで更新日時が変わっていなければ、successイベントを発生せずにerror／completeイベントのみを発生させるわけです。
具体的な挙動も確認してみましょう。以下はサーバ側のコンテンツ（Modified.aspx）にアクセスするためのサンプルです。ifModifiedオプションを有効にした場合に、2回目以降のアクセスが「失敗」と見なされることを確認してください。
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Response.Cache.SetLastModified( _
DateTime.Parse("2010/03/25"))
Response.Write(DateTime.Now.ToString())
End Sub
</script>
<script type="text/javascript">
$(function() {
// ボタン・クリック時の挙動を定義
$('#btn').click(function() {
// Ajax通信を実行
$.ajax({
url: './Modified.aspx', // アクセス先のURL
ifModified: true, // 更新チェックを有効化
success: function(data, status) {
$('body').append("Success:" + status + "<br />");
}, // 成功時にステータス文字列を表示
error: function(xhr, status, err) {
$('body').append("Error:" + status + "<br />");
}, // 失敗時にステータス文字列を表示
complete: function(xhr, status) {
$('body').append("Complete:" + status + "<br />");
} // 完了時にステータス文字列を表示
});
});
});
</script>
……中略……
<form>
<input type="button" id="btn" value="通信実行" />
</form>
このHTMLを実際にブラウザで開く
リスト126を実行すると、ifModifiedオプションを有効にしている場合には、次のような実行結果となります。
Success:success
Complete:success … 初回アクセス時の結果
Error:notmodified
Complete:notmodified … 2回目アクセス時の結果
確かに、初回アクセスではsuccessイベントが、2回目以降のアクセスではerrorイベントが発生していることが確認できます。一方、以下はifModifiedオプションをfalse（無効）にした、あるいは、ifModifiedオプションを指定しなかった場合の結果です。
Success:success
Complete:success … 初回アクセス時の結果
Success:success
Complete:success … 2回目アクセス時の結果
更新チェックは行われませんので、今度は常にsuccessイベントが発生することが確認できます。
なお、ifModifiedオプションの性質上、更新チェックを行うには、サーバサイド・スクリプトでもLast-Modifiedヘッダを明示的に出力する必要があります。Last-Modifiedヘッダが出力されない場合、正しい挙動は得られませんので注意してください。
Copyright© Digital Advantage Corp. All Rights Reserved.