ajax的四种实现方式介绍

1.使用原生JavaScript实现

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("microsoft.XMLHTTP");
}
xhr.open('GET','action',true);
xhr.onreadystatechange = function(){
    if (xhr.readyState== 4 && xhr.status==200) {
          alert(responseText);
    }
}
xhr.send(null);

2.使用jquery：

$("#username").bind("blur",function(){
     var $this = $(this);
     $.ajax({
           url:"user_validateUsername?username=" + $("#username").val(),
           dataType:"text",
           success:function(data){
                  $("#username-error").text("用户名可用");
           }
     })
});

3.使用Jquery的form表单验证框架
需要引入jquery.form.js及以来的jquery类库

//提交表单时使用ajax校验用户名
var options = {
     url:"user_validateUsername?username=" + $("#username").val(),
     target:"#username-error"
};
$("#form").ajaxForm(options);

4.使用Jquery的Validation框架
引入jquery.validate.js和messages_zh.js(optional)及jquery类库

$("#registerForm").validate({
     debug:true,
     rules:{
        username:{
             //使用remote进行单个元素的ajax验证
            remote:{
                  url:"user_validateUsername.action",
                  type:"post",
                  dataType:"text",
                  data:{
                      username: function(){
                          return $("#username").val();
                      }
                  },
                  dataFilter:function(data,type){
                      if(data == "true"){
                          return true;
                      }else{
                          return false;
                      }
                  }
             }
        }
     }
});