【正文】 200) { //獲取服務(wù)漆器端返回的數(shù)據(jù) //獲取服務(wù)器段輸出的純文本數(shù)據(jù) var responseText = 。 } }}3. Servlet代碼() Java代碼 1. 3. 6. import 10. **類功能:注冊賬號時，異步校驗用戶名是否已存在 16. class{ 19. protectedServletException,21. doGet(request,22. } 24. protectedServletException,26. try設(shè)置響應(yīng)文件格式，這是為text/html =30. //oldUserName33. if||{ 37. StringString((ISO88591))。((hello))color=39。userName { green39。e) 49. } package 。import 。 } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { // 設(shè)置響應(yīng)文件格式，這是為text/html (text/html。 // if (oldUserName == null || () == 0) { (用戶名不能為空)。用戶名[ + userName + ]已經(jīng)存在，請使用其他用戶名/font)。 } } } catch (Exception e) { ()。 encoding=UTF8? 6. xsi:schemaLocation=2. //接收回車按鍵 POST12. function13. // 17. var 19. var 21. //解決中文亂麻問題的方法1，頁面端發(fā)出的數(shù)據(jù)作一次encodeURI，服務(wù)器段使用new22. //解決中文亂麻問題的方法2，頁面端發(fā)出的數(shù)據(jù)作兩次encodeURI，(old,UTF8) = convertURL(url)。 })。 35. 37. functionalert(服務(wù)器段的數(shù)據(jù)回來了??！)。41. // 43. var 45. (data)。timstamp 53. if{ url+//適用于已有參數(shù)時，urluserName。else=+//適用于沒有參數(shù)時，urlurl。65. url:checkUsername,//(默認(rèn):false。67. data:userName=//封裝請求參數(shù) 69. success:function(data){ dom的方式 //Jquery的查找節(jié)點的方式，參數(shù)中加上id屬性值可以找到一個節(jié)點。 //解決中文亂麻問題的方法2，頁面端發(fā)出的數(shù)據(jù)作兩次encodeURI，(old,UTF8) var url = checkUsername?userName= + encodeURI(encodeURI(userName))。 //使用jquery的XMLHTTPrequest對象post請求的封裝 $.post(url,null,callback)。 //動態(tài)的改變頁面中span節(jié)點中的內(nèi)容 (data)。 //適用于已有參數(shù)時，url = checkUsername?username= + userName。}//第二種方式：通過jQuery的ajax()方法實現(xiàn)function verify2() { $.ajax({ type:POST, //HTTP 請求方式 url:checkUsername, //請求URL async: false, //(默認(rèn): true) 默認(rèn)設(shè)置下，所有請求均為異步請求。 } })。PUBLICTransitional//EN 3. html5. 6. 7. br/14. !ajax方式不需要name屬性，需要一個id的屬性id=userNametype=button19. 21. /htmlxml。createXml5. if6. //針對FireFox，Mozillar，Opera，Safari，IE7，IE8 new8. //針對某些特定版本的mozillar瀏覽器的BUG進行修正 { else14. //兩個可以用于創(chuàng)建XMLHTTPRequest對象的控件名稱，保存在一個js的數(shù)組中 16. var ii{ 19. //取出一個控件名進行創(chuàng)建，如果創(chuàng)建成功就終止循環(huán) 21. xml 24. } 26. } 28. //向servlet發(fā)送請求內(nèi)容 ({ 32. (34. (content)。processResponse()()(|| 43. } 45. //解析xml { 48. //xml內(nèi)容：rootmessagetrue/message/root，在有的情況下message有多個 50. varmessage51. //獲取message節(jié)點中的文本內(nèi)容 53. //通過以下方式就可以獲取到文本內(nèi)容所對應(yīng)的節(jié)點 =55. //對于文本節(jié)點來說，可以通過nodeValue/data的方式返回文本節(jié)點的文本內(nèi)容 =respname_obj59. var60. )65. (color,green)。//設(shè)置字體屬性 //把result節(jié)點增加到font節(jié)點當(dāng)中 clearErrorResp(response_obj77. //取得父對象的子節(jié)點的個數(shù) =82. } 84. 86. function87. var =response_obj)95. //用來清空上一次提示錯誤留下來的信息 98. varuserName=)。else106. //設(shè)置元素節(jié)點中的html內(nèi)容 function createXml () { if () { //針對FireFox，Mozillar，Opera，Safari，IE7，IE8 xml = new XMLHttpRequest()。 i 。 = processResponse。}//處理返回XMLfunction processResponse() { if ( == 4 ) { if ( == 200 || ==0) { //調(diào)用xml的解析方法 parserXML()。 //對于文本節(jié)點來說，可以通過nodeValue/data的方式返回文本節(jié)點的文本內(nèi)容 var hasUser_txt = 。 =。 (color,red)。 //從后往前，刪除每個子節(jié)點 for( var i=size1。 var userName = 。 var url = xmlCheckUsername。 //設(shè)置元素節(jié)點中的html內(nèi)容 =用戶名不能為空！請輸入用戶名！。 7. import 12. 13. */p 17. publicHttpServletrequest, throwsrequest, throws27. // userName真實開發(fā)中為業(yè)務(wù)層從數(shù)據(jù)庫中獲取數(shù)據(jù) =:35. =37. if{ false。null。46. out48. (message)。 52. }{ 56. ()。import 。/** * author Seany * p * 類功能:注冊賬號時，異步校驗用戶名是否已存在 * /p */public class RegisterCheckUsername extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response)。 String userName = (userName)。// 該用戶名未被注冊！。 try { out = ()。 (/message)。 ()。5. xmlns:xsi= 8. 10. servletnameRCheckUsername/servletname12. /servlet14. servletmapping16. urlpattern/xmlCheckUsername/urlpattern18. ?xml version= encoding=UTF8?webapp version= xmlns= xmlns:xsi= xsi:schemaLocation= servlet servletnameRCheckUsername/servletname servletclass/servletclass /servlet servletmapping servletnameRCheckUsername/servletname urlpattern/xmlCheckUsername/urlpattern /servletmapping /webapp改寫為jQuery代碼： 第1，3，4不變，改寫第2點JS代碼如下： Js代碼 1. //檢查用戶名信息 { 4. if{ 6. } 8. 12. //Jquery的查找節(jié)點的方式，參數(shù)中加上id屬性值可以找到一個節(jié)點。$(userName)。userName(=0) req_url24. type://請求方式 //服務(wù)器段url地址userName=//告訴JQuery返回的數(shù)據(jù)格式 //定義交互完成，并且服務(wù)器正確返回數(shù)據(jù)時調(diào)用的回調(diào)函數(shù) 31. 33. function34. // 36. var parseXml(obj){ 43. var 45. var 47. // 49. var ==51. ()。該用戶名已被注冊過了！)。else){ 56. }