废话不多说直接贴源码：
1.新建一个jsp页面
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=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 'index.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">
<script type="text/javascript" src="js/verifyown.js"></script>
</head>
<body>
<h3>用户名输入校验的例子</h3>
<input name="username" type="text" id="username"><br>
<input type="button" value="检验" onclick="verify()">
<div id="result"></div>
</body>
</html>
这样就不需要定义在form表单里了。
2.创建Servlet
package com.zchen.ajax.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 AJAXServer extends HttpServlet {
private static final long serialVersionUID = 3611240119854641367L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
if (name.equals("chenzhen")) {
out.println("用户名[" + name + "]已经存在。");
} else {
out.println("用户名[" + name + "]尚未存在。");
out.println("<br/><a href=\'index.jsp\'>返回校验页面</a>");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
3.jiangservlet配置在web.xml中（很简单忽略）
4.最重要的一部新建一个js文件进行异步校验
//用户名校验的方法
//这个方法是用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框的值
//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面的一个标签，例如<input >
//.value可以获取一个元素节点的value属性值
var username = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
//这XMLHTTPRequest是对象内部使用中最复杂的一步
//需要针对IE和其他类型的游览器建立这个对象的不同使用方式
if(window.XMLHttpRequest){
//针对FireFox、Mozillar、Opera、safari、IE7、IE8
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
//针对某些特定版本的mozillar游览器的BUG进行修正
xmlhttp.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
//针对IE6、IE5.5、IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0;i<activexName.length;i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败回抛出异常然后可以继续循环继续藏式创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//确认XMLHTTPRequest对象创建成功
if(!xmlhttp){
alert("XMLHTTPRequest对象创建失败！");
}else{
alert(xmlhttp);
}
//3.注册回调函数
//注册回调函数时，只需要函数名不需要括号
//我们需要将函数名之策，如果加上括号就会把函数的返回值注册上这是错误的
xmlhttp.onreadystatechange = callback;
//4.设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，只要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互 true表示异步
xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
//5.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
function callback(){
//6.接受响应的数据
//判断对象的状态时交互完成
//一共有5种状态，4表示完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功 200表示成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//获取服务器端返回的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素的节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
}
}
}
注意：上面使用的get方式请求参数如果要换成post则应该将：
xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
xmlhttp.send(null);
换成：
//POST方式请求的代码
xmlhttp.open("POST","servlet/AJAXServer",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POst方式发送数据
xmlhttp.send("name="+username);
5测试okay。
分享到：
相关推荐
通过以上步骤，我们就实现了Ajax异步请求校验用户名唯一性的功能。这个过程涉及到前端交互、HTTP请求、后端处理以及数据库查询，充分展示了MVC架构和Ajax技术在实际项目中的应用。注意在实际开发中，还要考虑错误...
总结，本教程的“用户名校验（ajax技术）”主要涉及Ajax的基础使用，包括创建XMLHttpRequest对象、发送请求、处理响应等步骤。通过这个简单的示例，初学者可以了解到Ajax如何实现页面的异步更新，为后续更复杂的Web...
"利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈，无需等待页面整体刷新，极大地提升了交互体验。Ajax（Asynchronous JavaScript and XML）是一种创建动态...
本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能，以此来确保用户输入的用户名的独特性。这个过程涉及到前端与后端的交互，以及JavaScript、jQuery库和HTTP请求的基本原理。 首先，...
总结来说，利用Ajax实现“判断用户名是否可用”功能，需要结合前端JavaScript和后端服务器的配合，通过异步请求和响应处理，实现无刷新的用户体验，同时关注性能和安全性。在实际开发中，还可以结合现代前端框架如...
在这个案例中，我们将讨论如何使用Ajax和jQuery库来实现一个简单的用户名异步校验功能。 首先，我们需要理解Ajax的基本概念。Ajax允许我们在后台与服务器进行通信，而无需刷新整个页面。这种技术的核心是...
本案例“案例_Ajax_用户名异步校验”是关于如何利用Ajax实现一个实时验证用户输入用户名是否可用的功能，它可以帮助提高用户体验，减少不必要的等待时间。以下是关于这个主题的详细知识点： 1. **Ajax基本原理**： ...
在本话题中，我们要讨论的是如何使用AJAX来完成用户名的异步校验。这是一个常见的网络应用场景，用于在用户注册或登录时检查用户名是否已被占用。异步校验可以提供更好的用户体验，因为它允许在用户填写信息的同时...
4. **前端实现**：在前端，通常使用jQuery或原生JavaScript的XMLHttpRequest对象来构造Ajax请求。例如，使用jQuery的`$.ajax()`或`$.get()`方法，设置URL指向检查用户名或邮箱的接口，传入待验证的值，并设置回调...
不使用DWR，我们可以使用原生的XMLHttpRequest对象或者现代浏览器支持的`fetch` API来实现相同的功能。 - **创建请求**: 创建一个新的XMLHttpRequest实例，或者使用fetch发起GET或POST请求到服务器的验证接口。 -...
在网页中，我们通常使用JavaScript进行异步操作，其中XMLHttpRequest（XHR）或更现代的fetch API是实现异步数据交换的常用工具。本项目中的“ajaxCheckUserName”可能就是通过Ajax（Asynchronous JavaScript and XML...
综上所述，这个"AJAX校验用户名是否存在"的小例子展示了如何结合JQuery和Servlet实现异步数据验证。通过AJAX，前端可以无刷新地与服务器通信，而Servlet则作为后端处理逻辑的核心，两者协同工作，为用户提供高效、...
AJAX（Asynchronous JavaScript and XML）的核心是JavaScript，它利用XMLHttpRequest对象与服务器进行异步通信。XML虽在名字中，但在实际应用中，数据格式通常为JSON，因为JSON更易于处理和传输。通过创建...
【jQuery与JavaScript实现AJAX异步请求验证】 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。虽然XML...
总结来说，jQuery和JavaScript都可以实现AJAX异步请求验证，区别在于jQuery提供了一套更简洁的API来处理AJAX操作，如`$.ajax()`、`$.get()`和`$.post()`等，使开发者能更快速地构建功能，而原生JavaScript的实现则...
Ajax的核心是JavaScript，通过XMLHttpRequest对象与服务器进行异步通信。它主要包括以下几个步骤： 1. 创建XMLHttpRequest对象：在所有现代浏览器中，都可以通过`new XMLHttpRequest()`来创建。 2. 打开连接：使用`...
总的来说，Ajax技术通过XmlHttpRequest对象实现了网页的局部刷新和异步通信，降低了网络负载，提升了用户体验。它已经成为现代Web开发不可或缺的一部分，广泛应用于各种需要实时数据交互的场景，如网页聊天、动态...
- 不同浏览器的兼容性处理：现代浏览器（IE7及以上、Firefox等）使用window.XMLHttpRequest创建Ajax对象，而IE6等较老版本浏览器使用ActiveXObject("Microsoft.XMLHttp")。 3. Ajax发送GET请求的方法 - 使用Ajax...