AJAX基本概念

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) {               // 固定按照以下四个步骤完成               // １，建立核心对象               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);                   }               }            }