上一篇我們已經(jīng)做了一個(gè)例子 step5.html+news.xml,但是還是通過(guò)文件系統(tǒng)實(shí)現(xiàn)了對(duì)xml文件的訪問(wèn)。在實(shí)際的開(kāi)發(fā)中我們經(jīng)常在做純前端頁(yè)面的過(guò)程中這樣做,這也是ajax開(kāi)發(fā)的另一個(gè)優(yōu)勢(shì):前后臺(tái)分離,契約式的開(kāi)發(fā)。
那么現(xiàn)在開(kāi)發(fā)完成了,我們需要一個(gè)服務(wù)器來(lái)發(fā)布我們的xml了,解決我們留下的第一個(gè)問(wèn)題了。基本上任何web服務(wù)器都可以用來(lái)運(yùn)行我們的例子。我正在使用的是apache,你可以在http://httpd.apache.org/download.cgi 上找到最新版本的下載,當(dāng)然也可以tomcat、iis、weblogic或者其他任何你喜歡的服務(wù)器。
步驟6:
你需要做的是:
1 安裝服務(wù)器
2 把上一篇文章中的例子放到服務(wù)器上。放根目錄、建目錄或者虛擬主機(jī)都可以。
3 啟動(dòng)服務(wù)器
4 在瀏覽器中訪問(wèn)通過(guò)服務(wù)器發(fā)布出來(lái)的step5.html。
只要確認(rèn)test.html和news.xml在同一個(gè)目錄下被發(fā)布并且都可以在IE瀏覽器中訪問(wèn)到,我們的第一個(gè)Ajax應(yīng)用應(yīng)該就可以在http上運(yùn)行了。這對(duì)大多數(shù)有經(jīng)驗(yàn)的朋友來(lái)說(shuō)應(yīng)該不會(huì)遇到任何問(wèn)題。如果有問(wèn)題,請(qǐng)問(wèn)問(wèn)你身邊的朋友。
接下來(lái)我們將解決上篇文章留下來(lái)的第二個(gè)問(wèn)題,讓FireFox瀏覽器也能運(yùn)行我們的Ajax應(yīng)用。為此我們要修改頁(yè)面,讓頁(yè)面放棄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>
好了,現(xiàn)在頁(yè)面可以在IE和FireFox兩個(gè)最主流的瀏覽器上運(yùn)行了。接下來(lái),我們要開(kāi)始在這個(gè)例子的基礎(chǔ)上深入Ajax了。我決定先拿xml開(kāi)刀。下一篇我們將開(kāi)始討論AJaX還是AJaH的問(wèn)題。
本文全部原碼下載