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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值