RSS は XML ベースのファイル標準であり、RSS 仕様に準拠した XML ファイルを通じて Web サイト間でのコンテンツ共有を簡単に実現できます。 Ajax は、Asynchronous JavaScript and XML の略称です。 Ajax テクノロジーを使用すると、ハイパーテキスト転送プロトコル (Http) 経由でサーバーにリクエストを送信し、応答を待っている間も追加データの処理を続けることができます。リモート XML ファイルの読み取りは、Ajax テクノロジーを使用して簡単に実現できます。そのため、Ajax テクノロジーを使用して、RSS 標準に従って生成された概要情報にリモートでアクセスすることもできます。
Ajax は新しい言語やテクノロジーではなく、実際にはいくつかのテクノロジーを特定の方法で組み合わせたものです。これらはすべて、標準化されたプレゼンテーションに XHTML と CSS を使用すること、データ交換と処理に XML と XSLT を使用すること、そして最後に JavaScript を使用することなど、それぞれの役割を果たします。すべてのデータをバインドして処理します。さて、理論についてはこれ以上話さないで、コードを直接見てみましょう。
XMLHttpRequest オブジェクトを作成し、サーバーにリクエストを送信します。
次のようにコードをコピーします。
関数 createXHR(url){
if(window.XMLHttpRequest){
xmlHttp = 新しい XMLHttpRequest();
}それ以外{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("投稿",url,"false");
xmlHttp.onreadystatechange = getResponse; xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}
DOM 操作を通じて Rss ドキュメントを走査し、必要な値を取得します。
次のようにコードをコピーします。
関数 readDoc(doc){
root = doc.getElementsByTagName("チャンネル")[0];
docTitle = root.getElementsByTagName("タイトル")[0];
docLink = root.getElementsByTagName("リンク")[0];
docDescription = root.getElementsByTagName("説明")[0];
items = root.getElementsByTagName("アイテム");
for(var i=0;i<items.length;i++){
itemTitle = items[i].getElementsByTagName("タイトル")[0];
itemLink = items[i].getElementsByTagName("link")[0];
itemDescription = items[i].getElementsByTagName("説明")[0];
//itemPubDate = items[i].getElementsByTagName("pubDate")[0];
document.getElementById("rssTitle").innerHTML = docTitle.firstChild.nodeValue;
temp = "</h1><h2><a href=""+itemLink.firstChild.nodeValue+"" target="_blank">"+itemTitle.firstChild.nodeValue+"</a></h2>"+"< p>"+itemDescription.firstChild.nodeValue+"</p><hr/>";
document.getElementById("readRss").style.display = "なし";
document.getElementById("printRss").getElementsByTagName("span")[0].style.display = "none";
document.getElementById("printRss").innerHTML = document.getElementById("printRss").innerHTML + temp;
}
}
createXHR(url) 関数を呼び出し、パラメータを渡し、リクエストをサーバーに送信します。
次のようにコードをコピーします。
createXHR("http://www.apple.com.cn/hotnews/rss/hotnews.rss");
応答が得られました:
次のようにコードをコピーします。
関数 getResponse(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
rssDoc = xmlHttp.responseXML;
readDoc(rssDoc);//readDoc() 関数を呼び出す
}それ以外{
document.getElementById("rssTitle").innerHTML = "例外を読み取ります!";
//alert(xmlHttp.status);
}
}
}