jQuery確實是一個很好的JavaScript框架，今天利用閒暇時間給大家一個借助jQuery異步實現校驗用戶名的唯一性的例子：
代碼1——index.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>如何使用jquery實現異步驗證用戶名的唯一性</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function checkUserName(){
$.ajax({
url : "<%=basePath%>JqueryAjaxCheckUserNameServlet", //(默認: 當前頁地址) 發送請求的地址
type: "post", //(默認: "get") 請求方式 ("post" 或 "get")， 默認為 "get"。注意：其它 http請求方法，如 put和 delete也可以使用，但僅部分浏覽器支持。
timeout:10,//設置請求超時時間（毫秒）。此設置將覆蓋全局設置。
async:true,//(默認: true) 默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住浏覽器，用戶其它操作必須等待請求完成才可以執行。
contentType:"application/x-www-form-urlencoded",//(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。
data: 'userName='+$("#userName").val(),//發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
dataType:'json',/*預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，並作為回調函數參數傳遞，可用值:
*"xml": 返回 XML 文檔，可用 jQuery 處理。
*"html": 返回純文本 HTML 信息；包含 script 元素。
*"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。
*"json": 返回 JSON 數據 。
*"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
*/
success: function(json, textStatus){//如果調用servlet成功，響應200。請求成功後回調函數。這個方法有兩個參數：服務器返回數據，返回狀態(可以缺省)。
console.log(textStatus);
var flag = json.flag;
if(flag == 'true'){
$('#showUserName').html("<font size=\"2\" color=\"green\"> 用戶名有效！</font>");
}else if(flag == 'false'){
$('#showUserName').html("<font size=\"2\" color=\"red\"> 用戶名已被使用！</font>");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {//如果調用servlet出現問題，響應非200（這裡響應405）。通常情況下textStatus和errorThown只有其中一個有值 。(默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數：XMLHttpRequest 對象，錯誤信息，（可能）捕獲的錯誤對象。
console.log(textStatus);
$('#showUserName').html("<font size=\"2\" color=\"red\"> 請求發送失敗！</font>");
}
});
}
</script>
</head>
<body>
<center ><font >如何使用jquery實現異步驗證用戶名的唯一性</font><br><br>
用戶名：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();">
<font size="2" id="showUserName"> *用戶名必填，具有唯一性。</font>
</center>
</body>
</html>
代碼2——JqueryAjaxCheckUserNameServlet.java文件：
package com.ghj.packagofserlet;
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 JqueryAjaxCheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 6387744976765210524L;
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
try{
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
System.out.println(1/0);//故意出現異常，以檢查index.jsp中error方法是否可用
PrintWriter out = response.getWriter();
String userName=request.getParameter("userName");//獲取“用戶名”
if("admin".equals(userName)) {
out.write("{\"flag\":\"false\"}");//“false”表示用戶名不可用。
} else {
out.write("{\"flag\":\"true\"}");//“true”表示用戶名可用。
}
out.flush();
out.close();
}catch (Exception e) {
e.printStackTrace();
response.setStatus(405);//此時將執行index.jsp中error方法。
}
}
}
代碼3——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"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
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">
<servlet>
<servlet-name>JqueryAjaxCheckUserNameServlet</servlet-name>
<servlet-class>com.ghj.packagofserlet.JqueryAjaxCheckUserNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JqueryAjaxCheckUserNameServlet</servlet-name>
<url-pattern>/JqueryAjaxCheckUserNameServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
說明：上面的例子用到了jquery-1.8.3.min.js文件，該文件可在下面的下載資源中找到。
1、如何使用jQuery實現異步驗證用戶名的唯一性（本工程旨在研究如何使用jquery實現異步驗證用戶名的唯一性的功能。 本工程編碼方式：UTF-8）
2、jQuery實現表單異步提交（本工程為Java Web工程，演示了如何使用Jquery實現表單的異步提交！）
------------------------------------------分割線------------------------------------------
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2014年資料/8月/12日/jQuery異步功能實例/
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡
