使用JQuery和JavaScript实现的一个用户名验证
第一个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)
});
}