Ajax 裸奔之二-技术开发专区

Ajax 裸奔之二

作者：emu 编辑：王竹岩 2006-05-31 17:19

【IT168 技术文档】

　　上一篇我们已经做了一个例子 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的问题。

关注我们