在寫這個(gè)Demo時(shí)，原本是想直接訪問小菜博客的rss，但這是明顯的跨域訪問，是不允許的。
因此，小菜把博客rss保存到了本地，就是一個(gè)xml格式文件，直接用AJAX請(qǐng)求本地的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ù)請(qǐng)求同目錄下的rss.xml，請(qǐng)求成功后在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對(duì)象
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對(duì)象的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)簽對(duì)象
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);
//提交請(qǐng)求
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傳遞對(duì)象
/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對(duì)象的onreadystatechange屬性時(shí)，在回調(diào)函數(shù)中應(yīng)該判斷服務(wù)器是否響應(yīng)完成，其中readyState值為4表示響應(yīng)完成，status值為200表示請(qǐng)求成功，但由于本例是在本地演示的，并沒有搭建服務(wù)器環(huán)境，因此status的值總是0。
l 所謂跨域訪問，即在某個(gè)服務(wù)器中通過javascript腳本請(qǐng)求其他服務(wù)器，所有類似這樣的請(qǐng)求都叫跨域?？缬蛟L問會(huì)直接被瀏覽器拒絕?？缬蜿P(guān)鍵問題在于是瀏覽器拒絕了請(qǐng)求，是javascript權(quán)限不足引起的，而不是說XMLHttpRequest對(duì)象沒有跨域訪問的功能，XMLHttpRequest對(duì)象無所謂域，假如把XMLHttpRequest對(duì)象寫在程序中(包括C/S、B/S程序)而不是腳本中，可以隨意訪問服務(wù)器，甚至可以模擬手工訪問。關(guān)于如何解決跨域訪問問題，請(qǐng)讀者自行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
