AJAX笔记（get请求的相关操作）

JayChouCODE

已于 2022-08-29 20:51:43 修改

阅读量387

点赞数 1

分类专栏：笔记文章标签： ajax servlet javascript

于 2022-08-28 22:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_54001215/article/details/126575839

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏



什么是同步和异步
1. 同步：假如在两个线程中，一个线程的执行需要等另一个线程执行结束才能开启（即需要排队），这叫同步
1. 异步：与同步相反，线程的执行不需要等待，各自执行不会相互影响（无需排队），这叫异步
Ajax请求的特点
采用异步的方式，发送和接收请求，每次发送Ajax请求，页面不会全部刷新
服务器响应Ajax请求的内容有三种：
可能是普通文本，可能是XML字符串，可能是JSON字符串
Ajax的核心对象XmlHttpRequest对象中的readystate属性记录XmlHttpRequest对象在请求发送和接收过程中的状态
0：请求未初始化
1：服务器连接建立
2：请求已收到
3：请求正在处理
4：请求已经响应且准备就绪
第一个Ajax GET请求步骤
1.获取XMLHttpRequest对象。
2.通过该对象开启事件onreadystatechange（该事件为XMLHttpRequest对象
的一个属性）。
在这事件中当readystate为4即请求响应成功且准备就绪，且状态码值为200时，可以获取服务器（后端程序）发送过来的数据了。
3.（注意：这里后端响应的信息会被XMLHttpRequest对象接收，通过该对象的responseText（）方法就能获取）；
4.通过该对象开启通道open(method, url, 是否异步)。
5.发送请求send（）。
Ajax
GET请求获取提交数据，在javascript程序中依旧可以通过获取标签的value值来获取，并输入到ajax的url地址中，在后端servlet程序中，依旧是通过请求request.getparameter()方法来获取。

前端代码

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>ajax 测试</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        document.getElementById("btn").onclick = function (){
            // alert("hello ajax");
            var xr = new XMLHttpRequest();

            xr.onreadystatechange = function (){
                if(xr.readyState == 4){
                    if(xr.status ==200){
                        // alert("响应成功！")
                        document.getElementById("msg").innerHTML = this.responseText;
                    }
                }
            }
             var username = document.getElementById("username").value;
             var password = document.getElementById("password").value;
            xr.open("GET","/ajax/ajaxTest1?username="+username+"&password="+password,true);
            xr.send();
        }
    }
</script>
<input type="button" value="hello ajax" id="btn">
<div id="msg"></div>
</body>
</html>

后端servlet

@WebServlet("/ajaxTest1")
public class ajaxTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("html/text;charset=utf-8");
        PrintWriter out = resp.getWriter();
//        out.println("<font color=red>hello ajax!!!! </font>");

        String username = req.getParameter("username");
        String password = req.getParameter("password");
        out.println("username="+username+",password="+password);
    }
}