使用Ajax判断注册用户名重复：
1.AJAX简介
AJAX是实现web2.0服务中的核心技术，全称为“异步JavaScript和XML技术”(Asynchronous JavaScript and XML)；Ajax的核心技术理念在于使用XMLHttpRequest对象发送异步请求。最初为XMLHttpRequest对象提供浏览器支持的是微软公司。AJAX技术的出现，可以说是挽救了传统的B/S结构，并赋与web应用新的生命。如果要我用简单的一句话讲AJAX是什么：我就会说是在b/s结构上给予用户c/s的界面观感。
2.AJAX与传统web的区别：（局部刷新）
传统web页面的服务是基于http协议的，所以它永远也改变不了“请求—响应”的模式。你必须“点”一下，它才能动一下，而且每次都必须刷新整个页面，这也意味着服务器要将所有页面上的数据传送下来，即使你的点击只是需要改变页面上一行十个字的内容。
AJAX代码运行在浏览器和服务器之间，通过编程，你可以让ajax代码仅从服务器上提取需要改变的数据，也只改变页面中需要改变的某一部分：某一个div层、表格中的某一个单元格。用户不会看到页面全部被刷新了。
3.需要使用到的文件（下面都有）：
HTML：reg.html（界面，与AJAX代码）
java（servlet）：AccountCheckServlet（验证重复）
web.xml配置
AJAX:验证重复用户名
当用户输入注册用户名后，焦点离开第一个输入框，即触发输入框的onBlur事件，这个事件将调用js编写的ajax代码，将用户输入发送给服务器验证，并将服务器返回的结果消息显示在输入框下面的div层上。这个流程将由三部分组成：
Login.html:用户界面；
AccountCheckServlet .java服务器上用来验证用户名的Servlet，返回一个字符串做为验证结果；Js编写的AJAX代码:请送请求，并更新页面；我们先从关键的AJAX代码编写开始：
下面是reg.html文件代码：
（里面使用Ajax）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//第一步：
/*XMLHTTPRequest是AJAX应用中的核心API，它被js调用以向服务器发送请求，并异步接收服务器返回的数据后，更新局部页面。使用AJAX功能时，首先要在js中创建XMLHTTPRequest对象：*/
var request;//异步请求对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {//IE浏览器
request = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {//FireFox，netscape等等浏览器
request = new XMLHttpRequest();
} else {
window.alert("你的浏览器不支持XMLHTTPRequest，将无使用AJAX功能！");
}
}
/*现在我们有了请求对象，接下来要考虑的是，XMLHTTPRequest对象发送了请求后，服务器返回的结果应如何处理，即AJAX中的回调方法。*/
//回调函数[响应之后执行的函数]
function processResult() {
if ((request.readyState == 4) && (request.status == 200)) {
var str = request.responseText;//获得返回数据
if(str=="true"){
//显示到指定的组件中
document.getElementById("msg").innerHTML ="<span style='color:#00cc00'>该用户名可以使用</span>" ;
}else{
//显示到指定的组件中
document.getElementById("msg").innerHTML ="<span style='color:#cc0000'>该用户名已经被注册！</span>" ;
}
}
}
//发送请求,绑定回调方法
function sendRequest() {
//创建XMLHTTPRequest对象
createXMLHttpRequest();
//绑定回调方法（因为是异步请求，这句代码指示了请求结果返回后，由那个js函数接收处理），
request.onreadystatechange = processResult;
//获得输入框中的内容
var username = document.getElementById("userName").value;
//发送get请求
// request.open("GET", "AccountCheckServlet?username="+username, true);
//发送Post请求
request.open("POST", "AccountCheckServlet", true);
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//将userName做为请求参数发送上去
request.send("username=" + username);
//request.send(null);
}
</script>
</head>
<body>
<h2>用户注册</h2>
帐号:<input type="text" id="userN
ame" name="userName" onblur="sendRequest()" />
</body>
</html>
---------------------------------------------------------------------
//AccountCheckServlet类，请求响应类
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 AccountCheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
//System.out.println("收到了请求"+username);
PrintWriter out = response.getWriter();
if(username.equals("newer")){//本来要连接数据库查询，这里为了方便便直接定义。
out.write("false");
}else{
out.write("true");
}
out.flush();
}
}
--------------------------------------------------------------------
当然还有web.xml文件配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>PicValidate</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>AccountCheckServlet</servlet-name>
<servlet-class>servlet.AccountCheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AccountCheckServlet</servlet-name>
<url-pattern>/AccountCheckServlet</url-pattern>
</servlet-mapping>
</web-app>
相关推荐
// 查询数据库，判断用户名是否已存在 boolean exists = userService.checkIfExists(username); Map, Object> result = new HashMap(); result.put("exists", exists); return ActionSupport.SUCCESS; } ...
**检测用户名重复** 1. **前端输入验证**：在用户输入完用户名后，触发AJAX请求。可以使用JavaScript事件监听器，如`input`或`change`，来检测用户名字段的变化。 ```javascript document.getElementById('...
在实现这一功能时，通常需要检查新注册的用户名是否已经存在，以避免重复注册。Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与服务器进行异步通信，使得用户注册过程更加流畅。...
"Ajax用户注册检查用户名"是一个关键功能，它使得用户在注册时可以实时验证所选用户名是否已存在，无需每次提交表单后等待服务器返回完整页面的刷新。这个过程涉及到前端JavaScript、Ajax（Asynchronous JavaScript ...
在用户名字段的验证函数中，我们发送ajax请求到服务器端接口，以判断用户名是否已被注册。 ```javascript form.verify({ username:function(value){ var datas = {username: value}; var message = ''; $.ajax...
6. **JavaScript处理响应**：收到服务器响应后，使用`xhr.responseText`或`xhr.responseJSON`（取决于服务器返回的数据类型）获取数据，并根据返回的“success”字段判断用户名是否重复。然后，可以使用DOM操作或者...
使用Ajax方式实现的注册界面对用户输入的用户名进行是否已经重复的判定，如果数据库中已经存在，则提错误。否则，提示正确。 我的博文中有预览图，博文地址：...
通过以上步骤，我们便成功地使用DWR和Spring实现了判断用户名是否重复的功能。这种方法使用户在注册时能得到即时反馈，提高了用户体验。对于初学者来说，这是一个很好的实践项目，能够帮助理解前后端交互的基本原理...
综上所述，这个项目展示了Spring Boot作为基础框架，Mybatis Plus作为数据访问层，以及Thymeleaf作为视图层的集成应用，实现了用户登录验证和用户名重复检查的关键功能。这样的组合使得开发过程更为高效，同时提供了...
本文将深入探讨如何使用PHP、Ajax、HTML和JavaScript实现注册时异步判断用户名是否可用的功能。 首先，我们需要创建一个HTML表单，用户可以在其中输入他们的用户名。HTML部分可能如下所示： ```html <!DOCTYPE ...
在这个系统中，当用户在输入框中输入用户名时，服务器会通过Ajax无刷新地检查该用户名是否已经被注册，以避免重复注册的情况。同时，系统后端数据库是Access，这意味着存储用户信息的数据存储解决方案是Microsoft ...
在这个项目中，我们将关注如何在SSM框架下实现一个功能，即实时检查用户名是否已经被注册，并且通过Ajax技术完成表单的提交。 首先，让我们深入理解SSM框架的核心组件： 1. **Spring**：这是一个全面的开源应用...
在这个场景中，用户在输入用户名时，我们可以即时检查该用户名是否已被占用，避免用户注册时提交重复或已存在的用户名。 首先，我们需要理解Ajax的基本工作原理。Ajax通过创建XMLHttpRequest对象来发起HTTP请求，...
3. 服务器端处理：假设我们使用Node.js和Express框架，创建一个API接口，接收到请求后查询数据库，判断用户名是否存在。 ```javascript const express = require('express'); const app = express(); app.use...
当xhr对象的readyState变为4（表示请求已完成）且status为200（表示请求成功）时，我们解析返回的JSON响应，并根据success字段判断验证结果。 在服务器端，你需要设置相应的路由来处理这个POST请求。如果是使用Node...
【jQuery+Ajax实现用户名重名实时检测】 在网页应用程序中，尤其是在用户注册的过程中，确保用户名的独特性是非常重要的。为了提高用户体验，实时检测用户名是否已被其他用户占用的功能变得越来越常见。本文将详细...
假设我们有一个简单的用户注册表单，用户输入用户名后，我们希望在提交前验证该用户名是否已被占用。 ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 监听状态变化 xhr....
// 解析服务器返回的数据，判断用户名是否可用 if (responseText === 'available') { alert('用户名可用'); } else { alert('用户名已存在'); } }, onFailure: function() { alert('服务器通信失败，请稍后...