- 相關推薦
如何利用ajax獲取博文列表
如何利用ajax獲取博文列表，通過yjbys小編提供的下文，展示了如下技術后，相信你一定會理解的。想了解更多相關資訊請持續關注我們應屆畢業生培訓網。
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>
<p id="frmMain">
<ul id="blogTitleList"></ul>
<input name="btnGet" value="獲取博客標題列表" onclick="javascript:getBlogTitle();" type="button" />
</p>
</body>
</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");
//獲取內容中的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)：
代碼如下：
<p id="feedContent">
<p class="entry">
<h3>
<a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html">
Socket傳輸文件時進行校驗(簡單解決TCP粘包問題)
</a>
<p class="lastUpdated">
2012年12月27日 12:57
</p>
</h3>
<p 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 ...
</p>
</p>
<p style="clear: both;">
</p>
<p class="entry">
<h3>
<a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html">
C#(服務器)與Java(客戶端)通過Socket傳遞對象
</a>
<p class="lastUpdated">
2012年12月23日 8:44
</p>
</h3>
<p xml:base="http://feed.cnblogs.com/blog/u/135156/rss" class="feedEntryContent">
最近做項目，需要C#與java間的交互技術： n S
</p>
</p>
<p style="clear: both;">
</p>
上邊的代碼注釋非常詳細，相信讀者能夠領會這個過程。
補充說明：
l 注意本例中，在設置XMLHttpRequest對象的onreadystatechange屬性時，在回調函數中應該判斷服務器是否響應完成，其中readyState值為4表示響應完成，status值為200表示請求成功，但由于本例是在本地演示的，并沒有搭建服務器環境，因此status的值總是0。
l 所謂跨域訪問，即在某個服務器中通過javascript腳本請求其他服務器，所有類似這樣的請求都叫跨域。跨域訪問會直接被瀏覽器拒絕。跨域關鍵問題在于是瀏覽器拒絕了請求，是javascript權限不足引起的，而不是說XMLHttpRequest對象沒有跨域訪問的功能，XMLHttpRequest對象無所謂域，假如把XMLHttpRequest對象寫在程序中(包括C/S、B/S程序)而不是腳本中，可以隨意訪問服務器，甚至可以模擬手工訪問。關于如何解決跨域訪問問題，請讀者自行google。
【如何利用ajax獲取博文列表】相關文章：
如何利用微博進行網站營銷?03-21
揭秘利用ajax實現預覽鏈接看鏈接的內容03-18
如何獲取PHP數組的鍵與值呢03-31
JS AJAX前臺如何給后臺類的函數傳遞參數的方法03-18
如何獲取一款真正的好游戲03-06
如何合理利用廚房空間03-20
拍攝如何利用現場光03-11
考研英語如何利用真題09-23