また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ドキュメントの最初の部分に定義されています。
＊どうしても 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 を取り出すイメージ
名前空間が使われた要素を取り出すには、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 を取り出すイメージ
(6)変数 item から title という要素を取り出している部分です。
var title = item[i].getElementsByTagName('title');
＊titleは配列になります。
titleを取り出すイメージ
(7)titleの値を取り出している部分です。
var titleValue = title[0].firstChild.nodeValue;
開始タグと終了タグではさまれた部分も要素になるので、その最初の子要素(firstChild)の値(nodeValue)で取得できます。
値を取り出すイメージ
＊＊＊ 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{
処理
}
