スポンサード リンク

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

今回は sample006 で使用した Ajax のプログラムについて詳しく解説します。これまでに学んだプログラムとほとんど同じなので、変更した部分を中心に解説します。

またXML名前空間を扱う部分と、クロスブラウザ対応にするところは新しいので、そこに重点を置いて学んでください。

基本的な解説は既に sample003 で行なっています。そちらも参考にしてください。
Step14・sample003の解説
http://ajax.pgtop.net/category/4479851-1.html


■index.html側

(1)外部ファイルとして記述した JavaScript のファイル名を newkw.js に変更しました。

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


■index.js側

(1)イベントハンドラの設定で、呼び出す関数を newkwDisp に変更しました。

$("btnData").onclick = newkwDisp;


■index.css

変更はありません。


■newkw.php

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

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

$url = "http://search.goo.ne.jp/rss/newkw.rdf";


■newkw.js側

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

function newkwDisp() {
  省略
}


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

var url = "newkw.php";


(3)接頭辞に対応したURIを変数に代入している部分です。

var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";

URIはXMLドキュメントの最初の部分に定義されています。
ajax-279.gif

*どうしても URI がわからない場合は、「*」アスタリスクを使うこともできますが、その場合は「全て」ということになります。

var url = "*";


(4)通信で取得したデータから rdf:RDF という要素を取り出している部分です。

var response;

if(document.all){
  response = data.responseXML.getElementsByTagName('rdf:RDF');
}else{
  response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');
}

*1つしかなくても response は配列になります。

rdf:RDF を取り出すイメージ
ajax-280.gif

名前空間が使われた要素を取り出すには、getElementsByTagNameNS() というメソッドを使います。しかしこのメソッドは Internet Explorer では使えないため、Webブラウザによって処理を分ける必要があります。

if文の条件になっている document.all は Internet Explorer 4.0 で実装された独自拡張です。これが使えるブラウザは Internet Explorer ということになるので、getElementsByTagName()メソッドを使います。

逆にWebブラウザが Internet Explorer 以外の場合は getElementsByTagNameNS() メソッドを使う仕組みです。その時、引数になっている変数 rdf には接頭辞に対応したURIが入っています。


(5)変数 response から、さらに item という要素を取り出している部分です。

var item = response[0].getElementsByTagName('item');

response は配列なので、添え字を指定する必要があります。item も配列になります。

item を取り出すイメージ
ajax-281.gif


(6)変数 item から title という要素を取り出している部分です。

var title = item[i].getElementsByTagName('title');

*titleは配列になります。

titleを取り出すイメージ
ajax-282.gif


(7)titleの値を取り出している部分です。

var titleValue = title[0].firstChild.nodeValue;

開始タグと終了タグではさまれた部分も要素になるので、その最初の子要素(firstChild)の値(nodeValue)で取得できます。

値を取り出すイメージ
ajax-283.gif


*** link、dc:date でも同じようにイメージしてください。 ***


(8)変数 item から link という要素を取り出している部分です。

var link = item[i].getElementsByTagName('link');

*linkは配列になります。


(9)linkの値を取り出している部分です。

var linkValue = link[0].firstChild.nodeValue;


(10)変数 item から dc:date という要素を取り出している部分です。このタグは名前空間が使われていますので、ブラウザにより処理を分けています。

var dc ="http://purl.org/dc/elements/1.1/";
var dcDate;

if(document.all){
  dcDate = item[i].getElementsByTagName('dc:date');
}else{
  dcDate = item[i].getElementsByTagNameNS(dc,'date');
}

*dcDateは配列になります。


(11)dc:dateの値を取り出している部分です。

var dcDateValue = dcDate[0].firstChild.nodeValue;


(12)取得したデータを連結して組み立てている部分です。この部分を工夫することで、いろんな形で表示することができます。

tmpHtml += dcDateValue + " :"
tmpHtml += "<a href='" + linkValue + "' target='_blank'>" + titleValue + "</a>";
tmpHtml += "<br />\n";

for文が1回繰り返される毎に、以下のようなHTMLが連結していきます。
2008-01-16T14:47:46+09:00 :<a href='' target='_blank'>テキスト</a><br />

プログラミングする時は、逆に組み立てたいHTMLを想像しながら書くことがコツです。


【解説】

Web系のプログラミングで難しいのは、クロスブラウザ対応にすることです。今回は単純に Internet Explorer と それ以外という処理に分岐しました。

しかし場合によっては、さらに Firefox、Safari、Opera、Netscape、Mozilla ごとに処理を分けなければならないこともあります。

現状では Internet Explorer と Firefox でシェアの 93% を超えるようなので、学習レベルでしたら、とりあえずこの2つのWebブラウザに対応できれば大丈夫です。


(1)Webブラウザの判別方法について

今回はWebブラウザによって処理を切り替えるため、document.all オブジェクトの有無を判定する「オブジェクト検出」という方法を使いました。all、getElementById、layers などがよく使われます。

if(document.all){
  処理
}else{
  処理
}

実際に使っている getElementsByTagNameNS で書くこともできます。使えない場合が Internet Explorer だということに注意してください。「!」で判定を逆にしています。「!」を使いたくない場合は、処理の内容を逆にしてください。

if(!document.getElementsByTagNameNS){
  処理
}else{
  処理
}


(2)他にも appName というプロパティの値で、ブラウザ名から判断する方法もあります。

if (navigator.appName == "Microsoft Internet Explorer") {
  処理
}else{
  処理
}


スポンサード リンク






Ajax初心者入門講座TOPへ