<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#loginDiv{width:500px; oveflow:hidden;border:1px solid #ccc;margin:30px auto;background-color:#eee;}
.top{height:40px;line-height:40px;border-bottom:1px solid #ccc;text-indent:1em;font-weight:bold;}
#loginDiv p{line-height:24px;height:24px;margin:14px;}
#btn{padding:5px 10px;cursor:pointer;margin-left:66px;}
#msg{line-height:24px;height:24px;margin:14px;}
.red{color:red;}
.green{color:green;}
</style>
<script type="text/javascript" >
window.onload = function(){
var username = document.getElementById("username");
var username_msg = document.getElementById("username_msg");
//创建XMLHttpRequestc对象
var xmlHttp=false;
//获取XMLHttpRequest对象， 并兼容浏览器
function getXMLHttp(){
if(window.ActiveXObject){//IE浏览器
try{
xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("您的IE浏览器不支持XMLHttp");
}
}
}else if(window.XMLHttpRequest){//其他浏览器，如mozilla的firefox或者 Netscape...
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType){//firefox的特殊版本需要设置overrideMimeType 7
xmlHttp.overrideMimeType("text/html");
}
}else{
alert("您的浏览器不支持XMLHTTP");
}
};
function processResponse(){
alert("XMLHttp.readyState交互状态码---> "+xmlHttp.readyState+"\n"+
"xmlHttp.status，HTTP状态码---> "+xmlHttp.status);
if( xmlHttp.readyState == 4){
if(xmlHttp.status==200){
if( xmlHttp.responseText.match(/OK/)){
username_msg.innerHTML = "<span class='green'>恭喜，用户名可以使用</span>";
}else if( xmlHttp.responseText.match(/ERROR/) ){
username_msg.innerHTML = "<span class='red'>用户名已存在，请更换</span>";
}
}else{
alert("你所请求的页面有异常。");
}
}else{
//请等待...
username_msg.innerHTML = "<span class='red'>请等待...</span>";
}
};
//采用AJAX技术异步验证 username
username.onblur = function(){
if(username.value == ""){
alert("请输入用户名");
return;
}else{
//ajax验证
getXMLHttp();
//open();创建一个新的http请求，并指定此请求的方法、URL以及验证信息
//true:异步方式发送 异步:请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
//false：同步方式发送，同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
xmlHttp.open("GET","deal.jsp?username="+username.value,true);
xmlHttp.onreadystatechange = processResponse;
xmlHttp.send(null);
}
//get方式
//xmlHttp.open("GET","deal.jsp?username="+username.value,true);
//xmlHttp.send(null);
//POST方式
//xmlHttp.open("POST","deal.jsp",true);
//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlHttp.send("username="+username.value);
};
};
</script>
</head>
<body>
<div id="loginDiv">
<div class="top">会员注册</div>
<p>用户名：<input type="text" id="username" ><span id="username_msg"></span></p>
<p>密 码：<input type="password" id="password" > </p>
<p>确认密码：<input type="password" id="password" value=""> </p>
<p>邮箱：<input type="text" id="email" ><span id="email_msg"></span></p>
<p>性别： <input type="radio" >男 <input type="radio" >女</p>
<p><input type="button" value="注册" id="btn"></p>
</div>
</body>
</html>
=========
<%
String username = request.getParameter("username");
String msg = "";
if("admin".equals(username) || "administrator".equals(username) || "ajax".equals(username) ){
msg = "ERROR";
}else{
msg = "OK";
}
out.println(msg);
%>
相关推荐
在"ajax异步验证用户名是否存在"的场景中，主要涉及以下几个步骤： 1. **前端交互**：当用户在注册表单中输入用户名并失去焦点时，JavaScript事件监听器会被触发。我们可以使用`addEventListener`来监听`blur`事件...
"利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈，无需等待页面整体刷新，极大地提升了交互体验。Ajax（Asynchronous JavaScript and XML）是一种创建动态...
### AJAX与Struts结合实现无刷新验证用户名是否存在 在Web开发中，用户体验是至关重要的因素之一。传统的表单提交方式往往会导致整个页面重新加载，这不仅降低了用户体验，还增加了服务器的负担。为了解决这一问题...
在这个项目中，我们将探讨如何使用这些技术来验证用户名是否已存在于数据库中。 首先，Struts2 是一个基于MVC（Model-View-Controller）模式的Java Web框架，它使得开发者可以更方便地处理HTTP请求和响应，同时提供...
在这个"AJAX 验证用户名"的示例中，我们将探讨如何使用AJAX技术来实时检查用户在注册或登录时输入的用户名是否可用。 首先，让我们了解AJAX的基本工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取数据，...
以下是Ajax实现用户名验证的基本步骤： 1. 创建HTML表单：在HTML中设置一个输入框用于用户输入用户名，并添加一个按钮或链接来触发验证操作。例如： ```html 请输入用户名" /> 验证 ``` 2. 编写JavaScript代码...
在实现Ajax无刷新验证用户名存在的过程中，我们需要以下关键步骤： 1. **前端准备**： - 在HTML表单中，创建一个用于输入用户名的字段，例如`<input type="text" id="username" />`。 - 添加一个按钮或使用jQuery...
通过上述步骤，我们可以实现Java后端与Ajax前端的结合，实现实时验证用户名的唯一性，提供良好的用户体验。这个压缩包中的"Ajax验证用户名"应该包含了实现这一功能的相关代码，包括前端Ajax调用和后端Java处理逻辑，...
在用户名验证场景中，当用户在输入框中输入用户名并失去焦点时，Ajax可以发送一个异步请求到服务器，服务器则会检查该用户名是否已存在，然后将结果返回给前端，前端根据返回的结果向用户显示相应的提示信息。...
`Ajax+aspdotnet无刷新验证用户名.txt`可能是实现此功能的详细步骤或代码示例；`注释.txt`包含有关代码或功能的解释；`更新说明.txt`记录了功能的改进和修复的问题。 了解以上知识点后，你可以根据提供的源码深入...
### AJAX验证用户名 **基本概念：** AJAX验证用户名通常用于注册或登录表单，以实时检查用户输入的用户名是否已存在。这种验证提高了用户体验，因为用户无需提交表单就能立即得知用户名是否可用。 **步骤：** 1. *...
本示例是关于如何利用Ajax来验证用户名是否在数据库中已存在，从而提高用户体验。下面将详细阐述这个过程中的关键知识点。 1. **Ajax基础**：Ajax的核心是创建XMLHttpRequest对象，它允许JavaScript在后台与服务器...
在网页应用中，验证用户名是否已经存在是一项基本但至关重要的功能。这有助于确保用户注册时选择的用户名是唯一的，防止重名现象发生。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化前端交互，包括...
在这个“Ajax实现简单的用户名验证”的示例中，我们将探讨如何利用Ajax来检查用户在注册时输入的用户名是否已存在，从而提供即时的反馈，提升用户体验。 首先，我们需要理解Ajax的基本组成部分： 1. **...
在服务器端，我们采用Asp.Net处理来自客户端的请求，并执行数据库查询操作来验证用户名是否存在。 1. **代码逻辑**： - 定义一个名为`checkusername`的Asp.Net页面，该页面继承自`System.Web.UI.Page`。 - 在`...
通过上述步骤，我们可以实现一个实时的、无刷新的用户名验证功能。用户在输入用户名时，后台会立即检查其是否已被占用，从而提供更好的用户体验。这个过程展示了前后端交互的基础，以及如何利用PHP、MySQL和Ajax进行...
首先，我们需要在服务器端创建一个Java类，包含验证用户名的方法。例如，我们可以创建一个`UserService`类，其中有一个`isUserNameExist(String userName)`方法。这个方法会查询数据库，检查输入的用户名是否已被...
总结，本教程的“用户名校验（ajax技术）”主要涉及Ajax的基础使用，包括创建XMLHttpRequest对象、发送请求、处理响应等步骤。通过这个简单的示例，初学者可以了解到Ajax如何实现页面的异步更新，为后续更复杂的Web...
使用jQuery简化JavaScript的编写，并通过AJAX调用后端服务来验证用户名。 - **JavaScript/jQuery代码示例**： ```javascript function validateUsername() { var username = $('#username').val(); $.ajax({ ...
### Ajax实现异步刷新验证用户名是否已存在的具体方法知识点总结 #### 1. Ajax技术介绍 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与...