当前位置：首页 > news >正文

AJAX的学习

news 2025/10/21 10:44:47

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 响应）。
进行前端验证，检查用户名和密码是否为空。
发送请求，并根据响应处理表单的验证结果。

//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>

//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 }));
});

//服务器（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，适合异步操作。

基本语法如下：

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

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

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

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()