RSS is an XML-based file standard. Content sharing between websites can be easily achieved through XML files that comply with the RSS specification. Ajax is the abbreviation of Asynchronous JavaScript and XML. Ajax technology allows you to make a request to a server via Hypertext Transfer Protocol (Http) and continue processing additional data while waiting for the response. Reading remote XML files can be easily achieved through Ajax technology. Therefore, Ajax technology can be used to remotely access summary information generated according to the RSS standard. We can even write an RSS reader ourselves.
Ajax is not a new language or technology, it is actually several technologies combined in a certain way. They all play their respective roles in the collaboration, which includes: using XHTML and CSS for standardized presentation; using DOM for dynamic display and interaction; using XML and XSLT for data exchange and processing; using XMLHttpRequest for asynchronous data reading; and finally using JavaScript for binding. and process all data. Okay, let’s not talk more about the theory. Let’s look directly at the code.
Create an XMLHttpRequest object and send the request to the server:
Copy the code code as follows:
function createXHR(url){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("post",url,"false");
xmlHttp.onreadystatechange = getResponse; xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}
Traverse the Rss document through DOM operations to get the required value:
Copy the code code as follows:
function readDoc(doc){
root = doc.getElementsByTagName("channel")[0];
docTitle = root.getElementsByTagName("title")[0];
docLink = root.getElementsByTagName("link")[0];
docDescription = root.getElementsByTagName("description")[0];
items = root.getElementsByTagName("item");
for(var i=0;i<items.length;i++){
itemTitle = items[i].getElementsByTagName("title")[0];
itemLink = items[i].getElementsByTagName("link")[0];
itemDescription = items[i].getElementsByTagName("description")[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 = "none";
document.getElementById("printRss").getElementsByTagName("span")[0].style.display = "none";
document.getElementById("printRss").innerHTML = document.getElementById("printRss").innerHTML + temp;
}
}
Call the createXHR(url) function, pass in the parameters, and send the request to the server:
Copy the code code as follows:
createXHR("http://www.apple.com.cn/hotnews/rss/hotnews.rss");
Got response:
Copy the code code as follows:
function getResponse(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
rssDoc = xmlHttp.responseXML;
readDoc(rssDoc);//Call the readDoc() function
}else{
document.getElementById("rssTitle").innerHTML = "Read exception!";
//alert(xmlHttp.status);
}
}
}