Javascript の具体的な実装 Ajax の RSS ドキュメントの非同期読み取り_JavaScript スキル

RSS は XML ベースのファイル標準であり、RSS 仕様に準拠した XML ファイルを通じて Web サイト間でのコンテンツ共有を簡単に実現できます。 Ajax は、Asynchronous JavaScript and XML の略称です。 Ajax テクノロジーを使用すると、ハイパーテキスト転送プロトコル (Http) 経由でサーバーにリクエストを送信し、応答を待っている間も追加データの処理を続けることができます。リモート XML ファイルの読み取りは、Ajax テクノロジーを使用して簡単に実現できます。そのため、Ajax テクノロジーを使用して、RSS 標準に従って生成された概要情報にリモートでアクセスすることもできます。

Ajax は新しい言語やテクノロジーではなく、実際にはいくつかのテクノロジーを特定の方法で組み合わせたものです。これらはすべて、標準化されたプレゼンテーションに XHTML と CSS を使用すること、データ交換と処理に XML と XSLT を使用すること、そして最後に JavaScript を使用することなど、それぞれの役割を果たします。すべてのデータをバインドして処理します。さて、理論についてはこれ以上話さないで、コードを直接見てみましょう。

XMLHttpRequest オブジェクトを作成し、サーバーにリクエストを送信します。

コードをコピー コードは次のとおりです。

function createXHR(url){
if(window .XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange = getResponse; xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}

DOM 操作を通じて RSS ドキュメントをトラバースし、必要な値を取得します:

コードをコピー コードは次のとおりです。

function readDoc(doc){

root = doc .getElementsByTagName("channel")[0];
docTitle = root.getElementsByTagName("title")[0]
docLink = root.getElementsByTagName("link") docDescription = root.getElementsByTagName("description")[0];
items = root.getElementsByTagName("item");
for(var i=0;i itemTitle = items[i].getElementsByTagName("title")[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 = "

" itemTitle.firstChild.nodeValue " " "

" itemDescription.firstChild.nodeValue "

---

";
document.getElementById("readRss").style.display = "none";
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 () 関数を呼び出します
} else {
Document.GetelementByid ("RSSTITLE"). Innerhtml = "例外を読み取ります!"
//alertttp.status); > } }
}
}