Ajax 用户名验证

jsp 页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>demo.jsp</title>
</head>
<script type="text/javascript">  
    var xmlHttp; //Ajax 核心对象名称  
    function createXMLHttp(){//创建 XMLHttpRequest 核心对象  
            xmlHttp=new XMLHttpRequest();//兼容IE9,最新的火狐,最新的谷歌  
    }  
    function showMag(){  
        createXMLHttp(); //建立 XMLHttp 核心对象  
        var url ="port?username="+escape(document.getElementById("userid").value);
		xmlHttp.open("POST", url);//设置一个请求
		//设置请求完成之后处理的回调函数  
		xmlHttp.onreadystatechange=showMsgCallback;  
		xmlHttp.send(null);//发送请求,不传递任何参数  
    }  
    function showMsgCallback(){//定义回调函数  
        if(xmlHttp.readyState==4){//数据返回完毕  
            if(xmlHttp.status==200){//HTTP操作正常  
                var text = xmlHttp.responseText;//接收返回的内容  
                document.getElementById("userSpan").innerHTML = xmlHttp.responseText;;
            }  
        }  
    }  
</script>  
<body>
	<form action="" method="post" name="userForm">
	<table>
		<caption>用户注册!</caption>
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="name" id="userid" οnblur="showMag()"><span id="userSpan">*</span></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td><input type="password" name="password" ></td>
		</tr>
	</table>
	</form>
</body>
</html>

 

servlet页面

package cn.client.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ServerPort extends HttpServlet {
	public ServerPort() {
		super();
	}
	public void destroy() {
		super.destroy();
	}
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		//接收时设置的编码  
		request.setCharacterEncoding("utf-8");  
		//转发时设置的编码  
		response.setCharacterEncoding("utf-8");  
		//以 超文本格式 方式转发  
		response.setContentType("text/html");  
		PrintWriter out = response.getWriter();
		String userName = request.getParameter("username");  
		if(userName.trim().length()==0||userName==null){  
			out.println("<font color='red'>用户名不能为空!</font>");  
		}else if("chaoyi".equals(userName)){  
			out.println("<font color='red'>用户已存在!</font>");  
		}else{  
			out.println("<font color='blue'>可以使用此用户名!</font>");  
		} 
		out.flush();
		out.close();
	}
	public void init() throws ServletException {
	}
}

 

配置页面:

  <servlet>
    <servlet-name>serverPort </servlet-name>
    <servlet-class>cn.client.servlet.ServerPort</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>serverPort </servlet-name>
    <url-pattern>/port</url-pattern>
  </servlet-mapping>

 

 效果图:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值