【Javascript】Ajaxでページ更新をチェック

Ajaxでページ更新をチェック

---

1: If-Modified-Sinceで更新確認
2: ソース

X01HT概観

前回は、スマートフォン向けの軽量ページを作成し、 JavaScriptやPerl/PHPなどで分岐したうえでAjaxを使ってみました。
今回も、スマートフォン向けのAjaxを試してみます(ターゲットマシンはX01HTです)。

一応、前回 のWindows Mobile5.0(WM5)向け分岐を踏襲したうえで、その利点を生かし、 WM5で利用可能なHTTPヘッダの処理を使った「ファイルの更新確認」を行います。

今回試してみるのは、HTTPリクエストヘッダ「If-Modified-Since」です。

If-Modified-Sinceで更新確認

Ajaxを構成する機能には、HTTPクライアントとしての側面もあり、サーバーへ要求するリクエストヘッダを指定することができます。 HTTPのヘッダには、さまざまなものがあり、一般的にはブラウザ自身が送出しています。

今回は、それを、JavaScriptから指定して利用してみようということです。

今回セットしてみるヘッダは、「If-Modified-Since」です。 これは、ファイルの更新確認を行うもので、もしAjaxでリクエストしたファイルが、 指定時刻以降に更新されていなければ、サーバはステータスコード304 (not modified) のレスポンスをメッセージボディ無しで返し、更新されていれば、メソッドがGETならステータスコードは200 (OK)で、 ボディを返します。

ようするに、ファイルが指定時刻以降に更新されているかどうかを知ることができるわけです。

これにより、たとえば「New!」などの表示ができたり、あるいは、普通のリロードよりはネットワークに優しいリロード機構などを、クライアント側だけで書けるようになったりするわけです

ただ、念のために断っておきますが、今回のヘッダをセットするスクリプトは、Operaでは使えません(Opera9現在)。利用できるのは、Win IEのCE(今回のWM5含む)や4,5,6とFirefoxです。今回もAjaxライブラリjslb_ajax051の軽量版を利用しました。

また、Ajaxですからチェックできるファイルは同一ドメイン内に限られます。 サイトのトップページに仕込んでおけば、勝手にファイルの更新情報を表示してくれますので便利です。

サンプル→test1.htm

ソース

下記のようにA要素にID名を付けて、そのhref属性を調べてリンク先の更新状況を調べています。

onloadなどによる、無駄なページ構築待ちを行わずに高速な処理を行うために、スクリプト要素よりも、このA要素を先に記述しています。

ポイントは、遡る日数を変数 b4Days に指定し、更新したいリンクのIDをchkHEAD('リンクID')のように引数で指定するだけです。

これで、遡った日以降にファイルが更新されていれば、対象リンクの後ろへ自動的に[New!]と表示されます。

<!-- Ajax簡易ライブラリ jslb_ajax.js -->
<script type     = "text/javascript"
        src      = "http://jsgt.org/ajax/ref/lib/jslb_ajax0511_c.js"
        charset  = "utf-8"></script>

<!-- 下記リンクをチェック -->

<a id  = "link0" 
   href = "http://jsgt.org/about/cu/CU20061130A/01/test1.htm">
   Ajaxでペ ージ更新をチェックする </a><br>
   
<a id  = "link1" 
   href = "http://jsgt.org/mt/01/">
   JavaScript++かも日記</a><br>
   
<a id  = "link2" 
   href = "http://jsgt.org/mt/htc/">
   htcブログ</a><br>
   
<a id="link3" 
   href = "http://jsgt.org/ajax/newmon/GoogleMapsAPIv2.htm">
   Google Maps API v2 リファレンス(意訳とサンプル)</a><br>

<!-- ヘッダテスト用 -->
<script type="text/javascript">
<!--
  
  //遡る日数(遡った日以降に更新されていれば[New!])
  var b4Days = 10;

  //注釈(無くても良い)
  document.write('<p><font color="red" size="-1">[New!]</font>');
  document.write('の付いたリンクは、'+b4Days);
  document.write('日以内に更新されました</p>');
  
  //チェックを表示したいリンクのID名   chkHEAD('link0');   chkHEAD('link1');   chkHEAD('link2');   chkHEAD('link3');
  
  //エレメント取得ショートカット
  function getE(id){return document.getElementById(id)}

  //更新チェック
  function chkHEAD(id){
  
    //エレメント取得ショートカット
    function getE(id){return document.getElementById(id)}
  
    //Ajaxリクエスト
    sendRequest({ 
      onload  : //レスポンス用コールバック
        function (oj){
          if( oj.status == '200' )
          getE(id).innerHTML+='<font color="red">[New!]</font>';
        }, 
      onbeforsetheader : //ヘッダ設定用コールバック
        function setHeaders(oj){
          //指定された時刻以降に更新されていなければ304を返す
          var d=new Date(new Date().getTime()-1000*60*60*24*b4Days);
          //使える日付形式については下記【関連リンク】参照
          var gmtString = d.toGMTString().replace(/UTC/,'GMT');
          oj.setRequestHeader("If-Modified-Since",gmtString);
        }
    }, '','HEAD',getE(id).href,true,true);
  }

//-->
</script>

【関連リンク】
【HTTPヘッダサンプル】If-Modified-Since
HTTP Header Fields #If-Modified-Since
HTTP Header Fields #HTTP-Date(If-Modified-Sinceで利用できる日付フォーマット)