【电力项目】使用ajax引擎进行异步校验

目的：input输入框输入的值数据库中是否已经存在

事件：输入框失去焦点触发函数

//使用ajax进行异步校验，校验登录名在数据库是否存在

下面两个function 在userAdd.jsp里面

【电力项目】使用ajax引擎进行异步校验

//创建ajax引擎
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;

}

function checkLogonName(){
var logonName = document.getElementById("logonName").value;
//第一步：创建ajax引擎
var xmlHttp = createXmlHttpRequest();
//第二步：事件处理函数，实质上相当一个监听，监听服务器与客户端的连接状态
xmlHttp.onreadystatechange = function(){

// 0 open方法 send方法都没有调请求未初始化

// 1 执行open方法 send方法都没有调请求已经建立，但是还没有发送（还没有调用 send()）

// 2 open方法 send方法都调了请求已发送正在处理中（通常现在可以从响应中获取内容头）

// 3 服务器返回相应的结果请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成

// 4 连接成功响应已完成；您可以获取并使用服务器的响应了
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){

//一共两种格式的返回值 Text文本或者xml格式的文件
var data = xmlHttp.responseText;
//alert(data);
if(data==1){
alert("当前输入的登录名["+logonName+"]已被其他人占用，请重重新输入！");
document.getElementById("logonName").value = "";
document.getElementById("logonName").focus();
}
}
}
}
//第三步：与后台服务器建立一个连接如果是异步就是true

//在服务器端使用servlet处理接收到的数据

//checkLogonName 是web.xml里面配置的<url-pattern>/checkLogonName </url-pattern> 这里配置的是servlet的访问路径

【电力项目】使用ajax引擎进行异步校验
xmlHttp.open("post","../../checkLogonName",true);

// ../../checkLogonName 这个相当于当前目录的上两级目录

【电力项目】使用ajax引擎进行异步校验

因为是post请求,执行CheckLogonName.java里面的doPost方法

【电力项目】使用ajax引擎进行异步校验

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String logonName = request.getParameter("logonName");
/**
* checkflag：判断当前登录名在数据库中是否存在的标识
* checkflag=1：如果值为1，说明当前登录名在数据库中有重复记录，则不能进行保存
* checkflag=2：如果值为2，说明当前登录名在数据库中没有重复值，可以进行保存
*/
String checkflag = elecUserService.checkLogonName(logonName);
out.print(checkflag);
out.flush();
out.close();
}

注意点：这里的out对象是从web容器中获取到的，而不是你新创建的，web容器加载servlet的时候已经为您创建好了out对象，你只要获取到然后使用就可以了！

out.print(checkflag);是发送响应内容至页面var data = xmlHttp.responseText; 这行代码就是接收

//加头符合一定的编码格式就像表单提交都有编码格式一样头一定要设置在open方法的后面，不加头 send方法的参数传不过去

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第四步：发送请求的参数多个参数在 logonName后面加&
xmlHttp.send("logonName="+logonName);
}

【电力项目】使用ajax引擎进行异步校验

相关推荐