java ajax动态加载数据_AJAX从服务端获取数据的三种方法

本文为原创，如需转载，请注明作者和出处，谢谢！

在本文中将给出一个例子来介绍使用AJAX技术从服务端获得数据的三种方法。这个例子很简单，就是两个选择框(html中的标签)，通过选中第一个select的某一项后，会从服务端得到一些数据，并加载到第2个select中。

方法一、从服务端获得XML格式的数据

从服务端获得数据的最容易想到的方法就是在服务端反加一定格式的数据，一般是XML格式，然后在服务端使用XMLDocument或其他技术来读取这些数据，并生成标签中选项的格式文本(标签)。下面的addOptions函数是这个例子的核心函数，它负责根据从服务端获得的数据生成标签中的标签。在这里所使用的方法是利用了标签的innerHTML属性(仅限于firefox)，如果是IE，要使用outerHTML属性(IE中标签的innerHTML属性有一些小bug，读者可以试着在IE中使用innerHTML属性，看看会发生什么情况)。addOptions方法的实现代码如下：

//select表示对象，xml表示XMLDocument对象functionaddOptions(select, xml)

{if(select)

{varoptions="";for(vari=0; i

{if(xml.childNodes[0].childNodes[i].nodeName=="list")

{vars="";if(isIE())

s=xml.childNodes[0].childNodes[i].text;elses=xml.childNodes[0].childNodes[i].textContent

options+="";

options+=s;

options+=""}

}varid=select.id;if(isIE())

select.outerHTML=""+options+"";elseselect.innerHTML=options;

}

}

onReadState函数将在XMLHttpRequest对象的异步访问服务端时调用。当readyState为4时表示成功从服务端返回XML数据。这个函数的实现代码如下：

//myRequest表示XMLHttpRequest对象，selectId表示标签的id属性值functiononReadyState(myRequest, selectId)

{if(myRequest.readyState==4)//4表示成功获得相应信息{try{varxml=myRequest.responseXML;//获得XMLDocument对象varkind=document.getElementById(selectId);//获得对象addOptions(kind, xml);//向标签中加入标签}catch(e)

{

alert("onReadyState:"+e);

}

}

}

getData函数负责向服务端发送请求，并设置异步事件。实现代码如下：

functiongetData(url, selectId)

{varmyRequest=getXMLHTTPRequest();//获得一个XMLHttpRequest对象if(myRequest)

{

myRequest.onreadystatechange=function()//接收获得数据状态的事件函数{

<