总结一下AJAX的写法——常规方法

先来一张图，看一下最简单的Ajax的写法，如下图

详细分析一个通用版的Ajax：

//代码整体流程

<script type="text/javascript">

var xmlHttpRequst;

function verify(){    //用户名校验方法

var success = createXMLHTTPRequest();   //创建XMLHTTPRequst对象进行AJAX的一部数据交换

if(!success){

return;

}

var name = document.getElementById("name").value;

xmlHttpRequst.onreadystatechange = callback;   //注册回调函数，callback是一个函数名不需要括号，加上括号的号返回的是值，是错误的

//设置连接信息：第一个参数http的请求方式，支持所有http的请求方式，主要使用get和post，第二个参数表示请求的url地址，get方式请求的参数也在url中，

//第三个参数表示采用异步还是同步方式交互，true表示异步

//xmlHttpRequst.open("GET","OriginalityAjaxAction?username=" + userName,true);  //get方式

xmlHttpRequst.open("POST", "OriginalityAjaxAction", true);    //post方式

xmlHttpRequst.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post方式需要设置http请求头 

xmlHttpRequst.send("name" + name);    //post方式发送数据

//xmlHttpRequst.send(null);  //异步方式下，send这句话会立即执行，get方式用，也可以省去null

//回调函数   

function callback() {   

     if (xmlHttpRequest.readyState == 4) {   //判断对象的状态是交互完成  

           if (xmlHttpRequest.status == 200) {  //判断http的交互是否成功 

               var responseText = xmlHttpRequest.responseText;   //获取服务器器端返回的数据 out.println(“内容”);                 

                  var divNode = document.getElementById("result");   //将数据显示在页面上  

                        divNode.innerHTML = responseText;   

             } else {   

                 alert("出错了！！！");  

            }   

     }   

  }   

 //创建XMLHTTPRequest对象来进行AJAX的异步数据交互  

   function createXMLHTTPRequest() {  

        if (window.XMLHttpRequest) {   //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码   

            xmlHttpRequest = new XMLHttpRequest();   //针对FireFox，Mozillar，Opera，Safari，IE7，IE8   

            if (xmlHttpRequest.overrideMimeType) {   //针对某些特定版本的mozillar浏览器的BUG进行修正  

                xmlHttpRequest.overrideMimeType("text/xml");  

             }   

        } else if (window.ActiveXObject) {     

             var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];   //针对IE6，IE5.5，IE5  

             for ( var i = 0; i < activexName.length; i++) {  

                    try { 

                         xmlHttpRequest = new ActiveXObject(activexName[i]);  

                          break;  

                   } catch (e) {  

                  }  

            }  

      }  

     if (!xmlHttpRequest) {   //确认XMLHTtpRequest对象是否创建成功  

           alert("XMLHttpRequest对象创建失败!!");  

           return false;  

      } else {  

           return true;  

     }  

}   

</script>