在寫(xiě)這個(gè)Demo時(shí),原本是想直接訪(fǎng)問(wèn)小菜博客的rss,但這是明顯的跨域訪(fǎng)問(wèn),是不允許的。
因此,小菜把博客rss保存到了本地,就是一個(gè)xml格式文件,直接用AJAX請(qǐng)求本地的xml文件。
通過(guò)本例,展示了如下技術(shù):
l AJAX的核心類(lèi)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):
代碼如下:
<!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):
代碼如下:
function getBlogTitle(){
//根據(jù)瀏覽器類(lèi)型創(chuàng)建xmlHttpRequest對(duì)象
var xmlHttp;
if(window.XMLHttpRequest){
//ie7、火狐、谷歌等瀏覽器
xmlHttp = new XMLHttpRequest();
新聞熱點(diǎn)
疑難解答
圖片精選