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;

}

}

}

}

}

});

總結

以上是生活随笔為你收集整理的js ajax通用方法,ajax的四种实现方式介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。