AJAX简单介绍

 AJAX简单介绍

顺便参考了：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。

下面是 Ajax 应用程序所用到的基本技术：

• HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
• JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
• DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
• 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

 

1、触发事件

<table width="95%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="22%" height="29">
                            <div align="right">
                                <font color="#FF0000">*</font>用户代码:&nbsp;
                            </div>
                        </td>
                        <td width="78%">
                            <input name="userId" type="text" class="text1" id="userId"
                                size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)"><span id="userIdSpan"></span>
                        </td>
                    </tr>
</table>

使用脚本处理事件:提交给jsp处理，如下：

<script>
    var xmlHttp;
    function createXMLHttpRequest() {
        //表示当前浏览器不是ie,如ns,firefox
        if(window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    function validate(field) {
        if (trim(field.value).length != 0) {
            //创建XMLHttpRequest
            createXMLHttpRequest();
            var url = "user_validate.jsp?userId=" + trim(field.value) + "&timestamp=" + new Date().getTime();
            xmlHttp.open("GET", url, true);
            //方法地址，处理完成后自动调用，回调
            xmlHttp.onreadystatechange=function() { //匿名函数
                if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
                    if (xmlHttp.status == 200) { //http协议成功
                        document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
                    }else {
                        alert("请求失败，错误码=" + xmlHttp.status);
                    }
                }
            };
            //将参数发送到Ajax引擎
            xmlHttp.send(null);
        }else {
            document.getElementById("userIdSpan").innerHTML = "";
        }
    }
</script>

 user_validate.jsp

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ page import="com.company.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);

    //out.println("Hello");
    //Thread.currentThread().sleep(3000);
    String userId = request.getParameter("userId");
    if (UserManager.getInstance().findUserById(userId) != null) {
        out.println("用户代码已经存在");
    }
%>

 使用脚本处理事件:提交给servlet处理（<%=basePath%>servlet/ClientIdValidateServlet），如下：

function validateClientId(field) {
            if (trim(field.value).length != 0) {
                //创建XMLHttpRequest
                createXMLHttpRequest();
                var url = "<%=basePath%>servlet/ClientIdValidateServlet?clientId=" + trim(field.value) + "&timestamp=" + new Date().getTime();
                xmlHttp.open("GET", url, true);
                //方法地址，处理完成后自动调用，回调
                xmlHttp.onreadystatechange=function() { //匿名函数
                    if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
                        if (xmlHttp.status == 200) { //http协议成功
                            if (trim(xmlHttp.responseText) != "") {
                                document.getElementById("clientIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
                            }else {
                                document.getElementById("clientIdSpan").innerHTML = "";
                            }