原生Ajax基本原理

button的點擊事件：
function login() {
//使用ajax往servlet發送數據
//1.獲取表單數據
var username = document.getElementById(‘username’).value;
var password = document.getElementById(‘password’).value;

        //2.拼接表單數據
        var params = 'username=' + username + '&password=' + password;
        console.log(params);

        //3.url
        var url = '${pageContext.request.contextPath}/login?' + params;
        console.log(url);

        //4.使用ajax發送get請求
        //4.1創建一個請求對象
        var request = new XMLHttpRequest();

        //4.2調用get請求的方法
        // 調用open方法的時候，都用異步，true
        request.open('get', url, true);
        request.send(); //把?後面的數據傳入到後臺 send(str)裏面也可以傳參數
        // 如：send("user=tom");      

        //4.3接收服務器的響應
        request.onreadystatechange = function () {
            console.log('準備狀態碼-' + request.readyState + ' :響應狀態碼-' + request.status);
            if (request.readyState == 4 && request.status==200) {
                //接收服務器響應的數據
                var resp =request.responseText;
                console.log(resp);
            }
        };

    }

form表單：

用戶名：<input type="text" name="username" id="username"><br>
密碼：<input type="password" name="password" id="password"><br>
<input type="button" value="提交" onclick="login()"><br>

服務器處理數據：
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter(“username”);
String password = req.getParameter(“password”);

    System.out.println(username + " true " + password);

    if ("hsc".equalsIgnoreCase(username) && "123".equalsIgnoreCase(password)) {
        resp.getWriter().write("success");
    } else {
        resp.getWriter().write("failure");
    }
}

結果：
狀態碼說明：
request.readyState:
0:請求未初始化
1：服務器連接已建立
2：請求已接收
3：請求處理中
4：請求已完成，且響應已就緒