Javaweb基础知识复习------AJAX

AJAX相关知识复习

简而言之，就是可以用AJAX+HTML代替JSP页面，也可以进行异步交互，更新部分界面

Ajax案例

后端代码就是一个servlet文件，前端页面的代码也不是很常用，可以在下面这个网址这里找到相关代码：https://www.w3school.com.cn/js/js_ajax_intro.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //发送请求
    xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet");
    xhttp.send();
    //获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                alert(this.responseText);
        }
    };

</script>

</body>
</html>

相关的创建核心对象、发送请求、获取响应的代码操作在上述网址中均能找到！

AJAX案例------验证用户是否存在

后端代码：

//selectUserServlet.java
package org.example.web.Ajax;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class selectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username=req.getParameter("username");

        boolean flag=true;

        resp.getWriter().write(""+flag);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

<!--register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
</head>
<body>
<center>
    <tr>
        已有账号？<a href="index.jsp">登录</a>
    </tr>
    <form action="registerServlet" method="post">
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
            <br>
            <div id="errorUsername">${register_msg}</div>
        </tr>
        <p>
            <tr>
                <td>密码：</td>
                <td><input type="text" name="password" placeholder="请输入密码"></td>
            </tr>
        <p>
            <tr>
                <td>验证码：</td>
                <td>
                    <input name="checkCode" id="checkCode" type="text">
                </td>
                <td><img src="checkServlet" id="checkCodeImg"></td>
                <td><a href="#" id="changeImg">看不清？</a></td>
            </tr>
        <p>
            <tr>
                <button type="submit" value="提交">提交</button>
            </tr>
    </form>
    <script>
        document.getElementById("changImg").onclick=function(){
            document.getElementById("checkCodeImg").src="/ttCookieLogin/checkServlet?"+new Date().getMilliseconds();
        }
    </script>
</center>

<script>
    //点击事件
    document.getElementById("username").onblur=function(){
        var username=this.value;

        //创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //发送请求
        xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet?username="+username);
        xhttp.send();
        //获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                //判断
                if(this.responseText=="true"){
                    document.getElementById("errorUsername").style.display='';
                }else{
                    document.getElementById("errorUsername").style.display='none';
                }
            }
        };
    }
</script>
</body>
</html>

核心代码在此：