【文章內(nèi)容簡介】 0。encodeURI(encodeURI(userName))。 24. url=convertURL(url)。 25. 26. // 27. //使用jquery的XMLHTTPrequest對象get請求的封裝 28. //$.get(url,null,function(data){ 29. //$(result).html(data)。 30. //})。 31. 32. //使用jquery的XMLHTTPrequest對象post請求的封裝 33. $.post(url,null,callback)。 34. } 35. 36. //回調(diào)函數(shù) 37. functioncallback(data){ 38. //alert(服務器段的數(shù)據(jù)回來了?。?。 39. // 40. //alert(data)。 41. // 42. //找到保存結果信息的節(jié)點 43. varresultObj=$(result)。 44. //動態(tài)的改變頁面中span節(jié)點中的內(nèi)容 45. (data)。 46. } 47. 48. //給url地址增加時間戳，騙過瀏覽器，不讀取緩存 49. functionconvertURL(url){ 50. //獲取時間戳 51. vartimstamp=(newDate()).valueOf()。 52. //將時間戳信息拼接到url上 53. if((?)=0){ 54. url=url+amp。t=+timstamp。//適用于已有參數(shù)時，url=checkUsername?username=+userName。 55. }else{ 56. url=url+?t=+timstamp。//適用于沒有參數(shù)時，url=checkUsername。 57. } 58. returnurl。 59. } 60. 61. //第二種方式：通過jQuery的ajax()方法實現(xiàn) 62. functionverify2(){ 63. $.ajax({ 64. type:POST,//HTTP請求方式 65. url:checkUsername,//請求URL 66. async:false,//(默認:true)默認設置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行。 67. data:userName=+encodeURI(encodeURI($(userName).val())),//封裝請求參數(shù) 68. dataType:html,//預期服務器返回的數(shù)據(jù)類型 69. success:function(data){ 70. $(result).html(data)。 71. } 72. })。 73. } //接收回車按鍵function checkUsername(evt){ if(==13){ //可選verify1()和verify2()任意一種 verify2()。 }}//第一種方式:通過jQuery的load()/get()/post()方法實現(xiàn)//load():默認使用GET方式 傳遞附加參數(shù)時自動轉(zhuǎn)換為 POST 方式。function verify1() { // //(userName)。 dom的方式 //Jquery的查找節(jié)點的方式，參數(shù)中加上id屬性值可以找到一個節(jié)點。 //jquery的方法返回的都是jquery的對象，可以繼續(xù)在上面執(zhí)行其他的jquery方法 var jqueryObj = $(userName)。 //獲取節(jié)點的值 var userName = ()。 //解決中文亂麻問題的方法1，頁面端發(fā)出的數(shù)據(jù)作一次encodeURI，服務器段使用new String((iso88591),UTF8)。 //解決中文亂麻問題的方法2，頁面端發(fā)出的數(shù)據(jù)作兩次encodeURI，(old,UTF8) var url = checkUsername?userName= + encodeURI(encodeURI(userName))。 url = convertURL(url)。 // //使用jquery的XMLHTTPrequest對象get請求的封裝// $.get(url,null,function(data){// $(result).html(data)。// })。 //使用jquery的XMLHTTPrequest對象post請求的封裝 $.post(url,null,callback)。}//回調(diào)函數(shù)function callback(data){ // alert(服務器段的數(shù)據(jù)回來了?。?。 // //alert(data)。 // //找到保存結果信息的節(jié)點 var resultObj = $(result)。 //動態(tài)的改變頁面中span節(jié)點中的內(nèi)容 (data)。}//給url地址增加時間戳，騙過瀏覽器，不讀取緩存function convertURL(url) { //獲取時間戳 var timstamp = (new Date()).valueOf()。 //將時間戳信息拼接到url上 if ((?) = 0) { url = url + amp。t= + timstamp。 //適用于已有參數(shù)時，url = checkUsername?username= + userName。 } else { url = url + ?t= + timstamp。 //適用于沒有參數(shù)時，url = checkUsername。 } return url。}//第二種方式：通過jQuery的ajax()方法實現(xiàn)function verify2() { $.ajax({ type:POST, //HTTP 請求方式 url:checkUsername, //請求URL async: false, //(默認: true) 默認設置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行。 data:userName= + encodeURI(encodeURI($(userName).val())), //封裝請求參數(shù) dataType:html, //預期服務器返回的數(shù)據(jù)類型 success:function(data){ $(result).html(data)。 } })。 }二、 用戶名校驗服務器返回XML數(shù)據(jù)的Ajax實例 。 Html代碼 1. !DOCTYPEHTMLPUBLIC//W3C//DTDHTMLTransitional//EN 2. 3. html4. head5. title用戶名校驗ajaxxml實例/title6. metaequiv=contenttypecontent=text/html。charset=utf8/7. scripttype=text/javascriptsrc=/script8. 9. /head10. body11. 12. 用戶名：br/13. !ajax方式下不需要使用表單來進行數(shù)據(jù)提交，因此不用寫表單標簽14. !ajax方式不需要name屬性，需要一個id的屬性15. inputtype=textid=userNameonkeypress=checkUsername(event)/16. inputtype=buttonvalue=定位文本框，按Enter校驗/17. 18. spanid=result/span19. 20. /body21. /html!DOCTYPE HTML PUBLIC //W3C//DTD HTML Transitional//EN htmlhead title用戶名校驗ajaxxml實例/title meta equiv=contenttype content=text/html。 charset=utf8 / script type=text/javascript src=/script /headbody 用戶名： br/ !ajax方式下不需要使用表單來進行數(shù)據(jù)提交，因此不用寫表單標簽 !ajax方式不需要name屬性，需要一個id的屬性 input type=text id=userName onkeypress=checkUsername(event)/ input type=button value=定位文本框，按Enter校驗/ span id=result/span/body/html() Js代碼 1. 2. //創(chuàng)建AJAX引擎 3. varxml。 4. functioncreateXml(){ 5. if(){ 6. //針對FireFox，Mozillar，Opera，Safari，IE7，IE8 7. xml=newXMLHttpRequest()。 8. //針對某些特定版本的mozillar瀏覽器的BUG進行修正 9. if(){ 10. (text/xml)。 11. } 12. }elseif(){ 13. //針對IE6，IE5 14. //兩個可以用于創(chuàng)建XMLHTTPRequest對象的控件名稱，保存在一個js的數(shù)組中 15. //排在前面的版本較新 16. varactivexName=[,]。 17. for(vari=0。ii++){ 18. try{ 19. //取出一個控件名進行創(chuàng)建，如果創(chuàng)建成功就終止循環(huán) 20. //如果創(chuàng)建失敗，回拋出異常，然后可以繼續(xù)循環(huán)，繼續(xù)嘗試創(chuàng)建 21. xml=newActiveXObject(activexName[i])。 22. break。 23. }catch(e){ 24. } 25. } 26. } 27. } 28. //向servlet發(fā)送請求內(nèi)容 29. functionsendRequest(url,content){ 30. createXml()。 31. =processResponse。//回調(diào)方法，注意沒有() 32. (post,url)。 33. (contenttype,application/xformurlencoded)。 34. (content)。 35. } 36. //處理返回XML 37. functionprocessResponse(){ 38. if(==4){ 39. if(==200||==0){ 40. //調(diào)用xml的解析方法 41. 160