JSP---网上商城->使用Ajax技术验证用户名是否已存在

js代码:

<script language="javascript">
    var req;
    function createReq() {
        if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    function Validate() {
        createReq();
        var id = document.getElementById("cid");
        var url = "Validate.jsp?id=" + escape(id.value);
        req.open("Get", url, true);
        req.onreadystatechange = callback;
        req.send();
    }

    function callback() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                var msg = document.getElementById("msg");
                msg.innerHTML = req.responseText;
            }
        }
    }
</script>

 用户注册的jsp页面关键html代码

<!-- 输入用户名的文本框 -->
<input type="text" id="cid" name="name" onBlur="Validate()" />
<!-- 显示信息span -->
<span id="msg" style="color: red;"></span>

后台处理的异步请求的代码（Validate.jsp）

<%
        String id = request.getParameter("id");
        if (id != null) {
            if (CustomerMgr.getInstance().existName(id)) {
                out.write("该用户名已存在!");
            } else {
                out.write("恭喜你,访用户名可以使用!");
            }

        }
%>

 体会：当用户名文本框失出焦点（onblur事件）时,由js创建一个异步请求对象向服务器发出一个请求并传入用户名参数,如果服务器准备就绪,接收请求并处理,并将响应的信息传回客户端．