Question

I want some javascript + ajax to check username availability on fly.
And I have some troubles…

Let’s imagine the situation when we’re checking username availability on blur event.

What if we’re getting such scenario…

• a) user entered username “kir”
• b) focuses on another element
• c) ajax request started (requesting availability of “kir” username)
• d) user focuses on username and enter one more letter “kirA” (response from c) isn’t recieved yet)
• e) focuses on another element
• f) ajax request started (requesting availability of “kirA” username)
• g) we’re getting answer from c) and telling user that username is available, but it not (because we're telling about "kir", but not "kirA").

What should I do to avoid such situation?
Use some kind of randomly generated tokens to check validity of answer?

Thank you

Answer 1

You need some sort of mapping between the XHR request object and the username query it contained. Or in the server’s response to the AJAX query, include the username as well. A response may look like:

{
    username: "kir",
    available: false
}

In the callback, verify if the current textbox value is same as the returned username. If yes, then show the error, otherwise just ignore that response.