Ajax sample008で使用したプログラムの解説。

今回は sample008 で使用した Ajax のプログラムについて詳しく解説します。追加や変更は少しだけで済みます。最小限の変更で複数のRSSフィードが読み込めるようになっています。


■index.html側

(1)flash.js を読み込む部分を追加しました。

<script type="text/javascript" src="flash.js"></script>


(2)ニュース速報を表示するための div要素を追加しました。

<div id="result2"></div>


■index.js側

(1)変数を宣言している部分に新しい変数を追加しました。

var result2;

*この変数の有効範囲はプログラム全体です。


(2)ボタンをクリックした時のイベントハンドラの設定を変更しました。

$("btnData").onclick = newkwDisp;

$("btnData").onclick = function (){newkwDisp();flashDisp();}

呼び出す関数を無名関数にし、その中で複数の関数を呼び出すようにしました。関数内では関数名の後に()カッコが付くことに注意してください。

これは以下のように書くこともできます。無名関数は呼び出したその場ですぐに定義していることがわかります。

$("btnData").onclick = function (){
  newkwDisp();
  flashDisp();
}

中に書くプログラムが多い場合は、この書き方のほうがわかりやすいです。


(3)変数で参照できるようにしている部分に1行追加しました。

result2 = $('result2');

*$()関数は getElementById() のショートカットで、prototype.js の機能です。


(4)「クリア」ボタンをクリックした時に呼び出される関数に1行追加しました。

result2.innerHTML = "";


■newkw.js側

変更はありません。


■flash.js側

(1)関数名を flashDisp に変更しました。

function flashDisp() {
  省略
}


(2)中継プログラムのURLを変更しました。

var url = "flash.php";


(3)div要素に結果を出力している部分を変更しました。

result2.innerHTML = tmpHtml;


■index.css側

(1)result2要素のCSSを指定しました。

#result, #result2 {
  font-size:14px;
  color:#000000;
}

id名を「,」カンマを用いて区切ると、複数要素の属性を一度に指定することができます。


■newkw.php側

変更はありません。


■flash.php側

flash.phpは中継プログラム(スクリプト)です。

(1)取得するURLを変更しました。

$url = "http://mainichi.jp/rss/etc/flash.rss";


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。