AJAX異步檢查，檢查用戶名是否存在

寫法一：

var xmlHttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, SafarixmlHttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}console.log("xmlHttp,XHR,created"+xmlHttp.readyState);var url = "validateUsername.jsp?username=" + trim(field.value) + "&time=" + new Date().getTime(); //設置請求方式為GET，設置請求的URL，設置為異步提交 xmlHttp.open("GET", url, true); //將方法地址復制給onreadystatechange屬性 xmlHttp.onreadystatechange = function() {state_Change(xmlHttp);};<span style="color:#ff0000;">//Bad Code</span> xmlHttp.onreadystatechange = state_Change(xmlHttp);//將設置信息發送到Ajax引擎 xmlHttp.send(null); } else { document.getElementById("CheckField").innerHTML = ""; }

?

?

?

function state_Change(xmlHttp) { console.log("state_Change start");//Ajax引擎狀態為成功 if (xmlHttp.readyState == 4) { //HTTP協議狀態為成功 if (xmlHttp.status == 200) { if (trim(xmlHttp.responseText) != "") { //console.log("responseText: START___",xmlHttp.responseText," ___END");if(trim(xmlHttp.responseText)=="OK"){document.getElementById("userCheck").className="icon ticker"; document.getElementById("CheckField").innerHTML = ""; }else{document.getElementById("userCheck").className="";document.getElementById("CheckField").innerHTML = "<font color='red' style='font-size:15px; line-height: 3; vertical-align:middle'>" + xmlHttp.responseText + "</font>"; }}else {document.getElementsByName("userCheck").className="icon into";document.getElementById("CheckField").innerHTML = ""; } }else { alert("數據庫可能出錯，請求失敗，錯誤碼=" + xmlHttp.status); } } }

?

寫法二：

?

$(function() {$("#checkbtn").click(function() {if ($("#searchkey").val() == "") {console.log("searchkey is null");alert("沒有輸入值！！！！");} else {$.ajax({url : "CheckID?searchkey=" + $("#searchkey").val(),success : function(result) {tablename = $("#searchform").children("[name='tablename']").val();if(...){if (result == "exsit") {...} else {...}}else{if (result == "exsit") {...} else {...}}}});}});});

寫法二比較簡單，寫法一比較原始。

?

使用異步的Ajax的好處是頁面不用刷新，還能不需要點擊什么按鈕，不需要提交表單， 直接 由某事件自動提交到服務器進行 檢查 取值等操作。

?

轉載于:https://www.cnblogs.com/slankka/p/9158551.html

總結

以上是生活随笔為你收集整理的AJAX异步检查，检查用户名是否存在的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。