AJAX如何偵測使用者名稱是否具有重複性

這次帶給大家AJAX如何偵測使用者名稱是否具有重複性，AJAX偵測使用者名稱是否具有重複性的注意事項有哪些，以下就是實戰案例，一起來看一下。

先給大家展示下效果圖，再來給大家擼程式碼，效果圖如下：

下面寫一個簡單的例子，偵測使用者名稱是否唯一（直接擼程式碼）：

#前端介面：

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<meta>
<title>检测用户名是否唯一</title>
<style>
<!--
#toolTip {
  position:absolute;
  left:331px;
  top:39px;
  width:98px;
  height:48px;
  padding-top:45px;
  padding-left:25px;
  padding-right:25px;
  z-index:1;
  display:none;
  color:red;
  background-image: url(images/tooltip.jpg);
}
-->
</style>

                    

  

  

                                                                                                       

用户名：
密码：
确认密码：
E-mail：

     

AJAX檔：

<script>
function createRequest(url) {
  http_request = false;
  if (window.XMLHttpRequest) {                  // 非IE浏览器
    http_request = new XMLHttpRequest();             //创建XMLHttpRequest对象
  } else if (window.ActiveXObject) {               // IE浏览器
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");  //创建XMLHttpRequest对象
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert("不能创建XMLHttpRequest对象实例！");
    return false;
  }
  http_request.onreadystatechange = getResult;            //调用返回结果处理函数
  http_request.open(&#39;GET&#39;, url, true);                //创建与服务器的连接
  http_request.send(null);                    //向服务器发送请求
}
function getResult() {
  if (http_request.readyState == 4) {       // 判断请求状态
    if (http_request.status == 200) {      // 请求成功，开始处理返回结果
      document.getElementById("toolTip").innerHTML=http_request.responseText; //设置提示内容
      document.getElementById("toolTip").style.display="block";  //显示提示框
    } else {              // 请求页面有错误
      alert("您所请求的页面有错误！");
    }
  }
}
function checkUser(userName){
  if(userName.value==""){
    alert("请输入用户名！");userName.focus();return;
  }else{
    createRequest(&#39;checkUser.jsp?user=&#39;+userName.value);
  }
}
</script>

jsp檔案：

此範例並沒有連接資料庫，只是用陣列簡單表示註冊過的使用者。

-1){
    out.println("很抱歉，该用户名已经被注册！");     //输出检测结果
  }else{
    out.println("恭喜您，该用户名没有被注册！");     //输出检测结果
  }
%>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax和jsonp在專案中的實戰總結

用Ajax如何驗證信箱、使用者名的唯一性

以上是AJAX如何偵測使用者名稱是否具有重複性的詳細內容。更多資訊請關注PHP中文網其他相關文章！