XMLHttpRequest Ajax 范例检查用户名是否存在

XMLHttpRequest Ajax 实例检查用户名是否存在

一、XMLHttpRequest 对象的方法与属性

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method", "url")	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）

js/xmlHttpRequest.js

function createXmlHttpRequest() {
	var xmlHttp;

	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {

		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {

			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("您的浏览器不支持AJAX！");
				return false;
			}
		}
	}

	return xmlHttp;

}

jsp文件：

<head>
<script type="text/javascript" src="js/xmlHttpRequest.js"></script>
  </head>
  
  <body>
    <script type="text/javascript">

		
		function userNameCheck() 
		  { 
		      var username = document.all.username.value;        //获得text的值 
		      
		      var request = createXmlHttpRequest();//创建request 对象 
		      request.open("post","UserAction?username="+username);//建立到服务器的新请求 
		      request.send();//向服务器发送请求 
		      
		      request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄 
		      { 
		          if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示：响应已完成，可以访问服务器响应并使用它 
		             if (request.status==200)//HTTP状态,我们期望的状态码是 200，它表示一切顺利。 
		             //如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据 
		                { 
		                   var value = request.responseText;//服务器返回响应文本 
		                   
		                   if (value=="true") 
		                   { 
		                       document.all.unc.innerHTML="该用户名已存在"; 
		                   } 
		                   else 
		                   { 
		                        document.all.unc.innerHTML="OK"; 
		                   } 
		                } 
		      }     
		       
		  } 
				 
</script>

		用户姓名： <input type="text" name="username" onblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font> 
		
  </body>
</html>

public class UserAction extends HttpServlet { 
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {  doPost(request, response);
 } 
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {   String username=request.getParameter("username"); 
         if(username.equals("chenlh")) 
          response.getWriter().print("true"); 
      else 
       response.getWriter().print("false");  }}

XMLHttpRequest Ajax 范例检查用户名是否存在

相关推荐