zoukankan      html  css  js  c++  java
  • Javascript Ajax异步读取RSS文档

          RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享。Ajax 是Asynchronous JavaScript and XML的缩写。通过 Ajax 技术可以经由超文本传输协议(Http) 向一个服务器发出请求并且在等待该响应时继续处理另外的数据。通过 Ajax 技术可以很容易实现读取远程 XML文件,因此,可以使用 Ajax技术实现远程访问依据 RSS 标准生成的摘要信息,甚至我们可以自己写一个 RSS 阅读器。

            Ajax 并不是一门新的语言或技术, 它实际上是几项技术按一定的方式组合在一起。共同在协作中发挥各自的作用, 它包括:使用XHTML 和CSS 标准化呈现; 使用DOM 实现动态显示和交互; 使用XML 和XSLT 进行数据交换与处理; 使用XMLHttpRequest进行异步数据读取; 最后用 JavaScript 绑定和处理所有数据。好了,对于理论就不在多说了,下面我们直接看代码吧。

            创建XMLHttpRequest对象并将请求发送到服务器:

     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);
     }

    通过DOM操作对Rss文档进行遍历,得到需要的值:

    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; 
        } 
    }

    调用createXHR(url)函数,传入参数,向服务器发送求:

    createXHR("http://www.apple.com.cn/hotnews/rss/hotnews.rss");

    得到响应:

      function getResponse(){ 
       if(xmlHttp.readyState == 4){      
            if(xmlHttp.status == 200){  
                rssDoc = xmlHttp.responseXML; 
                readDoc(rssDoc);//调用readDoc()函数 
            }else{ 
                document.getElementById("rssTitle").innerHTML = "读取异常!"; 
                //alert(xmlHttp.status); 
            } 
        } 
    }
  • 相关阅读:
    第二周总结
    个人总结
    软件设计模式7
    软件设计模式6
    软件设计模式5
    软件设计模式4
    软件设计模式3
    软件设计模式2
    软件设计模式1
    软件构造2
  • 原文地址:https://www.cnblogs.com/ranran/p/js_rss.html
Copyright © 2011-2022 走看看