Ajax实例

一、功能：当用户注册输入用户名密码时，若用户输入用户名存在时给予 提示，而不用都填完提交后发现用户名已存在，又得全部重填，提高用户体验。
先写个table,代码如下：

<table>
        <tr>
            <th>用户注册</th>
        </tr>
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="userName" name="userName" onblur="chaeckUserName"/>
                        &nbsp;&nbsp;<font id="tip"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" id="passWord" name="passWord" /></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" id="passWord2" name="passWord2" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="注册" /></td>
            <td><input type="button" value="重置" /></td>
        </tr>
    </table>

（红色代码代表了当输入框失去焦点时调用的脚本）

写个javas cript：

<script type="text/javascript">
	function checkUserName() {
		var userName = document.getElementById("userName").value;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		} else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				var resJson = eval("(" + xmlHttp.responseText + ")");//转成Json
				if (resJson.exist) {
					document.getElementById("tip").innerHTML = 
                                                 "<img src='http://linyizhou8.blog.163.com/blog/no.png'/>&nbsp;该用户名已经被注册";
				} else {
					document.getElementById("tip").innerHTML = 
                                                 "<img src='http://linyizhou8.blog.163.com/blog/ok.png'/>&nbsp;该用户名可用";
				}
			}
		}
		xmlHttp.open("get", "dealAjaxRequest?action=register&userName="
				+ userName, true);
		xmlHttp.send();
	}
</script>

最后写一个servlet处理提交到服务器的用户名，关键代码如下：

    
   protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}   
       protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String action = request.getParameter("action");
        if ("register".equals(action)) {
            checkUserName(request, response);
        }
    }
    private void checkUserName(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String userName = request.getParameter("userName");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        // 接下来正常是到数据库查询，这里为了简单写一个用户名数组
        ArrayList<String> nameArray = new ArrayList<String>();
        nameArray.add("zhangsan");
        nameArray.add("wangwu");
        nameArray.add("lisi");
        nameArray.add("sunwukong");
        nameArray.add("zhubajie");    
        JSONObject resJson=new JSONObject();
        if (nameArray.contains(userName)) {
            resJson.put("exist", true);
            out.println(resJson);
        } else {
            resJson.put("exist", false);
            out.println(resJson);
        }
        out.flush();
        out.close();
    }

最后来张结果图，当焦点离开用户名输入框时自动提示：