JS发送Http请求——AJAX

1.AJAX的引入JS 缺乏主动发起Http请求的能力，因此需要代码片段让JS发起Http请求，我们称这样的代码片段为——AJAX（Asynchronous JAvaScript by Xml ）AJAX借助 JS 中的一个内置对象：XMLHttpRequest，可简写为xhr2.AJAX的代码片段...

SSS_cool

6764人浏览 · 2021-07-27 19:38:07

SSS_cool · 2021-07-27 19:38:07 发布

1.AJAX的引入

JS 缺乏 主动发起 Http请求 的能力，因此需要代码片段让JS发起Http请求，我们称这样的代码片段为——AJAX（Asynchronous JAvaScript by Xml ）
AJAX借助 JS 中的一个内置对象：XMLHttpRequest，可简写为xhr

2.AJAX的代码片段

在这里插入图片描述

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

<script>
    <!-- js发送http请求 利用相应的代码片段-->
    var xhr=new XMLHttpRequest(); <!-- 初始化js中的内置对象XMLHttpRequest-->
    xhr.open("post","/hhhhhhh");<!-- 提供HTTP请求的 方法和url-->
    xhr.send();<!-- 发起真正的请求-->
</script>
</body>
</html>

在上面的代码完成后，即完成了由JS构建的请求-响应，接下来需要考虑：当请求-响应完成时（对应事件为 XMLHttpRequest中的load），如何利用JS代码读取响应的数据，这里将用到事件绑定（元素、事件、函数）

前端代码：

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

<script>
    // js发送http请求 利用相应的代码片段-->
    var xhr=new XMLHttpRequest(); // 初始化js中的内置对象XMLHttpRequest-->
    //定义 事件绑定中的函数，定义在xhr实例化之后，因为函数中需要xhr
    function success() {
        console.log("完成请求-响应啦！！！！！！！") //请求响应成功后再打印
        console.log(xhr.responseText) //拿到 响应的响应体信息,响应正文
        console.log(xhr.status)       //拿到请求的响应状态码
    }
    xhr.onload=success;//当请求响应完成后，去执行success函数

    xhr.open("get","/delay");// 提供HTTP请求的 方法和url-->
    xhr.send();// 发起真正的请求-->

    console.log("ajax请求已发送")//先打印
</script>
</body>
</html>

后端代码：

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

@WebServlet("/delay")
public class DelayServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //增加延时，在输出响应
        try {
            TimeUnit.SECONDS.sleep(3);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //输出些 响应
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/plain");
        resp.getWriter().println("看这里！！！！！！！！！！！");
    }
}