理解Ajax：异步JavaScript与XML交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45970271/article/details/120767082

本文介绍了Ajax在客户端与浏览器交互中的作用，它允许无刷新更新页面，提高用户体验。Ajax即异步JavaScript和XML，通过XMLHttpRequest对象与服务器进行数据交换。文章详细讲解了如何创建XMLHttpRequest对象，其open()、send()、setRequestHeader()等方法的使用，以及get和post请求的区别。Ajax的核心在于实现异步交互，避免打断用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端与浏览器的交互方式

客户端与浏览器的交互方式1：同步交互方式

例如：超链接，表单请求服务器端程序，向客户端做出响应，响应的内容会覆盖原来的页面内容。会打断客户端的正常操作，不友好

客户端与浏览器的交互方式：异步交互方式（ajax）
就是当客户端与服务器交互时，服务器向客户度响应内容，不影响客户端的正常操作。

实现方式：就要借助浏览器、JavaScript 。

整个过程页面不刷新，只需要更新网页的局部内容，不打断客户端的正常操作。

什么是Ajax

Ajax 全称为：“Asynchronous JavaScript and XML” 就是（异步 JavaScript 和 XML）

使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

Ajax的其本质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，然后服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

创建XMLHttpRequest对象

◆ XMLHttpRequest对象就是发送请求到服务器并获得返回结果

◆ 现代所有浏览器都有内建了 XMLHttpRequest 对象，通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

new XMLHttpRequest()

XMLHttpRequest()中常用的方法

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的功能。

◆ open(method,URL,async)
建立与服务器的连接；
method参数指定请求的HTTP方法，典型的值是get 或post；
URL参数指定请求的地址
async参数指定是否使用异步请求，其值为true或 false

◆ send(content)
发送请求;
content参数是指定请求的参数

◆ setRequestHeader(header,value)
设置请求的头信息

XMLHttpRequest()中常用的属性

◆ onreadystatechange： 事件（就是某种条件满足的时候，事件就会触发），指定回调函数
◆ readystate: XMLHttpRequest的状态信息（这是一个对象内部的状态码）

状态就绪码	说明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

因为状态码的执行，在直接执行onreadystatechange会陪调用3次（2、3、4），所以我们就要在前端设置对应的状态码为4（读取完毕响应一个4）。

◆ status： HTTP的状态码。（这是一个服务器响应回来的状态码）

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

◆ **responseText：**获得响应的文本内容

因为以服务器之间的响应就是以字符串的形式进行响应，所以前端拿到的都是字符串
就要通过一个属性来将字符串转换为需要的代码属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个web程序</title>
    <script type="text/javascript">
        function subform() {
            //subform获得account和password打印进去的数据
            var account = document.getElementById("accountId").value;
            var password = document.getElementById("passwordId").value;

            //使用XMLHttpRequest对象发起异步请求
            var xmlHttpRequest = new XMLHttpRequest();
            //建立与服务器的连接
            xmlHttpRequest.open("post", "demourl", true);
            //设置请求的头信息
            xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置提交数据的格式的请求头
            //发送请求
            xmlHttpRequest.send("account=" + account + "&password=" + password);

            // 接收服务器端响应后来的数据，当发送请求之后，就会触发nreadystatechange
            // 的这个事件，在此事件的回调函数中，获取响应的内容
            xmlHttpRequest.onreadystatechange = function () {
                //当对象就绪状态为为4，http响应状态码为200时获取响应内容
                //如果不写就绪状态的话，就会获取readystate中的2,3,4依次执行一遍
                //http响应就绪码，是为了确保这个响应过来的码是正确的就才能执行
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    //后端向前端回复一个状态码，前端根据状态码分别输出对应的
                    if (xmlHttpRequest.responseText == 0) {
                        alert("操作成功html");
                        location.replace("success.html");//然后跳转页面来进行
                    } else {
                        alert("服务器忙html")
                    }
                }

            }
        }
    </script>

</head>
<body>
<!--前段传输的数据一定都是键=值&键=值-->
<form><!-- enctype="application/x-www-form-urlencoded"-->
    账号:<input type="text" name="account" id="accountId"><br/>
    密码:<input type="password" name="password" id="passwordId"><br/>
    <input type="button" value="保存" onclick="subform()">
</form>
</body>
</html>

package com.student.firstweb.servlet;

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

public class Demo1Servlet extends HttpServlet {
//doPost()处理post请求
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //应为不支持中文，所以就要设置中文编码

        PrintWriter writer = null;
        try{
            req.setCharacterEncoding("utf-8");//设置post请求数据的解码格式
            System.out.println(req.getParameter("account"));
            System.out.println(req.getParameter("password"));

            //响应
            resp.setContentType("text/html;charset=utf-8");//设置响应内容的编码格式
            writer = resp.getWriter();//获得打印字符流
            writer.println(0);
            // 因为是XMLHttpRequest这个对象发的
            // 所以也是响应返回给了浏览器中的XMLHttpRequest对象
            // 就是变了一个提交方式
        }catch (Exception e){
            e.printStackTrace();
            writer.println(1);
        }
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>demo</servlet-name>
        <servlet-class>com.student.firstweb.servlet.Demo1Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>demo</servlet-name>
        <url-pattern>/demourl</url-pattern>
        <!--前端点击的连接就是与这个做连接相对应-->
    </servlet-mapping>
</web-app>

代码可以直接运行，复制到编译器具体操作。

get和post方式请求的区别

◆ Get方式提交：
xmlhttp.open(“GET”,“testServlet?name=”+userName,true);
xmlhttp.send(null);

◆ Post方式提交
xmlhttp.open(“POST”,“testServlet”,true);
POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader(“Content-Type”,“application/x- www-form-urlencoded”);
POST方式发送数据 xmlhttp.send(“name=”+userName);