第一个AJAX程序

<!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

<title> 原型页面 </title>
9

<!--
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

//-->
24

</script>
25

</head>
26

<body onload="init()">
27

</body>
28

</html>

<?xml version="1.0" encoding="gb2312"?>
2

<data>
3

焦点|工行小额账户明年收费不足300元要归并<br />
4

财经|"神六"飞行开销仅为美航天飞机4.5% 花9亿<br />
5

财经|2005能源富豪榜揭榜超市要撤致癌保鲜膜<br />
6

证券|神六催生高价股 MBO公司股改高管一夜暴富<br />
7

证券|保险公司告基金利益输送科龙管理班子亮相 <br />
8

科技|神六飞船成功着陆载人飞行取得圆满成功<br />
9

关注|索尼中国不裁员夏普与南京熊猫分道扬镳 <br />
10

热点|北电任命新总裁兼CEO 索爱发布第三季财报<br />
11

数码|300万像素手机推荐最有降价潜力手机导购<br />
12

测评|近期五大DC跳水王怪模怪样个性手机推荐<br />
13

探索|亚历山大古城的文化历史胜利者改写历史 <br />
14

</data>

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

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

<!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

<title> Ajax裸奔-步骤7 </title>
9

<!--
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>

posted on 2008-01-25 18:51 湘江夜游神阅读(163) 评论(0) 编辑收藏所属分类: AJAX

留言簿(5)

随笔分类

随笔档案

文章分类

文章档案

新闻分类

最新评论


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




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理