现在的位置: 首页 > 综合 > 正文

构建Ajax应用步骤

2013年09月27日 ⁄ 综合 ⁄ 共 1619字 ⁄ 字号 评论关闭

构建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>

抱歉!评论已关闭.