ajax中如何獲取博文列表

本篇內(nèi)容介紹了“ajax中如何獲取博文列表”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)觀山湖免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

         通過(guò)本例，展示了如下技術(shù)：

         l  AJAX的核心類XMLHttpRequest的使用。

         l  AJAX通過(guò)GET方式獲取服務(wù)端xml文件。

         l  利用Javascript操作xml文件。

         l  利用Javascript更新html界面。

         Demo概要說(shuō)明：

         index.html作為主頁(yè)，引用ajax.js腳本，在ajax.js腳本中利用AJAX技術(shù)請(qǐng)求同目錄下的rss.xml，請(qǐng)求成功后在index.html中顯示xml中的信息。

         整個(gè)過(guò)程模擬了AJAX的局部刷新效果。

         具體代碼：

         Html代碼(index.html)：

復(fù)制代碼 代碼如下:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>獲取博客園博客rss列表</title>
         <script type="text/javascript" language="javascript" src="ajax.js"></script>
     </head>
     <body>
         <div id="frmMain">
             <ul id="blogTitleList"></ul>
             <input name="btnGet" value="獲取博客標(biāo)題列表" onclick="javascript:getBlogTitle();" type="button" />
         </div>
     </body>
 </html>

         AJAX腳本(ajax.js)：

復(fù)制代碼 代碼如下:


function getBlogTitle(){
    //根據(jù)瀏覽器類型創(chuàng)建xmlHttpRequest對(duì)象
    var xmlHttp;
    if(window.XMLHttpRequest){
        //ie7、火狐、谷歌等瀏覽器
        xmlHttp = new XMLHttpRequest();
    }else{
        //ie5、ie6瀏覽器
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //設(shè)置異步交互完成后的回調(diào)函數(shù)
    //function(){}為一個(gè)匿名函數(shù)，這個(gè)過(guò)程就是把函數(shù)的地址傳給XMLHttpRequest對(duì)象的onreadystatechange屬性
    xmlHttp.onreadystatechange=function(){
      //正常情況下status值應(yīng)該是200，但本地測(cè)試無(wú)論成功失敗返回的都是0
    if(xmlHttp.readyState == 4 && xmlHttp.status == 0){
      //接受xml格式的返回?cái)?shù)據(jù)，接收文本格式的數(shù)據(jù)為：xmlHttp.responseText();
      var requestXML = xmlHttp.responseXML;
      //獲取xml中的內(nèi)容部分
      var blogContent = requestXML.getElementById("feedContent");
      //獲取內(nèi)容中的h4標(biāo)題。注意blogTitles將是一個(gè)數(shù)組，由于javascript是弱類型語(yǔ)言，因此不必指明
      var blogTitles = blogContent.getElementsByTagName("h4");
      //獲取html頁(yè)面中的ul標(biāo)簽對(duì)象
      var ulObj = document.getElementById("blogTitleList");
      //用來(lái)臨時(shí)存放博客標(biāo)題
      var tempTitle;
      //遍歷blogTitles數(shù)組，獲取所有的博客標(biāo)題
      for(i=0;i<blogTitles.length;i++){
        //獲取title元素的值
        tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;
        //將title值插入到界面的ul標(biāo)簽中
        ulObj.innerHTML += "<li>" + tempTitle + "</li>";
      }
        }
    };
    //構(gòu)造交互參數(shù)
    //第一個(gè)參數(shù)是指GET方式提交還是POST方式
    //第二個(gè)參數(shù)是提交的URL，它可以是一個(gè)文本文件(*.xml)、腳本文件(*.aspx)等。
    //第三個(gè)參數(shù)表示是否異步通信，ture表示異步。
    xmlHttp.open("GET","rss.xml",true);
    //提交請(qǐng)求
    xmlHttp.send();
}

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

復(fù)制代碼 代碼如下:


 <div id="feedContent">
   <div class="entry">
     <h4>
       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html">
         Socket傳輸文件時(shí)進(jìn)行校驗(yàn)(簡(jiǎn)單解決TCP粘包問(wèn)題)
       </a>
       <div class="lastUpdated">
         2012年12月27日 12:57
       </div>
     </h4>
     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent">
       Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE ...
     </div>
   </div>
   <div >
   </div>
   <div class="entry">
     <h4>
       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html">
         C#(服務(wù)器)與Java(客戶端)通過(guò)Socket傳遞對(duì)象
       </a>
       <div class="lastUpdated">
         2012年12月23日 8:44
       </div>
     </h4>
     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent">
       最近做項(xiàng)目，需要C#與java間的交互技術(shù)： n S
     </div>
   </div>
   <div >
   </div>

“ajax中如何獲取博文列表”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

文章題目：ajax中如何獲取博文列表
標(biāo)題網(wǎng)址：http://bm7419.com/article24/jciece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、靜態(tài)網(wǎng)站、做網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)