上一篇我们已经做了一个例子 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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的问题。
本文全部原码下载