这个是用于显示主体的ajax.html
"http://www.w3.org/TR/html4/strict.dtd">
AJAX网页开发实例
看看下面的例子,你也许就会懂得数据是怎么样完成无刷新的了。
这是一些简单的数据。调取XML数据。
下面是包含数据的data.xml
这里是XML中的数据。
注意我们现在连接data.xml并没有使用javascript,要使用javascript,执行ajaxRead函数,连接是隐藏的,并且此连接并没有重定向到data.xml文件。函数ajaxRead还没有定义,所以当你测试时,会得到一个JS错误。所以我们在开始的
中定义了函数:解释下,函数ajaxRead将在点击View XML data连接的时候执行,在函数里,我们定义了一个xmlObj的变量,它就负责客户端和服务器端中转。我们定义一个if/else循环块:
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
这只是测试不同对象的可用性——不同的浏览器执行XMLHttpRequest对象的时候不同,所以我们定义“xmlObj”作为XMLHttpRequest对象的时候,我们必须区别对待。如果没有XMLHttpRequest可用,函数以return结束来取消错误报告。大部分时候,XMLHttpRequest都是可用的,不过排除一些太老的浏览器。
下面的部分:
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
每当XMLHttpRequest状态改变时,onreadystatechange事件就触发,此事件共有5个状态,从0到4。
[0]uninitialized未初始化(在XMLHttpRequest开始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest从服务器端获得响应)
[3]interactive(当对象连接到服务器)
[4]complete(完成)
状态5[编号是4]是用来确认数据是否可用的,正好用来给xmlObj.readyState用,如果“是”,我们执行updateObj函数,此函数有2个参数:ID以及填充的数据,它的方法以后说明。

Leave a comment