ajax中如何获取博文列表

本篇内容介绍了“ajax中如何获取博文列表”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业观山湖免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

         通过本例，展示了如下技术：

         l  AJAX的核心类XMLHttpRequest的使用。

         l  AJAX通过GET方式获取服务端xml文件。

         l  利用Javascript操作xml文件。

         l  利用Javascript更新html界面。

         Demo概要说明：

         index.html作为主页，引用ajax.js脚本，在ajax.js脚本中利用AJAX技术请求同目录下的rss.xml，请求成功后在index.html中显示xml中的信息。

         整个过程模拟了AJAX的局部刷新效果。

         具体代码：

         Html代码(index.html)：

复制代码 代码如下:

 
 
    
        
        
        
    
    
        

    
 

         AJAX脚本(ajax.js)：

复制代码 代码如下:

function getBlogTitle(){
    //根据浏览器类型创建xmlHttpRequest对象
    var xmlHttp;
    if(window.XMLHttpRequest){
        //ie7、火狐、谷歌等浏览器
        xmlHttp = new XMLHttpRequest();
    }else{
        //ie5、ie6浏览器
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //设置异步交互完成后的回调函数
    //function(){}为一个匿名函数，这个过程就是把函数的地址传给XMLHttpRequest对象的onreadystatechange属性
    xmlHttp.onreadystatechange=function(){
      //正常情况下status值应该是200，但本地测试无论成功失败返回的都是0
    if(xmlHttp.readyState == 4 && xmlHttp.status == 0){
      //接受xml格式的返回数据，接收文本格式的数据为：xmlHttp.responseText();
      var requestXML = xmlHttp.responseXML;
      //获取xml中的内容部分
      var blogContent = requestXML.getElementById("feedContent");
      //获取内容中的h4标题。注意blogTitles将是一个数组，由于javascript是弱类型语言，因此不必指明
      var blogTitles = blogContent.getElementsByTagName("h4");
      //获取html页面中的ul标签对象
      var ulObj = document.getElementById("blogTitleList");
      //用来临时存放博客标题
      var tempTitle;
      //遍历blogTitles数组，获取所有的博客标题
      for(i=0;i        //获取title元素的值
        tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;
        //将title值插入到界面的ul标签中
        ulObj.innerHTML += "

" + tempTitle + "

";
      }
        }
    };
    //构造交互参数
    //第一个参数是指GET方式提交还是POST方式
    //第二个参数是提交的URL，它可以是一个文本文件(*.xml)、脚本文件(*.aspx)等。
    //第三个参数表示是否异步通信，ture表示异步。
    xmlHttp.open("GET","rss.xml",true);
    //提交请求
    xmlHttp.send();
}

         博文列表rss(片段)(rss.xml)：

复制代码 代码如下: