---ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>Developing Web Application with Ajax - Example</title>
<script type="text/javascript">
<!--
//此函数将在电击"View XML data"链接的时候执行
function ajaxRead(file){
//xmlObj,负责客户端和服务器中转
var xmlObj=null;
/*
测试不同对象的可用性
不同的浏览器执行XMLHttpRequest对象的时候不同,所以定义"xmlObj"作为XMLHttpRequest对象的时候,必须区别对待
如果没有XMLHttpRequest可用,函数以return结束来取消错误报告
*/
if(window.XMLHttpRequest){
xmlObj=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
}else{
return;
}
/*
每当XMLHttpRequest状态改变时,onreadystatechange事件就触发
此事件共有5个状态,从0到4
[0]uninitialized未初始化(在XMLHttpRequest开始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest从服务器获得响应)
[3]interactive(当对象连接到服务器)
[4]complete(完成)
*/
/*
readyState()方法用来获得当前XMLHttpRequest的状态
状态5[编号4]是用来确认数据是否可用的,如果"是",则执行updateObj方法
此方法有2个参数:ID,填充的数据
*/
/*
xmlObj.responseXML属性是一个DOM对象,对于XML文件来说,它有点像网页中的"document"对象
通过getElementsByTagName可以获得XML文件中的任何节点
xmlObj.responseXML.getElementsByTagName('data')[0]是获得第1个名称为"data"的节点
它返回XML节点,无数据的---得到节点里的数据必须通过访问此节点的属性
firstChild.data
(firstChild获得<data>节点之间的文本节点,而"data"属性则是文本节点的实际文本)
*/
/*
xmlObj.open('GET',file,true);
xmlObj.send('');
这是ajaxRead函数中的最后一块
xmlObj的open方法打开一个通往服务器的连接(通过一个特殊的协议,这里指定为"GET"---也可以使用"POST"或其他)
请求一个文件(在这里,file变量---data.xml,是当作参数发送给了ajaxRead函数)
并且JavaScript可以操控这个请求是否为同步(false)或者异步(true,默认)
这是异步JavaScript和XML,将可以使用默认的异步方法---当使用同步之后,这个程序将不能运行
xmlObj.send('');
简单的发送了一个空字符串给服务器
如果没有这一行,xmlObj的readystate的值将不能为4,使得页面将不能更新
这个发送方法可以被用于其它东西,但是此程序仅仅从服务器得到数据,并没有发送数据给服务器,所以就到此为止
*/
xmlObj.onreadystatechange=function(){
if(xmlObj.readyState==4){
updateObj('xmlObj',xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open('GET',file,true);
xmlObj.send('');
}
/*
此函数更新在当前页有新值的其他任何元素
第1个参数,"obj",是当前页中一个元素的id---这是被更新的对象
第2个参数,"data",指明了将要替换"obj"对象的一个新的字符串
正常地,它是一个检查并且确认当前页有含有id值为"obj"的元素的很好的方法
*/
function updateObj(obj,data){
//document.getElementById(obj).firstChild.data = data;
document.getElementById(obj).innerHTML=data;
}
//-->
</script>
</head>
<body>
<h1>Developing Web Application with Ajax</h1>
<p id="xmlObj">
<a href="data.xml" title="View the XML data." οnclick="ajaxRead('data.xml');this.style.display='none';return false">View XML data.</a>
</p>
</body>
</html>
---data.xml
<?xml version="1.0" encoding="utf-8"?>
<root>
<data>
This is some sample data... It is stored in an XML file and retrieved by JavaScript.
</data>
</root>
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
