Ajax实践之用户是否存在

前端之家收集整理的这篇文章主要介绍了Ajax实践之用户是否存在前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

基础见:http://www.jb51.cc/article/p-upybkmpv-bkg.html

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

一、HTMLinput代码

<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中的匿名函数来完成判断用户时候存在的代码,期待下一篇吧!

猜你在找的Ajax相关文章