emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks


上一篇我们已经做了一个例子 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的问题。
本文全部原码下载

posted on 2006-01-26 15:48 emu 阅读(1886) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: