AJAX:异步的JavaScript和XML,主要处理的是页面上不想跳转,但想查询数据库的功能。
AJAX所有的代码操作全部使用JavaScript完成,其核心的操作对象是XMLHttpRequest,该对象是浏览器提供好的对象,如果浏览器没有提供,需要单独安装ActiveX插件。
AJAX还会有一些框架支持:JQuery,DOJO,ExtJS
这里使用传统的AJAX功能,实现基本的用户验证操作。
编写一个要验证的文本框
<center> <form action=""> 用户名: <input type="text" name="userid" id="userid" onkeyup="checkUserid(this.value);" /> <span id="useridMessage></span> <br> </form> </center> |
完成js的调用部分
<script type="text/javascript"> var xmlHttp ;
function createXMLHttp() { if (window.XMLHttpRequest != null) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject("microsoft.xmlhttp"); } }
function checkUserid(userid) { // 固定按照以下四个步骤完成 // 1,建立核心对象 createXMLHttp(); // 2、设置提交路径 xmlHttp.open("post","<%=basePath%>user_checkId.action?userid=" + userid); // 3、设置回调函数 xmlHttp.onreadystatechange = checkUseridCallback; // 4、提交 xmlHttp.send(); }
function checkUseridCallback() {
} </script> |
建立Action,进行验证。
public class UserAction extends ActionSupport {
private String userid;
public String checkId() throws Exception { // 取得out对象 HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = response.getWriter();
// 根据userid判断是否重复,理论上应该调用数据库,这里直接比较 if ("zhangsan".equals(userid)) { out.print(true); } else { out.print(false); }
out.close();
// 不要跳转 return null; }
|
<package name="root" namespace="/" extends="struts-default"> <action name="user_*" method="{1}" class="org.liky.action.UserAction"></action> </package> |
编写回调函数
function checkUseridCallback() { // 根据readyState的状态值来决定什么时候接收参数,该值会在 1 - 4之间变化 // 1: 设置了提交路径 // 2: 进入了Action // 3: 开始返回数据 // 4: 返回结束 if (xmlHttp.readyState == 4) { // 还要判断是否出现错误 if (xmlHttp.status == 200) { // 接收返回结果 var result = xmlHttp.responseText; if (result == "true") { document.getElementById("useridMessage").innerHTML = "<font color='red'>用户名重复,请重新输入!</font>" ; } else { document.getElementById("useridMessage").innerHTML = "<font color='green'>用户名可以使用!</font>" ; } } else { alert("执行过程中出现错误,请与管理员联系,错误代码:" + xmlHttp.status); } } } |