Ajax实践之用户是否存在
|
关于Ajax在之前的学习中，已经对它的基础知识有了初步的了解，只是欠实践。那么接下来就让实践来检验一下真理吧！ 基础见：http://www.52php.cn/article/p-upybkmpv-bkg.html 那么先回想一下，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中的匿名函数来完成判断用户时候存在的代码，期待下一篇吧！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |