java实现ajax的四种方法

第一种（最原生的那种，创建XmlHttpRequest对象）：

<script type="text/javascript">
	  	//创建XmlHttpRequest对象
	  	function createXmlHttpRequest(){
	  		if(window.XMLHttpRequest){//返回值为true时说明是新版本IE或其他浏览器
	  			return new XMLHttpRequest();
	  		}else{//返回值为false时说明是老版本IE浏览器（IE5和IE6）
	  			return new ActiveXObject("Microsoft.XMLHTTP");
	  		}
	  	}
	  	//Ajax设置回调函数
	  	function callBack(){
	  		if(XMLHttpRequest.readyState==4 && XMLHttpRequest.status==200){
	  			var data = XMLHttpRequest.responseText;
	  			if(data == "true"){
	  				$("#nameDiv").html("用户名已被使用");
	  			}else{
	  				$("#nameDiv").html("用户名可以使用");
	  			}
	  		}
	  	}
	  	
	  	function validate(){
	  		var name = $("name").val();
	  		if(name==null || name==""){
	  			$("#nameDiv").html("用户名不能为空");
	  		}else{
	  			//1. 创建XMLHttpRequest
	  			XMLHttpRequest = createXmlHttpRequest();
	  			//2. 设置回调函数
	  			XMLHttpRequest.onreadystatechange = callBack;
	  			//3. 初始化XMLHttpRequest组件
	  			
	  			var url = "userServlet?name="+name;//服务器端URL地址,name为用户名文本框获取的值
	  			XMLHttpRequest.open("GET",url,true);
	  			//4. 发送请求
	  			XMLHttpRequest.send(null);
	  			//上边使用的是get，下面使用的是post
	  			//var url = "userServlet";
	  			//XMLHttpRequest.open("POST",url,true);
	  			//XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	  			//var data = "name"+name;//需要发送的数据信息,name为用户名文本框获取的值
	  			//XMLHttpRequest.send(data);
	  		}
	  	}
  </script>

（下面三种方法，是对登录的一种检测，进行局部刷新，输出相对应的提示）
表单为：

<form > 
    	<table>
    		<tr>
    			<td>用户名：</td>
    			<td>
    				<input type="text" name="name" id="name" >
    			</td>
    			<td>
    				<div id="nameDiv" style="display: inline"></div>
    			</td>
    		</tr>
    	</table>
    </form>

第二种（get方法）：

<script type="text/javascript">
 		$(function(){
 			$("#name").blur(function(){
 				var name = $(this).val();
 				//var name = this.value;
 				if(name==null || name==""){
 					$("#nameDiv").html("用户名不能为空");
 				}else{
 					$.get("userServlet","name="+name,callBack);
 					//响应成功时的回调函数
 					function callBack(data){
 						if(data=="true"){
 							$("#nameDiv").html("用户名已被使用");
 						}else{
 							$("#nameDiv").html("用户名可以使用");
 						}
 					}
 				}
 			});
 		});
 	</script>

第三种（post方法）：

<script type="text/javascript">
 		$(function(){
 			$("#name").blur(function(){
 				var name = $(this).val();
 				//var name = this.value;
 				if(name==null || name==""){
 					$("#nameDiv").html("用户名不能为空");
 				}else{
 					$.post("userServlet","name="+name,callBack);
 					//响应成功时的回调函数
 					function callBack(data){
 						if(data=="true"){
 							$("#nameDiv").html("用户名已被使用");
 						}else{
 							$("#nameDiv").html("用户名可以使用");
 						}
 					}
 				}
 			});
 		});
 	</script>

第四种：

<script type="text/javascript">
 		$(function(){
 			$("#name").blur(function(){
 				var name = $(this).val();
 				//var name = this.value;
 				if(name==null || name==""){
 					$("#nameDiv").html("用户名不能为空");
 				}else{
 					$.ajax({
 						"url"		:"userServlet",	//要提交的URL路径
 						"type"		:"POST",		//发送请求的方式
 						"data"		:"name="+name,	//要发送到服务器的数据
 						"success"	:callBack		//响应成功后要执行的代码
 					});
 					//响应成功时的回调函数
 					function callBack(data){
 						if(data=="true"){
 							$("#nameDiv").html("用户名已被使用");
 						}else{
 							$("#nameDiv").html("用户名可以使用");
 						}
 					}
 				}
 			});
 		});
 	</script>