天天看点

学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册(POST方式)

1.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面无刷新用ajax检查用户名是否已注册(POST方式)</title>
<script type="text/javascript">
    function createAJAX() {
        var ajax = null;
        try {
            ajax = new ActiveXObject("microsoft.xmlhttp");
            //alert("你的浏览器支持ajax,是IE");
        } catch (e1) {
            ajax = new XMLHttpRequest();
            //alert("你的浏览器支持ajax,是非IE");
        }
        return ajax;
    }
</script>
</head>
<body>
        <form>
                用户名(POST):<input id="username" name="username"/>
                <span id="span"></span>
        </form>
</body>

<script type="text/javascript">
    window.document.getElementById("username").onblur = function() {
        var username = this.value;
        //1.创建一部对象
        var ajax = createAJAX();
        //2.异步对象准备发送请求
        var method = "post";
        var url = "${pageContext.request.contextPath}/UserAjaxServlet?time = "
                + new Date().getTime();
        ajax.open(method, url);
        
        //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //3.AJAX异步对象真正发送请求体的数据到服务器,如果请求体无数据的话,用null表示,如果有值,用键值对
        var content = "username=" + username;
        ajax.send(content);
        //---------------------------------等待-------------------------
        //4. AJAX异步对象不断监听服务端状态的变化,只有状态码变化了,方可触发函数
        //0-1-2-3-4,这些是可以触发函数的
        //4-4-4-4-4,这些是不可以触发函数的
        //以下这个函数是服务器来触发的,不是程序员触发的,这和onclick是不一样的
        ajax.onreadystatechange = function() {
            //如果状态码为4
            if (ajax.readyState == 4) {
                //如果服务器响应为200
                if (ajax.status == 200) {
                    //5. 从AJAX异步对象中获取服务器响应的结果
                    var tip = ajax.responseText;
                    //创建img
                    var imgElement = document.createElement("img");
                    //设置标签的属性
                    imgElement.src = tip;
                    imgElement.style.width ="14px";
                    imgElement.style.height ="14px";
                    //定位span标签
                    var spanElement = document.getElementById("span");
                    //清空span里的值
                    spanElement.innerHTML = "";
                    //将img加入到span里边
                    spanElement.appendChild(imgElement);
                }
            }
        }
    }
</script>
</html>      

2.servlet代码

package com.buaa.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/UserAjaxServlet")
public class UserAjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        System.out.println("username:" + username);
        String tip = "images/MsgSent.gif";
        if ("杰克".equals(username)) {
            tip = "images/MsgError.gif";
        }
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }

}      

注意:POST提交要设置头文件