主頁 > 知識(shí)庫 > ajax初級(jí)教程之獲取博文列表

ajax初級(jí)教程之獲取博文列表

熱門標(biāo)簽:青海醫(yī)療智能外呼系統(tǒng)怎么樣 上海浦東百度地圖標(biāo)注中心注冊 老虎郵局地圖標(biāo)注點(diǎn) 目標(biāo)三維地圖標(biāo)注 外呼系統(tǒng)獲取客戶手機(jī)號(hào) 襄陽外呼系統(tǒng)接口 科智聯(lián)智能電銷機(jī)器人 徐州電銷卡外呼系統(tǒng)供應(yīng)商 百靈鳥

在寫這個(gè)Demo時(shí),原本是想直接訪問小菜博客的rss,但這是明顯的跨域訪問,是不允許的。

         因此,小菜把博客rss保存到了本地,就是一個(gè)xml格式文件,直接用AJAX請求本地的xml文件。

         通過本例,展示了如下技術(shù):

         l  AJAX的核心類XMLHttpRequest的使用。

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

         l  利用Javascript操作xml文件。

         l  利用Javascript更新html界面。

         Demo概要說明:

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

         整個(gè)過程模擬了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對象
    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è)過程就是把函數(shù)的地址傳給XMLHttpRequest對象的onreadystatechange屬性
    xmlHttp.onreadystatechange=function(){
      //正常情況下status值應(yīng)該是200,但本地測試無論成功失敗返回的都是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)容中的h3標(biāo)題。注意blogTitles將是一個(gè)數(shù)組,由于javascript是弱類型語言,因此不必指明
      var blogTitles = blogContent.getElementsByTagName("h3");
      //獲取html頁面中的ul標(biāo)簽對象
      var ulObj = document.getElementById("blogTitleList");
      //用來臨時(shí)存放博客標(biāo)題
      var tempTitle;
      //遍歷blogTitles數(shù)組,獲取所有的博客標(biāo)題
      for(i=0;iblogTitles.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);
    //提交請求
    xmlHttp.send();
}

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

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

 div id="feedContent">
   div class="entry">
     h3>
       a >
         Socket傳輸文件時(shí)進(jìn)行校驗(yàn)(簡單解決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 >
         C#(服務(wù)器)與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">
       最近做項(xiàng)目,需要C#與java間的交互技術(shù): n S
     /div>
   /div>
   div style="clear: both;">
   /div>

         上邊的代碼注釋非常詳細(xì),相信讀者能夠領(lǐng)會(huì)這個(gè)過程。

         補(bǔ)充說明:

         l  注意本例中,在設(shè)置XMLHttpRequest對象的onreadystatechange屬性時(shí),在回調(diào)函數(shù)中應(yīng)該判斷服務(wù)器是否響應(yīng)完成,其中readyState值為4表示響應(yīng)完成,status值為200表示請求成功,但由于本例是在本地演示的,并沒有搭建服務(wù)器環(huán)境,因此status的值總是0。

         l  所謂跨域訪問,即在某個(gè)服務(wù)器中通過javascript腳本請求其他服務(wù)器,所有類似這樣的請求都叫跨域??缬蛟L問會(huì)直接被瀏覽器拒絕??缬蜿P(guān)鍵問題在于是瀏覽器拒絕了請求,是javascript權(quán)限不足引起的,而不是說XMLHttpRequest對象沒有跨域訪問的功能,XMLHttpRequest對象無所謂域,假如把XMLHttpRequest對象寫在程序中(包括C/S、B/S程序)而不是腳本中,可以隨意訪問服務(wù)器,甚至可以模擬手工訪問。關(guān)于如何解決跨域訪問問題,請讀者自行g(shù)oogle。

您可能感興趣的文章:
  • Ajax.基礎(chǔ)教程 電子書版 提供下載
  • 比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集
  • ASP ajax分頁教程一
  • Ajax+PHP簡單基礎(chǔ)入門實(shí)例教程
  • jquery 框架使用教程 AJAX篇
  • 十大最佳Ajax教程收集(圖文)
  • jquery1.4 教程二 ajax方法的改進(jìn)
  • 分享精心挑選的12款優(yōu)秀jQuery Ajax分頁插件和教程
  • ThinkPHP中ajax使用實(shí)例教程
  • AJAX初級(jí)教程之初識(shí)AJAX

標(biāo)簽:揭陽 商洛 咸寧 佛山 股票 辛集 紅河 荊州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ajax初級(jí)教程之獲取博文列表》,本文關(guān)鍵詞  ajax,初級(jí)教程,之,獲取,博文,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ajax初級(jí)教程之獲取博文列表》相關(guān)的同類信息!
  • 本頁收集關(guān)于ajax初級(jí)教程之獲取博文列表的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章