きたけんブログ

旅と趣味と

jQuery続き

この前jQueryについて書きましたが、どんなことをしたか、どんなふうに便利になったかをちょっとご紹介します。

まず、今回作ったスクリプトを示します。因みに現在トップページにこのスクリプトを採用しています。見やすくするために若干削ったりしています。

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
var outputDiv = "#divNews";
// 初期化
$(function(){
    $.ajax({url:'2009.xml', type:'get', dataType:'xml', timeout:5000, error: getError, cache:false, success:setIndex });
});
// エラー処理
function getError(XHR, status, errorThrown){
    $(outputDiv).html("<p>XMLデータ読み込みの際、エラーが発生しました。エラータイプ : " + status + "</p>");
}
// XMLデータの表示
function setIndex(data){
    $(outputDiv).hide();
    $(outputDiv).empty();
    $(data).find("item").each(function() {
        var dat = $(this).find("dat").text();
        var date = $(this).find("dat").attr("date");
        $(outputDiv).append('<p><b>'+date+'</b>'+dat+'</p>');
    });
    $(outputDiv).fadeIn("normal");
}
//-->
</script>
<div>Now Loading.</div>

そして呼び出すXMLファイル。トップページなもんで、更新履歴をXMLにして表示しています。

<list>
  <title>2009年</title>
  <item><dat date="2009/07/26">トップページのAjax処理をjQuery様にお任せしました。</dat></item>
  ・・・省略・・・
</list>

特筆すべきはAjaxの呼び出しが1行で済んでいる点、そしてXMLの煩雑なデータの取り出しがすごくきれいにまとまっている点ですね。いやーこれは実に楽です。今までの苦労は何だったんだ・・・っていうw

上から順番に見ていきますと、最初が初期化処理。通常bodyタグのonload属性やwindow.onload = ~っていう形でJavaScriptを呼び出してくるんですが、これだと画像の読み込み等全てが終了しないとJavaScriptの実行に移ってくれないという欠点(或いは性質?)がありました。しかしjQueryの $(function(){ ~ }); で呼び出しますと、DOMの準備が整った時点で実行を始めてくれます。

そしてAjaxの呼び出し。このたった1行でXMLを呼びに行ってくれるのはありがたいです。タイムアウト処理、さらにはエラーが発生した際の処理なんかもここに埋め込めます。

次に登場はエラー処理の関数。Ajaxの呼び出しの際に発生したエラーを表示してくれます。

で、XMLの表示関数。受信したXMLファイルがdata変数の中に入ってるんで、それを解析し、表示しています。ここで便利だったのが、「each」と「find」、「attr」です。eachは繰り返しメソッド、「find」がタグの検索メソッド、「attr」がタグの中にある属性検索メソッドです。これだけ見やすくかけるのはまさに魔法ですねw

自分でXML解析の関数をくみ上げたときは、繰り返しをさらに繰り返して、タグの中が空だったときの処理をして・・・って感じで辛かった思い出がありますwそこまでしてAjaxを使う必要性もなかったのでしょうが・・・orz

最後に「fadeIn」メソッド。これだけでフェードインしてくれますw本体には関係ありませんがwちょっと使ってみたかっただけです、はい。

これだけ簡単にかけたことに感動を覚えずにはいられません。もっと他の機能も探して使ってみたいと思います。

■ jQuery
https://jquery.com/

■ 高橋 登史朗氏によるAll AboutのJavaScriptに関するページ
https://allabout.co.jp/gm/gt/1054/