第一个AJAX程序

第一个AJAX程序

 1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2 < html >
 3 < head >
 4      < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb18030"   />
 5      < meta  name ="Author"  content ="emu"   />
 6      < meta  name ="Keywords"  content ="ajax"   />
 7      < meta  name ="Description"  content ="Ajax裸奔-步骤5"   />
 8      < title >  原型页面  </ title >
 9      < script  type ="text/JavaScript" >
10    <!--
11    var newsXML;
12    function init(){
13        newsXML = new ActiveXObject("microsoft.XMLDOM"); //创建XMLDOM对象，用以通过文件系统或者http连接访问xml文件
14        newsXML.async= true; //规定XMLDOM对象采用异步方式加载数据
15        newsXML.onreadystatechange= handleXML; //指定加载到xml之后采用那个函数来处理xml数据
16        newsXML.load("news.xml"); //开始装载xml数据
17    }
18    function handleXML(){
19        if(newsXML.readyState==4)
20            document.body.innerHTML=newsXML.getElementsByTagName("data")[0].text;
21    }
22
23    //-->
24     </ script >
25 </ head >
26 < body  onload ="init()" >
27 </ body >
28 </ html >

 1 <? xml version="1.0" encoding="gb2312" ?>
 2 < data >
 3  焦点|工行小额账户明年收费 不足300元要归并 &lt; br / &gt;
 4  财经|"神六"飞行开销仅为美航天飞机4.5% 花9亿 &lt; br / &gt;
 5  财经|2005能源富豪榜揭榜 超市要撤致癌保鲜膜 &lt; br / &gt;
 6  证券|神六催生高价股 MBO公司股改 高管一夜暴富 &lt; br / &gt;
 7  证券|保险公司告基金利益输送 科龙管理班子亮相  &lt; br / &gt;
 8  科技|神六飞船成功着陆 载人飞行取得圆满成功 &lt; br / &gt;
 9  关注|索尼中国不裁员 夏普与南京熊猫分道扬镳  &lt; br / &gt;
10  热点|北电任命新总裁兼CEO 索爱发布第三季财报 &lt; br / &gt;
11  数码|300万像素手机推荐 最有降价潜力手机导购 &lt; br / &gt;
12  测评|近期五大DC跳水王 怪模怪样个性手机推荐 &lt; br / &gt;
13  探索|亚历山大古城的文化历史 胜利者改写历史  &lt; br / &gt;
14 </ data >

放到同一目录下就可以使用了，XML中包含的内容由HTML来显示。AJAX最基本原则就是内容与控制的分离。

下面的是任何浏览器都支持的格式，放到Tomcat中就可以看到效果。

 1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2 < html >
 3 < head >
 4   < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb18030"   />
 5   < meta  name ="Author"  content ="emu"   />
 6   < meta  name ="Keywords"  content ="ajax"   />
 7   < meta  name ="Description"  content ="Ajax裸奔-步骤7"   />
 8   < title >  Ajax裸奔-步骤7  </ title >
 9   < script  type ="text/JavaScript" >
10 <!--
11 var newsXML;
12 function init(){
13  newsXML = window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));//选择合适的xmlhttprequest控件
14  newsXML.onreadystatechange= handleXML;
15  newsXML.open("GET","news.xml",true);
16  newsXML.send(null);
17 }
18 function handleXML(){
19  if(newsXML.readyState==4){
20   var x = newsXML.responseXML.getElementsByTagName("data")[0];
21   document.body.innerHTML=x.text?x.text:x.textContent;//不同的xmlhttprequest控件有不同的用法。
22  }
23 }
24 //-->
25  </ script >
26 </ head >
27 < body  onload ="init()" >
28 </ body >
29 </ html >