原生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：请求已完成，且响应已就绪