南强小屋 Design By 杰米
在任何网站注册用户的时候，都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证，很显然这种方式的用户体验很不好；后来有了Ajax，有了异步交互，当用户输完用户名继续填写其他信息的时候，Ajax就将信息发到了服务器去检查该用户名是否已经被注册了，这样如果用户名已经存在，不用等用户将所有数据都提交就可以给出提示。采用这种方式大大改善了用户体验。
regist.jsp
复制代码 代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp;
//创建Ajax核心对象XMLHttpRequest
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkUsername(username){
createXMLHttp();
//设置请求方式为GET，设置请求的URL，设置为异步提交
xmlHttp.open("GET","CheckServlet?username="+username,true);
//将方法地址复制给onreadystatechange属性
//类似于电话号码
xmlHttp.onreadystatechange = checkUsernameCallback();
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}
function checkUsernameCallback(){
//Ajax引擎状态为成功
if(xmlHttp.readyState == 4){
//HTTP协议状态为成功
if(xmlHttp.status == 200){
var text = xmlHttp.responseText;
if(text == "true"){
document.getElementById("msg").innerHTML = "此用户名已存在，无法使用！";
}else{
document.getElementById("msg").innerHTML = "此用户名可以使用";
}
}
}
}
</script>
</head>
<body>
<form action="regist.jsp" method="post">
用户名:<input type="text" name="username" onblur="checkUsername(this.value)"><span id="msg"></span><br/>
密 码:<input type="password" name="password"><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
CheckServlet.java
复制代码 代码如下:
public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
public static final String DBURL = "jdbc:sqlserver://localhost:1433;DatabaseName=bbs";
public static final String DBUSER = "sa";
public static final String DBPASS = "pass";
public CheckServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
PrintWriter out = response.getWriter();
String username = request.getParameter("usernaem");
try{
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
String sql = "select count(username) from user where username=?";
pst = conn.prepareStatement(sql);
pst.setString(1,username);
rs = pst.executeQuery();
if(rs.next()){
if(rs.getInt(1)>0){//用户名已经存在了
out.print("true");
}else{
out.print("false");
}
}
}catch(Exception e){
e.printStackTrace();
}finally{
try{
conn.close();
}catch(Exception e){
e.printStackTrace();
}
}
}
}
regist.jsp
复制代码 代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp;
//创建Ajax核心对象XMLHttpRequest
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkUsername(username){
createXMLHttp();
//设置请求方式为GET，设置请求的URL，设置为异步提交
xmlHttp.open("GET","CheckServlet?username="+username,true);
//将方法地址复制给onreadystatechange属性
//类似于电话号码
xmlHttp.onreadystatechange = checkUsernameCallback();
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}
function checkUsernameCallback(){
//Ajax引擎状态为成功
if(xmlHttp.readyState == 4){
//HTTP协议状态为成功
if(xmlHttp.status == 200){
var text = xmlHttp.responseText;
if(text == "true"){
document.getElementById("msg").innerHTML = "此用户名已存在，无法使用！";
}else{
document.getElementById("msg").innerHTML = "此用户名可以使用";
}
}
}
}
</script>
</head>
<body>
<form action="regist.jsp" method="post">
用户名:<input type="text" name="username" onblur="checkUsername(this.value)"><span id="msg"></span><br/>
密 码:<input type="password" name="password"><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
CheckServlet.java
复制代码 代码如下:
public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
public static final String DBURL = "jdbc:sqlserver://localhost:1433;DatabaseName=bbs";
public static final String DBUSER = "sa";
public static final String DBPASS = "pass";
public CheckServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
PrintWriter out = response.getWriter();
String username = request.getParameter("usernaem");
try{
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
String sql = "select count(username) from user where username=?";
pst = conn.prepareStatement(sql);
pst.setString(1,username);
rs = pst.executeQuery();
if(rs.next()){
if(rs.getInt(1)>0){//用户名已经存在了
out.print("true");
}else{
out.print("false");
}
}
}catch(Exception e){
e.printStackTrace();
}finally{
try{
conn.close();
}catch(Exception e){
e.printStackTrace();
}
}
}
}
标签：
Ajax,异步交互
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无Ajax——异步检查用户名是否存在示例的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。