Ajax异步检查用户名是否存在

任何网站注册用户时，都会检查用户是否已经存在。很久以前，处理方法是将所有数据提交给服务器进行验证。显然，这种方式的用户体验非常糟糕；后来，有了Ajax和异步交互，当用户输入用户名并继续填写其他信息时，Ajax会将信息发送到服务器，检查用户名是否已经注册，这样如果用户名已经存在，就可以给出提示，而无需等待用户提交所有数据。这种方式大大提升了用户体验，今天就和大家聊聊这种互动方式。

下面是用JS获取用户Id并发送到user_validate.jsp页面，然后通过回调方法接收页面返回的消息并通知用户。

函数validate(field){ if(trim(field . value))。长度！=0) {//创建Ajax核心对象xmlhttprequest createxmlhttprequest()；var url='user_validate.jsp？userId=' trim(field . value)' time=' new Date()。getTime()；//将请求方法设置为GET，设置请求的url，设置为异步提交xmlHttp.open('GET '，URL，true)；//将方法地址复制到onreadystatechange属性//类似于电话号码xmlhttp . onreadystatechange=callback；//将设置信息发送给Ajax引擎xmlhttp . send(null)；} else { document . getelementbyid(' spanUserid ')。innerHTML=} }函数回调(){//alert(xmlhttp . readystate)；//Ajax引擎状态成功if(xmlhttp . readystate==4){//http协议状态成功if(xmlhttp . status==200){ if(trim(xmlhttp . responsetext)！=' '){//alert(xmlhttp . responsetext)；document . getelementbyid(' spanUserid ')。innerHTML=' font color=' red ' ' XMlhttp . responsetext '/font '；} else { document . getelementbyid(' spanUserid ')。innerHTML=} }else {alert('请求失败，错误代码=' xmlhttp . status)；} } } user _ validate.jsp页面接收用户Id，并根据该Id查询是否存在。如果有，则不返回任何内容。

% String UserID=request . GetParameter(' UserID ')；if(UserManagerGetInstance()。查找用户标识！=null) {out.println('用户代码已经存在')；}%当光标离开用户代码文本框时，触发检查方法。复制代码如下：输入名称=' userid '类型=' text' id=' userid '大小=' 10' maxlength=' 10 '值=' %=userid % ' on bulr=' validate(this)'

翻译

我不会按照用户Id贴现有代码，因为太简单了，怕浪费大家的带宽。

做Web开发要多考虑用户体验，使用客户端认证(当然为了安全要进行服务器认证)和异步交互可以有效提升用户体验。只有当用户感到舒适并喜欢使用我们所做的东西时，我们的工作才能有意义，我们的目标是让用户满意。

细节决定成败。页面上的各种提示都是非常小的细节。不要低估这些小细节。如果做得好，可以带来更多的用户；如果你做得不好，你可能会停止使用它。程用心做细节，让用户爱上网页体验！