使用Ajax动态判断用户名是否存在。

蔚落 2022-06-07 23:15 276阅读 0赞

简介ajax:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

以下本实例只写jsp模块，具体即业务逻辑层和交互层和持久层不在展示

具体流程：

用户请求jsp的前端页面，前端页面请求的动作在javascript中处理，在javascript中使用ajax，不在重新加载整个页面，然后和服务器进行交换数据并且更新部分网页内容。

：<%@ page language="java" import="java.util.\*" pageEncoding="utf-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>My JSP 'register.jsp' starting page</title>  
      
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">      
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">

//处理密码不一致的javascript方法  
<script type="text/javascript">  
function myfunction() \{  
var password = document.getElementById("password").value;  
var repassword = document.getElementById("repassword").value;  
if (password == repassword) \{  
document.getElementById("refont").innerHTML = "";  
return true;  
\} else \{  
document.getElementById("refont").innerHTML = "两次密码输入不一致";  
return false;  
\}  
\}  
  
        //使用ajax进行操作  
function getXMLHttpRequest() \{  
var xmlhttp;  
if (window.XMLHttpRequest) \{  
xmlhttp = new XMLHttpRequest();  
\} else \{  
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
\}  
return xmlhttp;  
\}  
  
  
function onusernamechange() \{  
//ajax的逻辑  
    var xmlhttp=getXMLHttpRequest();  
    xmlhttp.onreadystatechange=function()\{  
    if(xmlhttp.readyState==4&&xmlhttp.status==200)\{

//从服务器获得的数据  
    var result=xmlhttp.responseText;  
    var usernamefont=document.getElementById("usernamefont");  
    if("1"==result)\{

//更新局部网页  
    usernamefont.color="red";  
    usernamefont.innerHTML="用户名已经存在";  
    \}else\{  
    usernamefont.color="green";  
    usernamefont.innerHTML="恭喜可用";  
    \}  
    \}  
    \};  
    var url="$\{pageContext.request.contextPath\}/servlet/CheckUserName?username="+document.getElementById("username").value;  
    xmlhttp.open("get",url);  
    xmlhttp.send();  
\}  
</script>  
  </head>  
    
  <body>  
   <form method="post">  
用户名：<input type="text" id="username" name="username" οnchange="onusernamechange();" /><font  
id="usernamefont" color="red"></font><br> 密码：<input  
id="password" type="password" name="password" /><br> 重复密码：<input  
id="repassword" type="password" name="repassword" /><font  
id="refont" color="red"></font><br> 头像：<input type="file"  
name="icon" /><br> <input type="submit" value="注册"  
οnclick="return myfunction();" />  
</form>  
  </body>  
</html>