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

JavaScript学习教程，从入门到精通，Ajax与Node.js Web服务器开发全面指南（24）

news 来源：原创 2025/4/24 8:33:46

Ajax与Node.js Web服务器开发全面指南

一、初识Ajax

1.1 Ajax基本概念

语法知识点：

  • Ajax (Asynchronous JavaScript and XML) 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术
  • 核心对象：XMLHttpRequest
  • 工作原理：
    1. 创建XMLHttpRequest对象
    2. 配置请求方法和URL
    3. 发送请求
    4. 处理服务器响应

基础语法：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true); // true表示异步
xhr.send();
xhr.onreadystatechange = function() {if(xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}
};

1.2 Ajax完整案例

<!DOCTYPE html>
<html>
<head><title>Ajax基础示例</title>
</head>
<body><button id="loadData">加载数据</button><div id="content"></div><script>document.getElementById('loadData').addEventListener('click', function() {// 1. 创建XHR对象const xhr = new XMLHttpRequest();// 2. 配置请求xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);// 3. 设置响应类型为JSONxhr.responseType = 'json';// 4. 发送请求xhr.send();// 5. 处理响应xhr.onload = function() {if (xhr.status === 200) {const data = xhr.response;document.getElementById('content').innerHTML = `<h3>${data.title}</h3><p>${data.body}</p>`;} else {console.error('请求失败:', xhr.status);}};// 6. 错误处理xhr.onerror = function() {console.error('请求出错');};});</script>
</body>
</html>

二、Web服务器搭建

2.1 Web服务器基本概念

语法知识点：

  • Web服务器是处理HTTP请求并返回响应的软件
  • 主要功能：
    • 监听端口
    • 接收请求
    • 处理请求
    • 返回响应
  • 常见Web服务器：Apache、Nginx、Node.js等

三、安装Node.js

3.1 安装步骤

  1. Windows/macOS：

    • 官网下载安装包：https://nodejs.org/
    • 运行安装程序
    • 验证安装：node -v 和 npm -v

  2. Linux：

    # 使用nvm安装（推荐）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install --lts

四、创建Node.js应用

4.1 初始化项目

mkdir my-node-app
cd my-node-app
npm init -y

4.2 基础HTTP服务器

语法知识点：

  • Node.js内置http模块
  • createServer()方法创建服务器
  • listen()方法启动服务器
  • 请求对象(req)和响应对象(res)

案例代码：

// 引入http模块
const http = require('http');// 创建HTTP服务器
const server = http.createServer((req, res) => {// 设置响应头res.writeHead(200, {'Content-Type': 'text/plain'});// 根据URL路径返回不同响应if (req.url === '/') {res.end('欢迎来到首页\n');} else if (req.url === '/about') {res.end('关于我们\n');} else {res.writeHead(404, {'Content-Type': 'text/plain'});res.end('页面未找到\n');}
});// 监听3000端口
server.listen(3000, () => {console.log('服务器运行在 http://localhost:3000/');
});

五、运行Web服务

5.1 启动服务器

node server.js

5.2 使用nodemon自动重启

npm install -g nodemon
nodemon server.js

六、访问Web服务

6.1 浏览器访问

直接在浏览器地址栏输入：http://localhost:3000

6.2 使用curl测试

curl http://localhost:3000
curl http://localhost:3000/about

七、完整案例：Node.js + Ajax交互

7.1 服务器端代码

// server.js
const http = require('http');
const url = require('url');
const querystring = require('querystring');// 模拟数据库
let users = [{ id: 1, name: '张三', age: 25 },{ id: 2, name: '李四', age: 30 }
];const server = http.createServer((req, res) => {const parsedUrl = url.parse(req.url);const path = parsedUrl.pathname;const query = querystring.parse(parsedUrl.query);// 设置CORS头res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');res.setHeader('Access-Control-Allow-Headers', 'Content-Type');// 处理预检请求if (req.method === 'OPTIONS') {res.writeHead(204);res.end();return;}// 路由处理if (path === '/api/users' && req.method === 'GET') {// 获取用户列表res.writeHead(200, { 'Content-Type': 'application/json' });res.end(JSON.stringify(users));} else if (path === '/api/users' && req.method === 'POST') {// 添加新用户let body = '';req.on('data', chunk => {body += chunk.toString();});req.on('end', () => {const newUser = JSON.parse(body);newUser.id = users.length + 1;users.push(newUser);res.writeHead(201, { 'Content-Type': 'application/json' });res.end(JSON.stringify(newUser));});} else {res.writeHead(404, { 'Content-Type': 'text/plain' });res.end('Not Found');}
});server.listen(3000, () => {console.log('API服务器运行在 http://localhost:3000');
});

7.2 客户端代码

<!DOCTYPE html>
<html>
<head><title>Node.js + Ajax 示例</title><style>table { border-collapse: collapse; width: 100%; }th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }th { background-color: #f2f2f2; }form { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }input { margin: 5px 0; display: block; }</style>
</head>
<body><h1>用户管理系统</h1><h2>添加用户</h2><form id="userForm"><input type="text" id="name" placeholder="姓名" required><input type="number" id="age" placeholder="年龄" required><button type="submit">添加</button></form><h2>用户列表</h2><table id="userTable"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody></tbody></table><script>// 获取DOM元素const userForm = document.getElementById('userForm');const userTable = document.getElementById('userTable').querySelector('tbody');// 加载用户列表function loadUsers() {const xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:3000/api/users', true);xhr.onload = function() {if (xhr.status === 200) {const users = JSON.parse(xhr.responseText);renderUsers(users);} else {console.error('加载用户失败:', xhr.status);}};xhr.onerror = function() {console.error('请求出错');};xhr.send();}// 渲染用户列表function renderUsers(users) {userTable.innerHTML = '';users.forEach(user => {const row = document.createElement('tr');row.innerHTML = `<td>${user.id}</td><td>${user.name}</td><td>${user.age}</td>`;userTable.appendChild(row);});}// 添加新用户userForm.addEventListener('submit', function(e) {e.preventDefault();const name = document.getElementById('name').value;const age = document.getElementById('age').value;const xhr = new XMLHttpRequest();xhr.open('POST', 'http://localhost:3000/api/users', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onload = function() {if (xhr.status === 201) {loadUsers(); // 刷新列表userForm.reset(); // 重置表单} else {console.error('添加用户失败:', xhr.status);}};xhr.onerror = function() {console.error('请求出错');};xhr.send(JSON.stringify({ name, age: parseInt(age) }));});// 初始加载用户列表loadUsers();</script>
</body>
</html>

八、关键语法点详解

8.1 XMLHttpRequest对象方法

方法描述
open(method, url, async)初始化请求
send([body])发送请求
setRequestHeader(header, value)设置请求头
abort()取消请求

8.2 XMLHttpRequest对象属性

属性描述
readyState请求状态 (0-4)
statusHTTP状态码
statusText状态文本
response响应体
responseText响应文本
responseType响应类型
timeout超时时间

8.3 Node.js HTTP模块核心API

方法/属性描述
http.createServer([options][, requestListener])创建HTTP服务器
server.listen(port[, host][, backlog][, callback])启动服务器
request.method请求方法
request.url请求URL
response.writeHead(statusCode[, statusMessage][, headers])写入响应头
response.write(chunk[, encoding][, callback])写入响应体
response.end([data][, encoding][, callback])结束响应

九、进阶主题

9.1 Fetch API替代XHR

// 使用Fetch API重写加载用户函数
async function loadUsers() {try {const response = await fetch('http://localhost:3000/api/users');if (!response.ok) throw new Error('Network response was not ok');const users = await response.json();renderUsers(users);} catch (error) {console.error('加载用户失败:', error);}
}

9.2 使用Express框架简化服务器开发

npm install express

const express = require('express');
const app = express();app.use(express.json());app.get('/api/users', (req, res) => {res.json(users);
});app.post('/api/users', (req, res) => {const newUser = req.body;newUser.id = users.length + 1;users.push(newUser);res.status(201).json(newUser);
});app.listen(3000, () => {console.log('Express服务器运行在 http://localhost:3000');
});

通过以上内容，您已经掌握了从Ajax基础到Node.js Web服务器开发的完整知识体系，包括核心语法、实际案例和进阶技巧。这些知识将为您的前后端分离开发打下坚实基础。

相关文章：

  • 基于javaweb的SpringBoot扶农助农平台管理系统设计与实现(源码+文档+部署讲解）
  • 前端面试场景题
  • JVM学习笔记
  • MCP 协议：AI 时代的 “USB-C” 革命——从接口统一到生态重构的技术哲学
  • URP-UGUI交互功能实现
  • Git 远程操作全攻略：从基础到实战
  • SOA（半导体光放大器）在BOTDR（布里渊光时域反射计）系统中的应用
  • [计算机科学#1]:计算机的前世今生，从算盘到IBM的演变之路
  • 「ES数据迁移可视化工具（Python实现）」支持7.x索引数据互传
  • 在 UniApp 中获取当前页面地址
  • 敏捷开发中的AI测试：未来的趋势与挑战
  • XCZU19EG-2FFVC1760I Xilinx赛灵思FPGA Zynq UltraScale+MPSoC
  • QT多元素控件及其属性
  • HTTP代理基础：网络新手的入门指南
  • 【HFP】蓝牙HFP协议来电处理机制解析
  • vue实现静默打印pdf
  • 利用HandlerMethodArgumentResolver和注解解析封装用户信息和Http参数
  • 【k8s】Taint污点）、Toleration（容忍）
  • 事关数据安全，ARM被爆不可修复漏洞
  • 在KEIL里C51和MDK兼容以及添加ARM compiler5 version编译器
  • 融入长三角一体化发展，苏南名城镇江的优势和机遇何在
  • 青岛：今年计划新增城镇住房约5.77万套，推动房地产市场回稳
  • “电化长江”的宜昌成果：船舶航运停靠都能用电，助力一江清水向东流
  • 中国政府援缅第八批紧急人道主义地震救灾物资抵达缅甸
  • 经济日报刊文谈外卖平台仍试图凭补贴制造超低价：苦练内功摆脱“内卷式”竞争
  • 一条水脉串起七个特色区块，上海嘉定发布2025年新城行动方案