jQueryのAjaxでJR東日本エリアの駅ごとの乗車人員を取得してみる

はじめに

jQueryとjquery.xdomainajax.jsでJR東日本エリアの駅ごとの乗車人員を取得してみました。

基礎 Ajax + JavaScript

posted with amazlet at 13.08.31

佐藤和人
インプレスジャパン
売り上げランキング: 202,059

Amazon.co.jpで詳細を見る

jquery.xdomainajax.jsの使い方

こちらの記事にまとめています。

jQueryでクロスドメインAjaxを実現する方法(jquery.xdomainajax.js) - 大人になったら肺呼吸

サンプルプログラム

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JR東日本エリア内 各駅の乗車人員</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.xdomainajax.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>JR東日本エリア内 各駅の乗車人員</h1>
    <script>
      
      // ロード完了イベント
      $(document).ready(function(){
        $.ajax({
          url: 'http://www.jreast.co.jp/passenger/index.html',
          type: 'GET',
          cache: false, // キャッシュOFF

          // データのロード完了時の処理
          success: function(res) {
            // table タグの検索
            var content = new Array();
            content = $(res.responseText).find("table").each(function(){
              content.push($(this).text());
            });
            
            var objTable = $(content[3]);
            
            // 5行目以降を配列にプッシュしていく
            var objTr = new Array();
            var i = 0;
            $(objTable).find("tr").each(function(){
              if(i >= 5) {
                objTr.push($(this));
              }
              i++;
            });
            
            // trタグから子要素のtdタグを取り出して、画面に書き出し
            for( var i=0;i<50;i++ ){
              var objTd = $(objTr[i]).children();
              for( var j=0;j<objTd.length;j++ ){
                $(document.body).append(objTd.eq(j).text()); // データ取り出し
                $(document.body).append("<br>");             // 改行
              }
            }
          }
        });
      });
    </script>
  </body>
</html>