一个简单验证的Ajax例子.

<script type="text/javascript">
		var http_request=false;
		function send_request(url){
			//开始初始化XmlHttpRequest对象;Mozilla浏览器;
			if(window.XMLHttpRequest){
				http_request=new XMLHttpRequest();
				if(http_request.overrideMimeType){
					http_request.setOverrideMimeType("text/html");
				}
			//否则就是IE浏览器;	
			}else{
				if(window.ActiveXObject){
					try{
						http_request = new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
						try{
							http_request=new ActionXObject("Microsoft.XMLHTTP");
						}catch(e1){
						
						}
					}	
				}
			}
			if(!http_request){
				alert("不能创建XmlHttpRequest对象!");
				return;
			}
			
			http_request.onreadystatechange =proccessRequest;  
			http_request.open("post",url,true);
			http_request.send(null);
		}
		
		//处理返回信息的函数;
		function proccessRequest(){
			//判断对象状态,是否等于4;如果等于4代表成功.
			if(http_request.readyState==4){
				//请求状态为200代表成功返回,开始处理;
				if(http_request.status==200){
					alert(http_request.responseText);
				}else{
					alert("你请求的页面有异常.");
				}
			}
		}

 

//检查用户名是否存在.
		function checkName(){
			var name=document.getElementById("username");
			if(name.value==null || name.value==''){
				alert("用户名,不能为空!");
				name.focus();
				return;
			}else{
				send_request("/AjaxDemo/LoginServlet?name="+name.value);
			}
		}

</script>

 

HTML页面代码:

<form method="post" name="myform">
    		<font color="red" ></font>
    		<table align="center" >
    			<tr>
    				<td>UserName:</td>
    				<td><input name="username" id="username"  type="text"/></td>
    				<td><input name="btncheck" value="检查是否唯一" type="button" onclick="checkName()"/></td>
    			</tr>
    			<tr>
    				<td>PassWord:</td>
    				<td><input name="password" id="password"  type="password"/></td>
    			</tr>
    			<tr>
    				<td><input type="button" value="Submit" onclick="checkButton()" size="21"/></td>
    			</tr>
    		</table>
    	</form>

 

 

新建一个LoginServlet代码如下:

public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String username=request.getParameter("name");
		String password=request.getParameter("password");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		if(username.equalsIgnoreCase("pengxiaoting")){
			out.print("你输入的用户名,已经存在!请重新输入!");
		}else{
			out.print("你输入的用户名,不存在!可以使用!");
		}
		
}

 

 

然后在浏览器上运行:

http://localhost:8080/AjaxDemo/index.jsp

 

 

 

评论

2 楼 zhou363667565 2011-09-04  

zxzxzxzxzx 写道

onclick="checkButton()"
这个有问题，程序里面没有这个方法！

这是一个subtmit到后台得方法,你手动加上去吧,我应该是忘记加上了!

1 楼 zxzxzxzxzx 2011-09-04  

onclick="checkButton()"
这个有问题，程序里面没有这个方法！