一个存AJax例子

本文介绍了一种使用AJAX进行用户代码实时验证的方法。通过JavaScript与后端交互,实现输入框失去焦点时的即时反馈,提升用户体验。具体包括创建XMLHttpRequest对象、发送请求、处理响应等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script type="text/javascript">

var xmlHttpRequest;

function createXMLHttpRequest(){
//表示当前浏览器不是IE,如Maxthon,firefox
if(window.XMLHttpRequest){
xmlHttpRequest=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validate(field){
//alert("Hello!!!");
//document.getElementById("userId").value
//alert(field.value);
if(trim(field.value).length!=0){
//创建XMLHttpRequest
createXMLHttpRequest();
var url="user_validate.jsp?userId="+trim(field.value)+"&timestamp="+new Date().getTime();
xmlHttpRequest.open("GET",url,true);
//方法地址处理完成后自动调用,回调
xmlHttpRequest.onreadystatechange=callback;
//将参数发送到Ajax引擎
xmlHttpRequest.send(null);
}else{
document.getElementById("userIdSpan").innerHTML="";
}
}
function callback(){
if(xmlHttpRequest.readyState==4){//Ajax引擎初始化成功
if(xmlHttpRequest.status==200){//HTTP协议成功
//alter(xmlHttpRequest.responseText);
document.getElementById("userIdSpan").innerHTML="<font color='red'>"+xmlHttpRequest.responseText+"</font>";
}else{
alert("请求失败,错误码="+xmlHttpRequest.status);

}
}
}

</script>

user-validate.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.drp.sysmgr.manager.*" %>
<%
//可以采用清楚缓存的方法,如下
//response.setContentType("text/xml");
//response.setHeader("Cache-Control","no-store");//HTTP1.1
//response.setHeader("Pragma","no-cache");//HTTP1.0
//response.setDateHeader("Expires",0);
String userId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId)!=null){
out.println("用户代码已经存在!!!");
}else{

out.println("");
}
%>

<tr>
<td width="22%" height="29">
<div align="right">
<font color="#FF0000">*</font>用户代码: 
</div>
</td>
<td width="78%">
<input name="userId" type="text" class="text1" id="userId"
size="10" maxlength="10" onkeypress="userIdOnKeyPress()" onblur="validate(this)"><span id="userIdSpan"></span>
</td>
</tr>
<tr>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值