介紹

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，所以沒有貼出來。