使用JavaScript编写原生态的Ajax

介绍

Ajax的底层是如何实现，这里只研究了post和get的实现方式。这里的代码比较简单，主要是编写JavaScript模仿Ajax异步实现请求数据，加深对Ajax的理解，有需要的会注释上。欢迎一起交流。:-)

内容

jsp表单

<form action="" method="post" οnsubmit="return checkDB()">
    name:<input id="name" name="name" type="text">
    <br/>
    password:<input id="pass" name="pass" type="text">
    <br/>
    <br/>
    <input type="submit" οnclick="check()" value="submit">
    <br/>
    <p style="visibility: hidden" id="putError">用户名或密码错误</p>
    <br/>
</form>

解释函数的作用：check()检查用户名或密码是否为空（即是否未输入数据），checkDB()通过JavaScript原生态Ajax和后端进行校验，用户名和密码是否正确。

JavaScript实现

<script type="text/javascript">
    var Ajax={
        get:function (url,fun) {
            var obj = new XMLHttpRequest();
            obj.open('GET', url, true);
            obj.onreadystatechange = function () {
                if(obj.status==200 && obj.readyState==4) {
                    fun.call(this, obj.responseText)
                }
            };
            obj.send(null);
        },
        post : function (url,data,fun) {
            var obj = new XMLHttpRequest();
            obj.open('POST', url, true);
            obj.onreadystatechange = function() {
                if(obj.status==200 || obj.readyState==4) {
                    fun.call(this, obj.responseText)
                }
            };
            obj.send(data);
        }
    };
</script>
<script type="text/javascript">
    function check() {
            var name = document.getElementById("name").value;
            var pass = document.getElementById("pass").value;
            alert(name);
            if(name == ""|| name==null || pass==null || pass == ""){
                alert("用户名或密码没有输入！");
                return false;
            }
    }
    

    function checkDB(){
        var name = document.getElementById("name").value;
        var pass = document.getElementById("pass").value;
        var data = {"name": name, "pass": pass};
        Ajax.post('demo',data,putError);
    }
    function putError(data) {
        if(data=="error"){
            document.getElementById("putError").style.visibility = "visible";
            return false;
        }
    }
</script>

请求的demo会被MyServlet类拦截。这里var  Ajax定义为一个数组，这个数组是一个键值对，键是get post 而值是一个函数，这个函数先一步，对数据进行校验。

Servlet实现

public class MyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        User user = new User("xiaoming", "666");
        String name = request.getParameter("name");
        String pass = request.getParameter("pass");
        if (user.getName().equals(name) && user.getPass().equals(pass)){
            response.getWriter().write("succ");
        }
        else{
            response.getWriter().write("error");
        }
    }
}

上面的Servlet没有使用到doGet，所以没有贴出来。