构建Ajax应用步骤:
1、创建XHR(XmlHttpRequest)对象
2、创建Ajax请求
3、发送Ajax请求
4、处理服务器响应
实例:
<script language="javascript">
var xmlHttpRequest;
//不同浏览器环境下创建xmlHttpRequest的方式是不一样的
function createXmlHttpRequest(){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
return new XMLHttpRequest();
}catch(e){}
}
}
}
//getData方法向服务器查询选项信息
function getData(){
var url="getbasicinfo.jsp";
//调用createXmlHttpRequest方法创建xmlHttpRequest
xmlHttpRequest=createXmlHttpRequest();
//设置回调函数为showInfo
xmlHttpRequest.onreadyStatechange=showinfo;
//发送请求
xmlHttpRequest.open("get",url,true);
xmlHttpRequest.send(null);
}
//接收服务器返回的XML文档,解析后进行显示
function showinfo(){
if(xmlHttpRequest.readyState==4){
alert("test");
if(xmlHttpRequest.status==200){
var xmldoc=xmlHttpRequest.responseXML;
var options=xmldoc.getElementsByTagName("option");
//str_options_html变量包含应显示在页面上所有选项的HTML文本
var str_options_html="";
for(i=0;i<options.length;i++){
//获取选项值
var val=options[i].getAttribute("val");
//选项文本
var str_option=options[i].text;
//每一选项对应一个单选按钮
str_options_html+="<input type=radio"+" "+
"name='option' value='"+val+"'/>";
//
str_options_html+=str_option;
str_options_html+="<br>";
alert(str_options_html);
}
//将组织好Html片断写入“options”层
document.getElementById("options").innerHTML=str_options_html;
}else{
alert("请求发送异常,异常编号:"+xmlHttpRequest.status);
}
}
}
//界面元素加载完成后在“options”单元格显示选项
window.onload=function(){
getData();
}
</script>