ajax初級教程之擷取博文列表_AJAX相關

來源:互聯網
上載者:User

在寫這個Demo時,原本是想直接存取小菜部落格的rss,但這是明顯的跨域訪問,是不允許的。

         因此,小菜把部落格rss儲存到了本地,就是一個xml格式檔案,直接用AJAX請求本地的xml檔案。

         通過本例,展示了如下技術:

         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):

複製代碼 代碼如下:

 <!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="擷取部落格標題列表" onclick="javascript:getBlogTitle();" type="button" />
         </div>
     </body>
 </html>

         AJAX指令碼(ajax.js):

複製代碼 代碼如下:

function getBlogTitle(){
    //根據瀏覽器類型建立xmlHttpRequest對象
    var xmlHttp;
    if(window.XMLHttpRequest){
        //ie7、Firefox、Google等瀏覽器
        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");
      //擷取內容中的h3標題。注意blogTitles將是一個數組,由於javascript是弱類型語言,因此不必指明
      var blogTitles = blogContent.getElementsByTagName("h3");
      //擷取html頁面中的ul標籤對象
      var ulObj = document.getElementById("blogTitleList");
      //用來臨時存放部落格標題
      var tempTitle;
      //遍曆blogTitles數組,擷取所有的部落格標題
      for(i=0;i<blogTitles.length;i++){
        //擷取title元素的值
        tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;
        //將title值插入到介面的ul標籤中
        ulObj.innerHTML += "<li>" + tempTitle + "</li>";
      }
        }
    };
    //構造互動參數
    //第一個參數是指GET方式提交還是POST方式
    //第二個參數是提交的URL,它可以是一個文字檔(*.xml)、指令檔(*.aspx)等。
    //第三個參數表示是否非同步通訊,ture表示非同步。
    xmlHttp.open("GET","rss.xml",true);
    //提交請求
    xmlHttp.send();
}

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

複製代碼 代碼如下:

 <div id="feedContent">
   <div class="entry">
     <h3>
       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html">
         Socket傳輸檔案時進行校正(簡單解決TCP粘包問題)
       </a>
       <div class="lastUpdated">
         2012年12月27日 12:57
       </div>
     </h3>
     <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 style="clear: both;">
   </div>
   <div class="entry">
     <h3>
       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html">
         C#(伺服器)與Java(用戶端)通過Socket傳遞對象
       </a>
       <div class="lastUpdated">
         2012年12月23日 8:44
       </div>
     </h3>
     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent">
       最近做項目,需要C#與java間的互動技術: n S
     </div>
   </div>
   <div style="clear: both;">
   </div>

         上邊的代碼注釋非常詳細,相信讀者能夠領會這個過程。

         補充說明:

         l  注意本例中,在設定XMLHttpRequest對象的onreadystatechange屬性時,在回呼函數中應該判斷伺服器是否響應完成,其中readyState值為4表示響應完成,status值為200表示請求成功,但由於本例是在本地示範的,並沒有搭建伺服器環境,因此status的值總是0。

         l  所謂跨域訪問,即在某個伺服器中通過javascript指令碼請求其他伺服器,所有類似這樣的請求都叫跨域。跨域訪問會直接被瀏覽器拒絕。跨域關鍵問題在於是瀏覽器拒絕了請求,是javascript許可權不足引起的,而不是說XMLHttpRequest對象沒有跨域訪問的功能,XMLHttpRequest對象無所謂域,假如把XMLHttpRequest對象寫在程式中(包括C/S、B/S程式)而不是指令碼中,可以隨意訪問伺服器,甚至可以類比手工訪問。關於如何解決跨域訪問問題,請讀者自行google。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.