Ajax实践之用户是否存在

关于Ajax在之前的学习中，已经对它的基础知识有了初步的了解，只是欠实践。那么接下来就让实践来检验一下真理吧！

基础见：http://blog.csdn.net/liu_yujie2011com/article/details/29812777

那么先回想一下，Ajax是用来解决什么问题的？答案很简单：解决同步和异步的问题，从而提高界面的友好型，增强用户体验。那么就结合“在添加用户时判断用户是否存在”的实例来体验一下吧。

一、HTML中input代码

<tdwidth="78%">
<inputname="userId" type="text" class="text1"id="userId"
size="10"maxlength="10" onkeypress="userIdOnKeyPress()"value="<%=userId%>" onblur="validate(this)">
<spanid="spanUserId"></span>
</td>

二、Jsp界面代码

<%@ pagelanguage="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ pageimport="com.bjpowernode.drp.sysmgr.manager.*" %>
<%
StringuserId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId) != null) {
out.println("用户代码已经存在");
}
 %>                

三、Javascript代码

（一）创建Ajax引擎对象XMLHttpRequest

    var xmlHttp;
functioncreateXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest){
xmlHttp= new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
}

（二）调用open方法与Ajax引擎建立连接，并告诉Ajax引擎我们的请求方式为get，请求url及采用异步方式

functionvalidate(field){
//alert(document.getElementById("userId").value);
//alert(field.value);
if(trim(document.getElementById("userId").value).length!= 0){
//创建Ajax核心对象XMLHttpRequest
createXMLHttpRequest();

//解决缓存方法，用毫秒
varurl="user_validate.jsp?userId=" +trim(document.getElementById("userId").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= "";
}
}

（三）告诉Ajax引擎处理完后，我们通常指定一个方法句柄，从而Ajax就会调用我们指定的方法，这样就可以得到Ajax引擎返回的数据（回调机制）。指定的方法如下：

function callback(){
//Ajax引擎状态为成功
if(xmlHttp.readyState==4){
//http协议状态为成功
if(xmlHttp.status==200){
//alert("请求成功！")
//判断如果为空，将红字span去掉
if(trim(xmlHttp.responseText) != ""){
document.getElementById("spanUserId").innerHTML= "<font color='red'>" + xmlHttp.responseText +"</font>"
}else{
document.getElementById("spanUserId").innerHTML= "";
}

}else{
alert("请求失败，错误码="+xmlHttp.status);
}

}
}

（四）最后调用send方法把我们步骤设置的参数发给Ajax引擎去处理。这里指的就是步骤二的“xmlHttp.send(null)”

四、注意

以上就是对Ajax的一个简单实现，但在这里还要注意几点：

（一）使用Ajax技术需要清除缓存，否则容易产生莫名其妙的错误，具体的方法有两种：

1.采用URL后跟上时间戳（产生随机数）来防止浏览器缓存，如：

//解决缓存方法，用毫秒

varurl="user_validate.jsp?userId=" +trim(document.getElementById("userId").value)+ "&time="+new Date().getTime();

2.加入清除缓存代码，如：

header("Cache-Control:no-cache, must-revalidate");
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");

（二）如果需要提起多个请求，需要创建多个XMLHttpRequest对象。

五、总结

通过以上的步骤大家基本上了解了Ajax实践的基本流程，那么接下来就要通过使用JS中的匿名函数来完成判断用户时候存在的代码，期待下一篇吧！