Ajax-概述、XMLHttpRequest对象、AJAX GET请求、AJAX POST请求

magic 245

于 2025-06-14 20:41:11 发布

阅读量932

点赞数 38

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73941339/article/details/148133929

Ajax 专栏收录该内容

1 篇文章

订阅专栏

一、传统请求及缺点

1.传统的请求都有哪些？

- 直接在浏览器地址栏上输入URL。
- 点击超链接
- 提交form表单
- 使用JS代码发送请求

- window.open(url)
- document.location.href = url
- window.location.href = url
- ....

演示传统请求，以及传统请求的缺点

index.html

OldRequestServlet.java

@WebServlet("/request")
public class OldRequestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //响应信息到游览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print("<h1>欢迎学习AJAX...</h1>");

    }
}

运行结果：演示4种传统的请求

1.自己在游览器手敲地址

2.超链接

3.form表单提交

4.js代码

2.传统请求存在的问题

- 页面全部刷新导致了用户的体验较差。
- 传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）

ajax同步请求

二、AJAX（Asynchronous Javascript And Xml）概述

- AJAX不能称为一种技术，它是多种技术的综合产物。
- AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。

1.什么是异步，什么是同步？

- 假设有t1和t2线程，t1和t2线程并发，就是异步。
- 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。

需要等的，一个个来的是同步，一起执行的是异步

- AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。
- AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
- AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
- AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
- AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。

ajax异步请求

对ajax异步请求的理解

三、XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。
XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。
创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1.XMLHttpRequest对象的方法

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

2.XMLHttpRequest对象的属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

⑴.先了解一下onreadystatechange和readyState

ajax1.html

一个纯前端页面，打开服务器后，游览器输入http://localhost:8080/ajax/ajax1.html

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

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("helloBtn").onclick = function (){
            // 发送ajax get请求
            //console.log("发送ajax get请求")
            // 1.第一步：创建AJAX核心对象XMLHttpRequest
            var xhr = new XMLHttpRequest();
            // 2.第二步：注册回调函数
            // 这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
            xhr.onreadystatechange = function (){
                // 这里的回调函数会被调用多次。
                // 0 -> 1 被调用一次
                // 1 -> 2 被调用一次
                // 2 -> 3 被调用一次
                // 3 -> 4 被调用一次
                console.log(xhr.readyState)

                // 当XMLHttpRequest对象的readyState的状态是4的时候，表示响应结束了。
            }
            // 3.第三步：开启通道（open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
            // XMLHttpRequest对象的open方法
            // open(method, url, async, user, psw)
            // method: 请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
            // url：请求的路径
            // async: 只能是true或者false，true表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。（大部分请求都是true，要求异步。极少数情况需要同步，以后再说。）
            // user：用户名 pwd: 密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。需不需要用户名和密码，主要看服务器的态度。
            xhr.open("GET", "/ajax/ajaxrequest1", true)
            // 4.第四步：发送请求
            xhr.send()
        }
    }
</script>

<!--给一个按钮，用户点击这个按钮的时候发送ajax请求-->
<input type="button" value="hello ajax" id="helloBtn">

<!--给一个div图层，ajax接收了响应的数据之后，在div中进行渲染。-->
<div id="mydiv"></div>

</body>
</html>

在使用 XMLHttpRequest 时，readyState 属性表示请求的状态，每次其值发生变化时，onreadystatechange 回调函数会被触发。具体状态变化如下：

readyState = 1：调用 xhr.open() 后，浏览器与服务器建立连接，状态从 0 变为 1，触发回调，打印 1。
readyState = 2：服务器返回响应头，状态从 1 变为 2，再次触发回调，打印 2。
readyState = 3：服务器开始返回响应体（数据未完全接收），状态从 2 变为 3，触发回调，打印 3。
readyState = 4：响应完全接收，状态从 3 变为 4，最后一次触发回调，打印 4。

⑵.编写处理前端请求的后端代码，前端代码补充响应的代码

前端代码补充响应的代码

