Ajax使用的五步法

浏览数：38 / 时间：2015年06月09日
Ajax使用的五步法
<script type="text/javascript">
          //用于保存XMLHttpRequest对象的变量，由于整个过程中必须使用同一个XMLHttpRequest对象，所以要定义成全局的
          var xmlhttp;
          function submit()
          {
              //第一步：创建XMLHttpRequest对象
              if(window.XMLHttpRequest){
                  //对于IE7，IE8，firefox，Mozilla，Safari浏览器都能满足这个条件
                  xmlhttp=new XMLHttpRequest();
           //这段代码是为了解决某些版本的mozilla浏览器在XMLHttpRequest对象接收服务器返回的xml数据会出问题的一个bug而添 
                 //加的，目前来说属于一个小众事件，所以只需要知道这是个修复小众bug的代码段
                  if(xmlhttp.overrideMimeType){
                      xmlhttp.overrideMimeType("text/xml");
                  }
              }else if(window.ActiveXObject){
                  //上面的浏览器也能满足这个条件，但是上面的自带了XMLHttpRequest对象，所以没有必要再利用这个来创建。
                  //IE6和IE5的判断条件
  //由于不同浏览器所支持的Activex版本不同，为了对不同版本的浏览器都能定义出XMLHttpRequest对象，创建的时候遍历 
所有版本的Activex控件版本，总有一个当前浏览器支持
                  var activexName=[‘MSXML2.XMLHTTP.6.0‘,‘MSXML2.XMLHTTP.5.0‘,
                ‘MSXML2.XMLHTTP.4.0‘,‘MSXML2.XMLHTTP.3.0‘,‘MSXML2.XMLHTTP‘,‘Microsoft.XMLHTTP‘];
                  for(var i=0;i<activexName.length;i++){
                      try{
                          xmlhttp=new ActiveXObject();
                          break;
                      }
                      catch(e){   
                      }
                  }           
              }
              //alert(xmlhttp);
              if(xmlhttp==undefined||xmlhttp==null){
                  alert("您的浏览器太老，请更换版本。");
                  return;
              }
               
              //第二部：注册回调方法，当服务器处理结束返回数据以后利用回调方法实现局部的页面刷新数据
     //这个回调方法实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用，但是我们实际上只关心
              //readyState==4（与服务器交互结束）这一种情况。
              xmlhttp.onreadystatechange=callback;
              //获得文本框输入内容
              var userName=document.getElementById("UserName").value;
              /*这个是使用GET方式的设置方式
----------------------------------------------------------------------------------------------------------------------
              //第三步：设置和服务器交互的相应参数
              //制定servlet页面是AJAX，由于使用的是GET方法，所以参数要自己拼出来，ture表示是“异步”
              xmlhttp.open("GET","AJAX?name="+userName,true);
               
              //第四步：设置向服务器发送的数据，启动和服务器端交互
              xmlhttp.send(null);
              //由于我们使用的是“GET”，所有数据斗拼在url中，这里的参数是null，如果使用“Post”就必须有参数了
----------------------------------------------------------------------------------------------------------------------
              */
             //使用post方式
             //第三步：设置和服务器交互的相应参数
             xmlhttp.open("POST","AJAX",true);
             //使用POST方式需要多加的代码，[url=http://www.woyinwose2.com.cn]我淫我色[/url]手动添加一个Http请求的头信息。这段代码的工作本来是由浏览器帮助完成的
             xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
             //第四步：设置向服务器发送的数据，启动和服务器端交互
              xmlhttp.send("name="+ userName);
 
          }
          function callback(){
              //alert(‘------------‘);
              //第五步：判断和服务器交互是否完成，还要判断服务器端是否正确返回数据
              if(xmlhttp.readyState==4){                 
                  //表示和服务器的交互已经完成
                  if(xmlhttp.status==200){
                      //服务器端响应代码是200，正确返回了数据
                      //纯文本数据的接受方法
                      var message = xmlhttp.responseText;
                      //xml对应的DOM对象接受方法，
                      //[url=http://www.yuputuan.org]玉蒲团[/url]接受这个需要服务器端设置content-type为text/xml
                      //var docXml = xmlhttp.responseXML;
                      //把从服务器端返回的数据动态填充到div标签中
                      //记忆向div中填充文本的方法
                      var div = document.getElementById("message");
                      div.innerHTML = message;
 
                  }
              }
          }
        </script>