AJAX的学习 - 技术栈

AJAX介绍

AJAX，即Asynchronous Javascript And XML，是一种创建交互式网页应用的开发技术，通过与服务器进行数据交换实现局部网页的刷新（异步），传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。

AJAX中的JavaScript指的是使用JavaScript技术来发送异步请求，并接受响应的数据，而XML指的是请求与响应间传输的数据格式是XML（现在主流数据格式是JSON）。

AJAX应用场景

表单异步校验：比如我们在注册一个账号时，如果用户名已经存在，网页会给我们友好提示用户名已经占用，通过AJAX技术，异步与服务器进行数据交换，在数据库中查询用户名是否存在并局部渲染到网页上。

搜索框联想：我们在百度查阅资料时，输入字就会出现联想框，整个页面并未刷新，但会根据输入的字显示相关词条，异步实现。

原生的AJAX

原生的AJAX指的是不使用任何的框架，通过原始的JS来实现AJAX，这个过程依赖于AJAX的引擎对象：XMLHttpRequest

原生AJAX的api如下：

|--------------------------------------|---------------------------------------|----------------------------------------------------------------------------------------|
| new XMLHttpRequest | 创建AJAX引擎对象 | |
| onreadystatechange | 监听请求和响应的变化 | 事件处理程序属性 |
| readyState | 获取请求状态值 | 值从0到4 |
| status | 获取响应状态值 | 值为响应状态码，请自行查阅 |
| responseText | 获取响应的文本数据 | 服务器只能响应回字符串 |
| open(methon,url,async,user,password) | 初始化一个 HTTP 请求，即配置请求的类型、URL 和是否异步。 | method:get/post(请求方式) url:请求的资源路径 async:true/false(是否为异步) user和password：用于基本身份验证（了解即可） |
| send() | 把open方法配置好的请求真正发送出去 | 可以携带请求体（例如 POST 请求中的数据），请求过程中会触发onreadtstatechange等一系列事件 |

概念补充：事件处理程序属性是对象的一个特殊属性，它用来指定当特定事件发生时要调用的函数。这些事件通常是用户交互（例如点击、输入）或者浏览器事件（如请求完成、加载完成）。它的值是一个函数，该函数会在事件被触发时执行（如window.onload或element.onclick）。

工作流程

创建 XMLHttpRequest 对象
→ const xhr = new XMLHttpRequest();
配置请求信息
→ xhr.open("GET", url, true);
（可选）设置请求头
→ xhr.setRequestHeader("Content-Type", "application/json");
发送请求
→ xhr.send();

小任务：通过原生AJAX实现登陆表单校验

创建一个 HTML 表单，用户输入用户名和密码。
使用原生 AJAX 请求验证用户名和密码（假设请求会返回一个 JSON 响应）。
进行前端验证，检查用户名和密码是否为空。
发送请求，并根据响应处理表单的验证结果。

html 复制代码

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
</head>
<body>

    <h2>Login</h2>
    <form id="loginForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br><br>
        <button type="submit">Login</button>
    </form>

    <div id="error-message" style="color:red;"></div>

    <script src="login.js"></script>
</body>
</html>

javascript 复制代码

//login.js
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    // 获取用户名和密码
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // 清除上一次的错误消息
    document.getElementById('error-message').textContent = '';

    // 前端表单校验
    if (!username || !password) {
        document.getElementById('error-message').textContent = 'Username and Password are required!';
        return;
    }

    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();
    
    // 配置请求方式和 URL（假设服务器地址为 /api/login）
    xhr.open('POST', '/api/login', true);

    // 设置请求头为 JSON 格式
    xhr.setRequestHeader('Content-Type', 'application/json');

    // 请求完成后的回调函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // 请求已完成
            if (xhr.status === 200) { // 请求成功
                const response = JSON.parse(xhr.responseText); // 假设服务器返回 JSON 响应
                if (response.success) {
                    alert('Login successful!');
                } else {
                    document.getElementById('error-message').textContent = response.message;
                }
            } else {
                document.getElementById('error-message').textContent = 'An error occurred. Please try again.';
            }
        }
    };

    // 发送请求，传递用户名和密码
    xhr.send(JSON.stringify({ username, password }));
});

javascript 复制代码

//服务器（node.js实现，使用express框架）
const express = require('express');
const app = express();
app.use(express.json());

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;

    // 简单的用户名和密码验证（可以替换为数据库验证）
    if (username === 'admin' && password === '12345') {
        res.json({ success: true });
    } else {
        res.json({ success: false, message: 'Invalid username or password' });
    }
});

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

基于fetch的AJAX

fetch是一种现代的网络请求API ，用于在 JavaScript 中替代传统的xhr来发送 HTTP 请求（如 GET、POST）。它语法更简洁、基于Promise，适合异步操作。

基本语法如下：

javascript 复制代码

fetch(url, options)
  .then(response => response.json()) // 解析响应
  .then(data => console.log(data))   // 处理数据
  .catch(error => console.error(error)); // 错误处理

其中，options是一个配置对象，用来告诉fetch请求的方式，头信息，请求体等参数，如果只传一个参数，fetch默认发起get请求。

以下是一个post请求的实例：

javascript 复制代码

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'admin',
    password: '12345'
  })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

两者对比

特性	XMLHttpRequest	fetch
语法	回调（callback）	Promise
可读性	较复杂	更简洁
默认异步	是	是
支持流式响应	否	支持
错误处理	通过onreadystatechange	通过.catch()

以上就是笔者对于AJAX的学习，如有错误，请大家多多指！