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;
                      }
                  }
             }
        }
     }

作者： ______6 
鏈接：http://www.imooc.com/article/17971
來源：慕課網
本文原創發佈於慕課網 ，轉載請註明出處，謝謝合作！