jQueryでajax

東條君に質問されて、その場ではうまくいかなかったので、ここにメモしておきます。

§9-2にある例をバスマップのxmlデータの処理用に書き直したプログラムです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
<!--
    $(document).ready(function () {
        $.ajax({
            url: 'BusCategorizedRouteXml.xml',
            type: 'GET',
            //cache: false,//キャッシュを行う場合はtrue
            dataType: 'xml',
            timeout: 5000,
            success: function (data) {
                $(data).find("item").each(
                    function(){
                        $('#result').append(
                            $('<li></li>').append($(this).attr("name")));
                    }
                );
            }
        });
    });
  /* やっていること:
   * ajaxでurlで指定したものをリクエスト、
   * getできたら、successに指定した関数を実行
   * 関数では
   * 　データからitemというタグを探し(find)、
   * 　ひとつひとつ(each) <li>タグをつけて、bodyのresult部分に書きだす
   * をことを行なっている。
   */

  //-->
   </script>
</head>
<body>
<ul id="result"></ul>
</body>
</html>

テキストのyahooJquery.htmlにあるDOMの表現(data.Result[i].Titleのような)はjQuery内の関数ではうまく動かないようです。jQueryらしくyahooJquery2.htmlにあるようにfind(), each()関数はうまく動作します。

なお、jQueryの1.6以降（くらい）では、$.ajaxよりも$.get関数をもちいることが一般的なようです。（よりスマートに書けます。）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
<!--
  $(document).ready(function () {
      $.get('BusCategorizedRouteXml.xml',
            function(data) {
                $(data).find("item").each(function() {
                    $('#result').append(
                        $('<li></li>').append($(this).attr("name")));
                });
            });
  });
  //-->
</script>
</head>
<body>
<ul id="result"></ul>
</body>
</html>