ITPub博客

首页 > IT职业 > IT生活 > ajax的四种实现方式介绍

ajax的四种实现方式介绍

IT生活 作者:cosis 时间:2021-09-09 09:02:09 0 删除 编辑

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

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2826/viewspace-2798795/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-16

  • 博文量
    90
  • 访问量
    1015