Ajax五步法

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',
                'Micro  soft.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;
              


//使用post方式
//第三步：设置和服务器交互的相应参数
             xmlhttp.open("POST","AJAX",true);
//使用POST方式需要多加的代码，手动添加一个Http请求的头信息。这段代码的工作本来是由浏览器帮助完成的
             xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第四步：设置向服务器发送的数据，启动和服务器端交互
              xmlhttp.send("name="+ userName);

          }
          function callback(){
//第五步：判断和服务器交互是否完成，还要判断服务器端是否正确返回数据
              if(xmlhttp.readyState==4){                
                  //表示和服务器的交互已经完成
                  if(xmlhttp.status==200){
                      //服务器端响应代码是200，正确返回了数据
                      //纯文本数据的接受方法
                      var message = xmlhttp.responseText;
                      //xml对应的DOM对象接受方法，
                      //接受这个需要服务器端设置content-type为text/xml
                      //var docXml = xmlhttp.responseXML;
                      //把从服务器端返回的数据动态填充到div标签中
                      //记忆向div中填充文本的方法
                      var div = document.getElementById("message");
                      div.innerHTML = message;

                  }
              }
          }
        </script