Ajax的学习-ajax-CSS教程网

Ajax的学习

AJAX的学习

什么是AJAX

AJAX （Asynchronous JavaScript and XML）= 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：微博、淘宝、知乎等。

AJAX的工作原理

事件触发（如点击按钮或页面加载）。
AJAX 请求：通过 JavaScript 创建一个 XMLHttpRequest 对象，向服务器发送请求。
服务器处理请求：服务器（通常使用 PHP、Node.js 等）接收请求，处理并返回响应数据（JSON、XML、HTML等）。
AJAX 响应处理：浏览器接收响应，使用 JavaScript 在页面上更新内容，而无需重新加载整个页面。

同步与异步

同步（async: false）

当通过 AJAX 发送同步请求后，浏览器必须等待服务器返回响应结果，才能继续执行后续的 JS 代码、响应用户点击等其他操作。这个过程中页面会处于 “冻结” 状态，属于

阻塞式执行

，就像在餐厅点餐时，必须等上一道菜吃完才能点下一道。
异步（async: true）

这是 AJAX 的默认模式。发送请求后，浏览器无需等待服务器响应，可立即执行后续代码，同时正常响应用户的其他操作（如点击按钮、输入文字）。服务器处理完请求后，会通过回调函数等方式通知客户端处理结果，属于

非阻塞式执行

。好比点餐时，点完一道菜后不用等它上桌，还能接着点其他菜，菜做好后服务员会主动端过来。

同步请求

异步请求

最简单的AJAX实例

依赖：

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>3.5.7</version>
  <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
  </dependency>
  <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
  </dependency>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
  </dependency>
</dependencies>

创建文件：

Main.java

package ***.hehebo.ajax;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Main {
    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
        System.out.println("http://localhost:8080/index.html");
    }
}

AjaxController.java

package ***.hehebo.ajax.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/ajax") // 接口统一前缀
@CrossOrigin // 允许跨域（前端和后端端口不同时需开启）
public class AjaxController {
    @GetMapping("/HelloAjax")
    public String helloAjax() {
        return "Hello Ajax";
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<!-- HTML文档根标签，lang="en"表示页面语言为英文（可改为zh-***适配中文） -->
<head>
    <meta charset="UTF-8">
    <!-- meta标签：指定文档字符编码为UTF-8（支持中文等多语言，避免乱码） -->
    <title>Title</title>
    <!-- 页面标题：显示在浏览器标签栏 -->
</head>
<body>
<!-- 按钮元素：点击时触发getMessage()函数（核心交互入口） -->
<button onclick="getMessage()">
    测试无参数请求
</button>

<!-- 输入框元素：用于展示后端接口返回的结果 -->
<!-- id="search-input"：给输入框设置唯一标识，方便JS通过ID获取该元素 -->
<input type="text" id="search-input">

<!-- JavaScript脚本：实现原生AJAX请求逻辑 -->
<script>

    /**
     * 核心函数：点击按钮后执行，发起AJAX请求并处理响应
     * 功能：调用后端无参数GET接口，将返回结果显示到input输入框中
     */
    function getMessage(){
        // 1. 创建XMLHttpRequest实例（原生AJAX的核心对象，用于发送异步请求）
        // XMLHttpRequest是浏览器内置API，专门处理客户端与服务器的异步通信
        var request = new XMLHttpRequest();

        // 2. 配置请求状态变化的回调函数（关键：监听请求的整个生命周期）
        // onreadystatechange：当XMLHttpRequest的readyState（请求状态）发生变化时触发
        request.onreadystatechange = function () {
            // 2.1 判断请求是否完成且响应成功
            // readyState === 4：表示请求已完成（后端响应已全部接收）
            // status === 200：HTTP响应状态码200，表示请求成功（后端正常返回数据）
            if (request.readyState == 4 && request.status === 200) {
                // 2.2 打印后端返回的原始响应数据（用于调试，可在浏览器控制台查看）
                // responseText：XMLHttpRequest对象的属性，存储后端返回的文本格式数据
                console.log(request.responseText)

                // 2.3 获取页面中的input输入框元素
                // document.getElementById("search-input")：通过ID选择器找到input元素
                // 因为input的id是唯一的，所以能精准定位到目标元素，返回DOM对象
                var elementById = document.getElementById("search-input");

                // 2.4 将后端返回的数据赋值给input输入框，实现结果展示
                // input元素的value属性：控制输入框中显示的内容
                // 这里把接口返回的文本（request.responseText）设置为输入框的显示值
                elementById.value = request.responseText;
            }
        }

        // 3. 配置AJAX请求参数（准备发起请求）
        // request.open(method, url)：初始化请求，参数说明：
        // - 第1个参数：请求方式（GET/POST/PUT/DELETE等），这里用GET（无参数请求首选）
        // - 第2个参数：后端接口的完整URL（协议+域名+端口+接口路径）
        //   后端接口地址：http://localhost:8080/ajax/HelloAjax（本地8080端口，接口前缀/ajax，接口名HelloAjax）
        // 注意：open()仅配置请求，不会实际发送，需调用send()才会发起
        request.open("GET", "http://localhost:8080/ajax/HelloAjax");

        // 4. 发送AJAX请求（真正发起请求到后端）
        // send()：触发请求发送，GET请求无参数时，括号内可传null或空（这里省略不写）
        // 发送后，浏览器会异步向指定URL发起请求，不会阻塞页面其他操作
        request.send();
    }
</script>
</body>
</html>

转载请说明出处内容投诉
CSS教程网 » Ajax的学习

雷鸣13550350058

分享到：