AJAX实用教程——获取博客园博文列表
???????? 在寫這個(gè)Demo時(shí)，原本是想直接訪問(wèn)小菜博客的rss，但這是明顯的跨域訪問(wèn)，是不允許的。
???????? 因此，小菜把博客rss保存到了本地，就是一個(gè)xml格式文件，直接用AJAX請(qǐng)求本地的xml文件。
?
???????? 通過(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)：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>獲取博客園博客rss列表</title> 6 <script type="text/javascript" language="javascript" src="ajax.js"></script> 7 </head> 8 9 <body> 10 <div id="frmMain"> 11 <ul id="blogTitleList"></ul> 12 <input name="btnGet" value="獲取博客標(biāo)題列表" onclick="javascript:getBlogTitle();" type="button" /> 13 </div> 14 </body> 15 </html>???????? AJAX腳本(ajax.js)：
1 function getBlogTitle(){ 2 //根據(jù)瀏覽器類型創(chuàng)建xmlHttpRequest對(duì)象 3 var xmlHttp; 4 if(window.XMLHttpRequest){ 5 //ie7、火狐、谷歌等瀏覽器 6 xmlHttp = new XMLHttpRequest(); 7 }else{ 8 //ie5、ie6瀏覽器 9 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 10 } 11 12 //設(shè)置異步交互完成后的回調(diào)函數(shù) 13 //function(){}為一個(gè)匿名函數(shù)，這個(gè)過(guò)程就是把函數(shù)的地址傳給XMLHttpRequest對(duì)象的onreadystatechange屬性 14 xmlHttp.onreadystatechange=function(){ 15 //正常情況下status值應(yīng)該是200，但本地測(cè)試無(wú)論成功失敗返回的都是0 16 if(xmlHttp.readyState == 4 && xmlHttp.status == 0){ 17 //接受xml格式的返回?cái)?shù)據(jù)，接收文本格式的數(shù)據(jù)為：xmlHttp.responseText(); 18 var requestXML = xmlHttp.responseXML; 19 //獲取xml中的內(nèi)容部分 20 var blogContent = requestXML.getElementById("feedContent"); 21 //獲取內(nèi)容中的h3標(biāo)題。注意blogTitles將是一個(gè)數(shù)組，由于javascript是弱類型語(yǔ)言，因此不必指明 22 var blogTitles = blogContent.getElementsByTagName("h3"); 23 //獲取html頁(yè)面中的ul標(biāo)簽對(duì)象 24 var ulObj = document.getElementById("blogTitleList"); 25 //用來(lái)臨時(shí)存放博客標(biāo)題 26 var tempTitle; 27 //遍歷blogTitles數(shù)組，獲取所有的博客標(biāo)題 28 for(i=0;i<blogTitles.length;i++){ 29 //獲取title元素的值 30 tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue; 31 //將title值插入到界面的ul標(biāo)簽中 32 ulObj.innerHTML += "<li>" + tempTitle + "</li>"; 33 } 34 } 35 }; 36 //構(gòu)造交互參數(shù) 37 //第一個(gè)參數(shù)是指GET方式提交還是POST方式 38 //第二個(gè)參數(shù)是提交的URL，它可以是一個(gè)文本文件(*.xml)、腳本文件(*.aspx)等。 39 //第三個(gè)參數(shù)表示是否異步通信，ture表示異步。 40 xmlHttp.open("GET","rss.xml",true); 41 42 //提交請(qǐng)求 43 xmlHttp.send(); 44 }???????? 博文列表rss(片段)(rss.xml)：
1 <div id="feedContent"> 2 <div class="entry"> 3 <h3> 4 <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html"> 5 Socket傳輸文件時(shí)進(jìn)行校驗(yàn)(簡(jiǎn)單解決TCP粘包問(wèn)題) 6 </a> 7 <div class="lastUpdated"> 8 2012年12月27日 12:57 9 </div> 10 </h3> 11 <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent"> 12 Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE ... 13 </div> 14 </div> 15 <div style="clear: both;"> 16 </div> 17 <div class="entry"> 18 <h3> 19 <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html"> 20 C#(服務(wù)器)與Java(客戶端)通過(guò)Socket傳遞對(duì)象 21 </a> 22 <div class="lastUpdated"> 23 2012年12月23日 8:44 24 </div> 25 </h3> 26 <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent"> 27 最近做項(xiàng)目，需要C#與java間的交互技術(shù)： n S 28 </div> 29 </div> 30 <div style="clear: both;"> 31 </div>???????? 上邊的代碼注釋非常詳細(xì)，相信讀者能夠領(lǐng)會(huì)這個(gè)過(guò)程。
?
???????? 補(bǔ)充說(shuō)明：
?
???????? l? 注意本例中，在設(shè)置XMLHttpRequest對(duì)象的onreadystatechange屬性時(shí)，在回調(diào)函數(shù)中應(yīng)該判斷服務(wù)器是否響應(yīng)完成，其中readyState值為4表示響應(yīng)完成，status值為200表示請(qǐng)求成功，但由于本例是在本地演示的，并沒(méi)有搭建服務(wù)器環(huán)境，因此status的值總是0。
???????? l? 所謂跨域訪問(wèn)，即在某個(gè)服務(wù)器中通過(guò)javascript腳本請(qǐng)求其他服務(wù)器，所有類似這樣的請(qǐng)求都叫跨域。跨域訪問(wèn)會(huì)直接被瀏覽器拒絕。跨域關(guān)鍵問(wèn)題在于是瀏覽器拒絕了請(qǐng)求，是javascript權(quán)限不足引起的，而不是說(shuō)XMLHttpRequest對(duì)象沒(méi)有跨域訪問(wèn)的功能，XMLHttpRequest對(duì)象無(wú)所謂域，假如把XMLHttpRequest對(duì)象寫在程序中(包括C/S、B/S程序)而不是腳本中，可以隨意訪問(wèn)服務(wù)器，甚至可以模擬手工訪問(wèn)。關(guān)于如何解決跨域訪問(wèn)問(wèn)題，請(qǐng)讀者自行g(shù)oogle。
?
???????? 附：
?
???????? 點(diǎn)擊下載Demo
?
?
總結(jié)
以上是生活随笔為你收集整理的AJAX实用教程——获取博客园博文列表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【CF 应用开发大赛】JEECG 基于代
- 下一篇： css3动画模块transform tr