上一篇我們已經做了一個例子 step5.html+news.xml,但是還是通過文件系統實現了對xml文件的訪問。在實際的開發中我們經常在做純前端頁面的過程中這樣做,這也是ajax開發的另一個優勢:前后臺分離,契約式的開發。
那么現在開發完成了,我們需要一個服務器來發布我們的xml了,解決我們留下的第一個問題了。基本上任何web服務器都可以用來運行我們的例子。我正在使用的是apache,你可以在http://httpd.apache.org/download.cgi 上找到最新版本的下載,當然也可以tomcat、iis、weblogic或者其他任何你喜歡的服務器。
步驟6:
你需要做的是:
1 安裝服務器
2 把上一篇文章中的例子放到服務器上。放根目錄、建目錄或者虛擬主機都可以。
3 啟動服務器
4 在瀏覽器中訪問通過服務器發布出來的step5.html。
只要確認test.html和news.xml在同一個目錄下被發布并且都可以在IE瀏覽器中訪問到,我們的第一個Ajax應用應該就可以在http上運行了。這對大多數有經驗的朋友來說應該不會遇到任何問題。如果有問題,請問問你身邊的朋友。
接下來我們將解決上篇文章留下來的第二個問題,讓FireFox瀏覽器也能運行我們的Ajax應用。為此我們要修改頁面,讓頁面放棄IE特有的XMLDOM瀏覽器控件,改用主流瀏覽器都支持的xmlhttp/xmlhttprequest控件
步驟7:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<meta name="Author" content="emu" />
<meta name="Keywords" content="ajax" />
<meta name="Description" content="Ajax裸奔-步驟7" />
<title> Ajax裸奔-步驟7 </title>
<script type="text/JavaScript">
<!--
var newsXML;
function init(){
newsXML = window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));//選擇合適的xmlhttprequest控件
newsXML.onreadystatechange= handleXML;
newsXML.open("GET","news.xml",true);
newsXML.send(null);
}
function handleXML(){
if(newsXML.readyState==4){
var x = newsXML.responseXML.getElementsByTagName("data")[0];
document.body.innerHTML=x.text?x.text:x.textContent;//不同的xmlhttprequest控件有不同的用法。
}
}
//-->
</script>
</head>
<body onload="init()">
</body>
</html>
好了,現在頁面可以在IE和FireFox兩個最主流的瀏覽器上運行了。接下來,我們要開始在這個例子的基礎上深入Ajax了。我決定先拿xml開刀。下一篇我們將開始討論AJaX還是AJaH的問題。
本文全部原碼下載