最原始普通Ajax应用

这是我自己做的一个’玩具’项目,没有什么实用价值。

用的也是最原始的ajax。

当光标离开输入框实现异步刷新。像后台发出请求并反馈出信息给用户


核心代码:

<h4>登 录 账 号</h4>
		<div class="control-group">
			<label class="control-label" for="userName">用户名 <sup>*</sup></label>
			<div class="controls">
			  <input type="text" id="input_userName" placeholder="用户名" name="userName" onblur="validateUserName()"><span id="validateUserName"></span>
			</div>
		 </div>
<script type="text/javascript">


  function validateUserName(){
	  var xmlHttpReq;	  
	  
	  var userName = document.getElementById("input_userName").value;
	  
	  if(window.XMLHttpRequest){
		  xmlHttpReq = new XMLHttpRequest();
		  if(xmlHttpReq.overrideMimeType){
			  xmlHttpReq.overrideMimeType("text/xml");
		  }
	  }else if(window.ActiveXObject){
		   try{
			   xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
		   }catch(e){
			   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			   
		   }
	  }
	  if(!xmlHttpReq){
		  window.alter("该浏览器不支持XMLHttpRequest!");
		  return ;
	  }
	  
	  xmlHttpReq.open("post","validateUserName");//设置提交参数
	  
	  xmlHttpReq.onreadystatechange = function(){
		  
		  if(xmlHttpReq.readyState == 4){
			  
				if(xmlHttpReq.status == 200){
					
					//返回正常
					
					var res = xmlHttpReq.responseText;
					
					//alert(res);
					
					var jsonObject = eval("("+res+")");
					
					//alert(jsonObject.exist);
					
					if(jsonObject.exist){
						
						document.getElementById("validateUserName").innerHTML="<img src=\"themes/images/ico/error.ico\">  用户名已存在!";
					}else {
						document.getElementById("validateUserName").innerHTML="<img src=\"themes/images/ico/yes.ico\">  可以使用";
					}
				}else{
					window.alert("页面请求异常");
				}
			}
		  
	  };//指示响应函数
	  
	  xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	   
	  xmlHttpReq.send("userName="+userName); //提交
	 
  
  }

</script>
action:
  public String validateUserName() throws IOException {
		   
		   HttpServletResponse response = ServletActionContext.getResponse();
		   
		   PrintWriter out =  response.getWriter();	   
		   boolean temp = false;
		   
		   temp=new UserInfoDaoImpl().isExistUserInfo(userName);
		   //JSONObject json2 = new JSONObject();
		   String json="";
		   if(temp) {
			   json="{\"exist\":true}";
			   //json2.put("exist", true);
		   }else {
			   json="{\"exist\":false}";
			   //json2.put("exist", false);
		   }
		   out.println(json);
		   out.flush();
		   out.close();
		   
		   return null;
	   }



猜你喜欢

转载自blog.csdn.net/lp15203883326/article/details/80559604