第一个Ajax程序：楼主在此声名此博客仅当自己的参考手册和学习历程的见证。写得不好或有什么问题请进入博客的朋友们提宝贵意见，同时对于楼主博客不屑一顾的朋友们也不要乱加评断，你可以选择浮云就当没看见。谢谢——
1.前台页面：
<%@ 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/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.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>
2.导入js文件和jquery库：
1>jQuert库在网上可以找到不多作介绍。
2>
function verify(){
//1.获取文本框中的内容
//document.getElementById("username");dom的方式
//Jquery的查找节点的方式，参数上#加上属性值可以找到一个节点
//jQuery的方法返回的都是jQuery的对象，可以继续在上面执行其他的jQuery方法
var jQueryObj = $('#username');
//获取节点的值
var userName = jQueryObj.val();
//alert(userName);
//2.将文本框的数据发送给服务器的Servlet
//使用jQuery的XMLHTTPrequest对象get请求的封装
$.get("servlet/AJAXServer?name="+userName,null,callback);
}
//回调函数
function callback(data){
document.charset="UTF-8";
//3.接受服务器返回的数据
//alert("服务器段的数据回来了"+data);
//4.将服务器返回的数据动态的显示在页面上
//找到保存结果信息的节点<div id=result>
var resultObj = $('#result');
//动态的改变页面的div节点中的内容
resultObj.html(data);
}
3.定义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("admin")) {
out.println("用户名[" + name + "]已经存在。");
} else {
out.println("用户名[" + name + "]尚未存在。");
out.println("<br/><a href=\'index.jsp\'>返回校验页面</a>");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
4.配置web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>com.zchen.ajax.servlet.AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/servlet/AJAXServer</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
verify.js简写：
function verify(){
$.get("servlet/AJAXServer?name="+$('#username').val(),null,function(data){
$('#result').html(data)
});
}
分享到：
相关推荐
本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能，以此来确保用户输入的用户名的独特性。这个过程涉及到前端与后端的交互，以及JavaScript、jQuery库和HTTP请求的基本原理。 首先，...
首先，jQuery是一个轻量级的JavaScript库，它使得JavaScript的使用更加简洁和高效。在图片轮换功能上，jQuery提供了一系列动画方法，如`.fadeIn()`和`.fadeOut()`，可以轻松地创建平滑的图片切换效果。例如： ```...
通过以上分析，我们可以看到，在ASP.NET中结合jQuery实现无刷新的用户名验证，不仅提高了用户体验，也展示了前后端交互的基本流程和技术要点。这对于初学者理解和掌握Web开发中的异步通信具有重要意义。
本文档将详细介绍如何使用JQuery库来实现一个简单的用户名验证功能。 #### 一、背景介绍 在实际项目中，经常需要对用户输入的数据进行验证，确保其符合预期格式或规则。例如，在注册页面上，需要检查用户名是否已...
在用户名验证场景中，我们可能需要向服务器发送一个包含待验证用户名的请求，并期待返回验证结果。 第一种方法，使用jQuery的GET方法： ```javascript $.get('validateUsername.aspx', { username: 'testUser' }, ...
jQuery则是一个轻量级的JavaScript库，简化了DOM操作、事件处理、动画制作以及Ajax交互。在Ajax方面，jQuery提供了易于使用的API，使开发者能够轻松地发起异步请求，与服务器进行数据交换。 在实现Ajax无刷新验证...
通过这个教程，初学者可以了解到如何结合Ajax、JavaScript、PHP和Oracle数据库来实现一个基本的用户名验证功能。实际应用中可能需要考虑更多的细节，如错误处理、安全性（防止SQL注入等）以及用户体验优化。但这个...
在这个"JQuer用户名验证例子"中，我们将探讨如何使用JavaScript库jQuery来实现前端的用户名验证，而无需与数据库交互。这个例子简化了流程，把数据库操作留给了服务器端，如Servlet。 **jQuery简介** jQuery是一个...
接着，我们引入JQuery表单验证插件，如jQuery Validation Plugin，这是一个广泛使用的开源插件，提供了多种内置验证规则和自定义规则的能力。要实现验证用户名是否存在，我们可以创建一个自定义验证方法，利用AJAX...
以上就是一个简单的jQuery实现异步验证用户名唯一性的过程。通过这种方式，我们可以提供实时反馈，提升用户体验，减少无效注册，并确保数据的准确性。记住，实际项目中可能需要添加更多的错误处理和用户体验优化，...
这里是一个使用jQuery的示例： ```javascript $(document).ready(function() { $('#username').on('blur', function() { var username = $(this).val(); $.ajax({ url: 'check_username.php', type: 'POST', ...
通过这种方式，我们可以使用JQuery实现无刷新的重复用户名验证，提高用户体验，同时减轻服务器的压力。这种方法的关键在于合理的事件监听、Ajax请求的运用以及与服务器的有效通信。在实际项目中，还需要考虑用户体验...
jQuery.validate是一个基于jQuery的表单验证插件，它可以简化前端表单的验证过程，提供丰富的验证规则和自定义错误消息。通过jQuery.validate，开发者可以轻松地实现诸如必填项检查、格式验证（如邮箱、电话号码）、...
本文将详细讲解如何使用jQuery实现一个简单的用户名唯一性验证功能，结合给出的文件`text.html`（HTML页面）、`jquery-1.2.6.js`（jQuery库）和`yz.php`（后端验证脚本）来实现这一过程。 首先，我们需要理解jQuery...
通过这种方式，我们可以利用Struts、jQuery和Ajax构建一个高效的、无刷新的用户名验证功能。这不仅提升了用户体验，还减轻了服务器的负担，因为只需要处理必要的数据交互，而不是完整的页面渲染。在实际项目中，这种...
本文将深入探讨如何使用jQuery实现一个简单的功能——验证用户名。这个主题是基于给定的压缩包文件“JQueryStudy_userVerify”，我们可以从中学习到关于jQuery验证的基本概念和实践技巧。 首先，验证用户名通常涉及...
jQuery 是一个JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务，使开发者能更轻松地实现Ajax功能。 在这个例子中，前端使用jQuery发起Ajax请求，检查用户输入的用户名是否已被占用。jQuery的$.ajax()...
在这个场景下，我们关注的是如何使用jQuery这一强大的JavaScript库来实现对用户输入的验证，特别是针对用户名长度和电子邮件格式的验证。jQuery提供了简洁易用的API，使得这类功能的实现变得简单而高效。 首先，...
2. **jQuery**：这是一个JavaScript库，简化了DOM操作、事件处理、动画和Ajax交互。jQuery使得开发者能够更便捷地选择和操作HTML元素，同时提供了优雅的API来处理Ajax请求。 3. **Ajax（Asynchronous JavaScript ...
jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化前端交互，包括此类验证操作。在这个场景中，我们将深入探讨如何使用jQuery和Ajax技术来实现这一功能。 首先，我们需要理解jQuery的基本用法。jQuery库...