AJAX是一种异步JavaScript技术,核心是后台发起HTTP请求并局部更新页面;现代实现方式包括Fetch API(推荐)、XMLHttpRequest(兼容性好)和Axios(功能增强)。

JavaScript 发送请求的核心方式就是 AJAX,它让网页能在不刷新页面的情况下与服务器交换数据。
什么是 AJAX
AJAX(Asynchronous JavaScript and XML)是一种开发技术,不是单一语法或 API。它的本质是:用 JavaScript 在后台悄悄发起 HTTP 请求,拿到响应后局部更新页面,用户无感。
虽然名字里有 XML,但现在最常用的数据格式其实是 JSON;“异步”才是关键——请求发出后,代码不会卡住等待结果,而是继续执行,等服务器返回了再通过回调或 Promise 处理数据。
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
现代 JavaScript 发送请求的三种主要方式
1. Fetch API(推荐,原生、简洁、基于 Promise)
替代传统 XMLHttpRequest 的现代标准,语法更清晰:
- 基本 GET 请求:fetch('/api/users') 返回一个 Promise,用 .then() 或 async/await 处理响应
- 带配置的 POST 请求:fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: 'a', pass: 'b' }) })
- 注意:fetch 默认不带 Cookie,需加 credentials: 'include' 才能发送凭据
2. XMLHttpRequest(XHR,兼容性最好,但写法较繁琐)
AJAX 的原始实现,所有浏览器都支持,适合需要精细控制或兼容老版本的场景:
- 创建实例:const xhr = new XMLHttpRequest()
- 配置并发送:xhr.open('GET', '/data.json'); xhr.send()
- 监听响应:xhr.onload = () => { if (xhr.status === 200) console.log(xhr.responseText) }
3. 第三方库(如 Axios)
封装了 fetch/XHR,提供更友好的 API 和内置功能(自动转换 JSON、请求/响应拦截、超时控制、取消请求等):
- GET:axios.get('/api/posts')
- POST:axios.post('/login', { email, password })
- 统一错误处理、默认配置、CSRF 自动携带等,适合中大型项目
常见注意事项
- CORS(跨域)问题:浏览器会拦截非同源请求,需后端设置 Access-Control-Allow-Origin 等响应头
- 错误处理别只靠 catch:fetch 成功返回 Response 对象,但 404、500 仍算“成功”,需手动检查 response.ok 或 response.status
- 避免“裸奔”请求:生产环境建议统一封装请求函数,加入 loading 状态、错误提示、鉴权 token 注入等逻辑
一句话总结
AJAX 是一种思想,Fetch 是它的现代实现,XMLHttpRequest 是它的老前辈,Axios 是它的增强版助手——选哪个,看项目需求和兼容要求就行。
立即学习“Java免费学习笔记(深入)”;









