Ajax简单实例

| No Comments | No TrackBacks

这个是用于显示主体的ajax.html

"http://www.w3.org/TR/html4/strict.dtd">



AJAX网页开发实例





AJAX网页开发实例


看看下面的例子,你也许就会懂得数据是怎么样完成无刷新的了。



这是一些简单的数据。调取XML数据。


返回Blog



下面是包含数据的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以及填充的数据,它的方法以后说明。

No TrackBacks

TrackBack URL: http://www.wujianrong.com/mt-tb.cgi/499

Leave a comment

About this Entry

This page contains a single entry by kevinwu published on February 28, 2006 11:57 AM.

Eclipse开发struts完全指南 was the previous entry in this blog.

中长期科技发展规划的IT机会 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.