即時查看用戶名是否可用？

Question

我想要一些javascript + ajax來動態檢查用戶名的可用性。 我有些麻煩

讓我們想象一下在檢查模糊事件時用戶名的可用性時的情況。

如果我們遇到這種情況怎么辦...

• a）用戶輸入用戶名“ kir”
• b）專注於另一要素
• c）ajax請求已啟動（請求“ kir”用戶名的可用性）
• d）用戶專注於用戶名並再輸入一個字母“ kirA”（來自c的響應）
• e）專注於另一要素
• f）ajax請求已啟動（請求“ kirA”用戶名的可用性）
• g）我們從c）中得到答案，並telling user that username is available, but it not (because we're telling about "kir", but not "kirA") 。

為避免這種情況我該怎么辦？ 使用某種隨機生成的令牌來檢查答案的有效性？

謝謝

Answer 1

創建新XHR時，應該使用XHR。

var ongoingRequest = null;

function test() {
   if(ongoingRequest != null) {
      ongoingRequest.abort();
   }

   ongoingRequest = $.ajax( ... );
}

您可以添加其他功能，以便在收到響應后再次進行驗證：

$.ajax({
   ...
   data: { query: query },
   success: (function(q) {
       return function(result) {
          if( $('#myTxt').val() != q) {
             // the textbox value is not the same as the query was
             // at the time of creating this response!
             return false;
          }

          ...
       }
   })(query)
});

Answer 2

您需要在XHR請求對象與其包含的用戶名查詢之間進行某種映射。 或在服務器對AJAX查詢的響應中，還包括用戶名。 響應可能類似於：

{
    username: "kir",
    available: false
}

在回調中，驗證當前文本框值是否與返回的用戶名相同。 如果是，則顯示錯誤，否則忽略該響應。

Answer 3

您只需要async-request-variable的正確范圍！
如果您創建了一個新請求，只需檢查是否已經存在一個，如果是，請將其設置為null / cancel，然后繼續！

另一個變體是：阻止ui，加載微調器圖標，阻止輸入，...（不是很好的解決方案...）

編輯：
我認為ajax / ...是一件好事，但是當涉及到向請求中添加越來越多的屬性時，您應該小心一點。 甚至可以提出更好的解決方案時（甚至不需要像userA is not available這樣的顯式ui交互userA is not available ）時，甚至更多

Answer 4

這是我用於此目的的：

JAVASCRIPT：

$(document).ready(function() {
    $("#username").blur(function() {
        //remove all the class add the messagebox classes and start fading
        $("#username_status").removeClass().addClass('username_status').text('Checking username').fadeIn("slow");
        //verify entered username
        $.post("path to php file",{ user_name:$(this).val() } ,function(data) {
            // username not avaiable
            if (data=='no') {
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('Username in use').addClass('username_status_error').fadeTo(900,1);
                });
            // username available
            }else if (data=='yes') {
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('username available').addClass('username_status_ok').fadeTo(900,1);
                });
            // username field empty
            }else if (data=='empty') {
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('username field is empty').addClass('username_status_error').fadeTo(900,1);
                });
            // username check error
            }else{
                $("#username_status").fadeTo(200,0.1,function() {
                    $(this).html('fail to check username').addClass('username_status_error').fadeTo(900,1);
                });
            }
        });
    });
});

使用AJAX發布的PHP文件：

<?php
    require_once ('db_connect.php'); // include the database connection
    if ($_POST['user_name']!="") {
        // check if username is available from login table
        $query = sprintf(" select * from login where username = '%s' ", mysql_real_escape_string($_POST['user_name']));
        if (mysql_query($query)) {
            if (mysql_num_rows(mysql_query($query))>0) {
                echo "no";
            }else{
                echo "yes";
            }
        }else{
            echo "error";
        }
    }else{
        echo "empty";
    }
?>

和HTML格式：

<form name="login-form" id="login-form" class="clients_form" method="post" action="form post link">
  <ol>
    <li>
      <label for="login_usr" class="OF_name">Username:<span class="mandatory">*</span><br></label>
      <input tabindex="1" accesskey="u" name="username" type="text" maxlength="30" id="username">
    </li>
    <li>
      <label for="login_pwd" class="OF_email">Password:<span class="mandatory">*</span><br></label>
      <input tabindex="2" accesskey="p" name="password" type="password" maxlength="15" id="password">
    </li>
    <li class="buttons">
      <input class="btn" tabindex="3" accesskey="l" type="submit" name="cmdlogin" value="Login">
      <input class="btn" name="cancel" type="button" value="Cancel" onclick="location.href='cancel link'">
    </li>
  </ol>
  <br><br><br>
</form>

這是我創建給您的一個簡單示例，但是應該可以正常工作...

當用戶離開用戶名字段時，AJAX將發布PHP文件以驗證數據庫，如果用戶返回用戶名字段，再次將其保留，Ajax將發布。

希望這可以幫助！

Answer 5

您可以在進行Ajax時禁用輸入。

Answer 6

或者，您可以執行“ g）我們從c）得到答案並告訴用戶用戶名kir不可用”

Answer 7

對於不返回用戶名的一般情況，Anurag的第一個建議（將請求數據與查詢一起保留）是最佳選擇。 如果發送多個長參數，則不希望它們不必要地使用帶寬並增加響應時間。

快速示例，保留發送記錄：

function checkUserName(){
    var uName=$('#uname').val(); // get it immediately stored into the variable
    $.ajax( {url: '...', data: {username: uName}, success: function(data){
        if(data.is_available)
            alert(uName + " is available."); // this instance of the variable is still in scope, even the checkUserName function has been re-called since
    });
}

這段代碼仍然可以優化，但是您可以理解。 如果您經常使用這種方法，則應閱讀有關javascript范圍（閉包等）的信息。