如何利用ajax獲取博文列表，通過本站小編提供的下文，展示瞭如下技術後，相信你一定會理解的。想了解更多相關資訊請持續關注我們應屆畢業生培訓網。
l AJAX的核心類XMLHttpRequest的使用。
l AJAX通過GET方式獲取服務端xml檔案。
l 利用Javascript操作xml檔案。
l 利用Javascript更新html介面。
Demo概要說明：
作為主頁，引用指令碼，在指令碼中利用AJAX技術請求同目錄下的，請求成功後在中顯示xml中的資訊。
整個過程模擬了AJAX的區域性重新整理效果。
具體程式碼：
Html程式碼()：
程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>獲取部落格園部落格rss列表</title>
<script type="text/javascript" language="javascript" src=""></script>
</head>
<body>
<p id="frmMain">
<ul id="blogTitleList"></ul>
<input name="btnGet" value="獲取部落格標題列表" onclick="javascript:getBlogTitle();" type="button" />
</p>
</body>
</html>
AJAX指令碼()：
程式碼如下：
function getBlogTitle(){
//根據瀏覽器型別建立xmlHttpRequest物件
var xmlHttp;
if(ttpRequest){
//ie7、火狐、谷歌等瀏覽器
xmlHttp = new XMLHttpRequest();
}else{
//ie5、ie6瀏覽器
xmlHttp = new ActiveXObject("TTP");
}
//設定非同步互動完成後的回撥函式
//function(){}為一個匿名函式，這個過程就是把函式的地址傳給XMLHttpRequest物件的onreadystatechange屬性
adystatechange=function(){
//正常情況下status值應該是200，但本地測試無論成功失敗返回的'都是0
if(yState == 4 && us == 0){
//接受xml格式的返回資料，接收文字格式的資料為：onseText();
var requestXML = onseXML;
//獲取xml中的內容部分
var blogContent = lementById("feedContent");
//獲取內容中的h3標題。注意blogTitles將是一個數組，由於javascript是弱型別語言，因此不必指明
var blogTitles = lementsByTagName("h3");
//獲取html頁面中的ul標籤物件
var ulObj = lementById("blogTitleList");
//用來臨時存放部落格標題
var tempTitle;
//遍歷blogTitles陣列，獲取所有的部落格標題
for(i=0;i<th;i++){
//獲取title元素的值
tempTitle = blogTitles[i]dNodes[0]Value;
//將title值插入到介面的ul標籤中
rHTML += "<li>" + tempTitle + "</li>";
}
}
};
//構造互動引數
//第一個引數是指GET方式提交還是POST方式
//第二個引數是提交的URL，它可以是一個文字檔案(*)、指令碼檔案(*)等。
//第三個引數表示是否非同步通訊，ture表示非同步。
("GET","",true);
//提交請求
();
}
博文列表rss(片段)()：
程式碼如下：
<p id="feedContent">
<p class="entry">
<h3>
<a href="">
Socket傳輸檔案時進行校驗(簡單解決TCP粘包問題)
</a>
<p class="lastUpdated">
2012年12月27日 12:57
</p>
</h3>
<p xml:base="" 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="">
C#(伺服器)與Java(客戶端)通過Socket傳遞物件
</a>
<p class="lastUpdated">
2012年12月23日 8:44
</p>
</h3>
<p xml:base="" 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。