使用JavaScript编写原生态的Ajax

介绍

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

内容

jsp表单

<form action="" method="post" onsubmit="return checkDB()">    name:<input id="name" name="name" type="text">    <br/>    password:<input id="pass" name="pass" type="text">    <br/>    <br/>    <input type="submit" onclick="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，所以没有贴出来。