ajax1.html

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

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("helloBtn").onclick = function (){
            // 发送ajax get请求
            //console.log("发送ajax get请求")
            // 1.第一步：创建AJAX核心对象XMLHttpRequest
            var xhr = new XMLHttpRequest();
            // 2.第二步：注册回调函数
            // 这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    // 响应结束了。
                    //console.log("响应结束了")
                    // 响应结束之后，一般会有一个HTTP的状态码。
                    // HTTP状态码常见的包括：200表示成功了，404表示资源找不到，500表示服务器内部错误。
                    // HTTP状态码是HTTP协议的一部分，HTTP协议中规定的。服务器响应之后都会有一个状态码。
                    // 获取HTTP状态码
                    //console.log("HTTP响应状态码：" + this.status)
                    if (this.status == 404) {
                        alert("对不起，您访问的资源不存在，请检查请求路径")
                    } else if(this.status == 500){
                        alert("对不起，服务器发生了严重的内部错误，请联系管理员")
                    } else if(this.status == 200){
                        //alert("响应成功，完美")
                        // 200表示完全响应完毕，成功结束了。
                        // 通过XMLHttpRequest对象获取响应的信息。
                        // 通过XMLHttpRequest对象的responseText属性来获取响应的信息。
                        //alert(this.responseText)

                        // 把响应信息放到div图层当中，渲染
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }

                }
            }
            // 3.第三步：开启通道（open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
            // XMLHttpRequest对象的open方法
            // open(method, url, async, user, psw)
            // method: 请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
            // url：请求的路径
            // async: 只能是true或者false，true表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。（大部分请求都是true，要求异步。极少数情况需要同步，以后再说。）
            // user：用户名 pwd: 密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。需不需要用户名和密码，主要看服务器的态度。
            xhr.open("GET", "/ajax/ajaxrequest1", true)
            // 4.第四步：发送请求
            xhr.send()
        }
    }
</script>

<!--给一个按钮，用户点击这个按钮的时候发送ajax请求-->
<input type="button" value="hello ajax" id="helloBtn">

<!--给一个div图层，ajax接收了响应的数据之后，在div中进行渲染。-->
<div id="mydiv"></div>

</body>
</html>

AjaxRequest1Servlet.java

@WebServlet("/ajaxrequest1")
public class AjaxRequest1Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {


        // Servlet向浏览器响应一段数据
        PrintWriter out = response.getWriter();

        // out对象向浏览器输出信息
        // 服务器的代码实际上和以前的代码还是完全一样的。
        // 只不过这个out在响应的时候，浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。
        out.print("<font color='red'>welcome to study ajax!!!!</font>");
    }
}

运行结果：

点击按钮：

四、AJAX GET请求

通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来：普通文本、XML、JSON、HTML...）

发送AJAX get请求，前端代码：ajax2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
                        // 并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来：普通文本、XML、JSON、HTML...）
                        document.getElementById("mydiv").innerHTML = this.responseText
                       
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求
            xhr.send()
        }
    }
</script>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div>
</body>
</html>

发送AJAX get请求，后端代码：AjaxRequest2Servlet.java

@WebServlet("/ajaxrequest2")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的内容类型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 获取响应流
        PrintWriter out = response.getWriter();
        // 响应
        out.print("<font color='red'>用户名已存在！！！</font>");


    }
}

运行结果：在游览器敲http://localhost:8080/ajax/ajax2.html

点击按钮

1.AJAX get请求如何提交数据呢？

AJAX get请求如何提交数据

- get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value&name=value....

- 其实这个get请求提交数据的格式是HTTP协议中规定的，遵循协议即可。

对ajax2.html做出修改

运行结果：

2.AJAX GET请求的缓存问题

- 对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。

什么是AJAX GET请求缓存问题呢？

- 在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
- 发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。

- POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存。

- GET请求缓存的优缺点：

- 优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
- 缺点：无法实时获取最新的服务器资源。

- 浏览器什么时候会走缓存？

- 第一：是一个GET请求
- 第二：请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。

如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢？

可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
- 可以采用时间戳："url?t=" + new Date().getTime()
- 或者可以通过随机数："url?t=" + Math.random()
- 也可以随机数+时间戳....

运行结果：

五、AJAX POST请求

AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。

前端代码：ajax4.html

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

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("mybtn").onclick = function () {
            // 发送AJAX POST请求
            // 1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            // 2. 注册回调函数
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 3. 开启通道
            xhr.open("POST", "/ajax/ajaxrequest3", true)

            // 4. 发送请求
            // 怎么模拟AJAX提交form表单呢？设置请求头的内容类型(这行代码非常关键，是模拟form表单提交的关键代码。)
            // 设置请求头的内容类型时，必须在open之后。
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

            // 放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据。
            // 使用JS代码获取用户填写的用户名和密码
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            //xhr.send("注意格式：放在这里的数据就是在请求体当中提交的，格式不能随便来，还是需要遵循HTTP的协议：name=value&name=value&name=value")
            xhr.send("username="+username+"&password="+password)
        }
    }
</script>

用户名<input type="text" id="username"><br>
密码<input type="password" id="password"><br>

<button id="mybtn">发送AJAX POST请求</button>

<div id="mydiv"></div>

</body>
</html>

后端代码：AjaxRequest3Servlet.java

@WebServlet("/ajaxrequest3")
public class AjaxRequest3Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //out.print("<font color='red'>用户名已存在！！！</font>");

        // 获取提交数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        out.print("用户名是：" + username + "，密码是：" + password);
    }
}

运行结果：