当我们注册一个新的用户的时候,都需要验证下注册的用户是否已经存在,经常发现网站上都是这样实现友好提示的,如下图:
那具体怎么实现这样异步验证用户名是否已经存在的呢?
这里用到了Ajax的异步操作,也就相当于,Ajax发送了一个需要验证用户名是否存在的请求,然后在设置请求所返回的时间,完成用户名是否存在的请求。
下面看下具体的代码:
- <span style="font-family:KaiTi_GB2312;font-size:18px;"> //定义一个请求
- var xmlHttp;
- function createXMLHttpRequest() {
- //表示当前浏览器不是ie,如ns,firefox
- if(window.XMLHttpRequest) {
- xmlHttp = new XMLHttpRequest();
- } else if (window.ActiveXObject) {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- //field为获取用户所填写的用户名
- function validate(field) {
- //判断用户名是否为空
- if (trim(field.value).length != 0) {
- //创建Ajax核心对象XMLHttpRequest
- createXMLHttpRequest();
- //将获取用户名发送到另一个jsp中去验证
- var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
- //设置请求方式为GET,设置请求的URL,设置为异步提交,true为异步,false为同步
- xmlHttp.open("GET",url,true);
- //将方法地址复制给onreadystatechange属性
- //类似于电话号码
- xmlHttp.onreadystatechange=callback;
- //将设置信息发送到Ajax引擎
- xmlHttp.send(null);
- } else {
- document.getElementById("spanUserId").innerHTML = "";
- }
- }
- //发送请求之后,返回的状体
- function callback() {
- //alert(xmlHttp.readyState);
- //Ajax引擎状态为成功
- if (xmlHttp.readyState == 4) {
- //HTTP协议状态为成功
- if (xmlHttp.status == 200) {
- if (trim(xmlHttp.responseText) != "") {
- //设置请返回的消息信息
- document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
- }else {
- document.getElementById("spanUserId").innerHTML = "";
- }
- }else {
- alert("请求失败,错误码=" + xmlHttp.status);
- }
- }
- }</span>
将获取的用户名去验证:这里为user_validate.jsp页面,具体的后台代码就不作展示了!
整体的一个异步验证用户名是否存在的例子就完成了,这样提高了用户体验度,美化了界面!
- <span style="font-family:KaiTi_GB2312;font-size:18px;"><td width="78%">
- <input name="userId" type="text" class="text1" id="userId"
- size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)">
- <span id="spanUserId"></span>
- </td></span>