Ajax是一种不刷新页面即可与服务器交换数据并更新部分网页内容的开发模式，核心是XMLHttpRequest对象；现代常用fetch API（基于Promise），中大型项目多用axios库封装处理。
Ajax（Asynchronous JavaScript and XML）不是某一个技术，而是一种在不刷新整个页面的前提下，与服务器交换数据并更新部分网页内容的开发模式。虽然名字里有 XML，但现在更常用 JSON 格式传输数据。
核心是 XMLHttpRequest 对象
原生 Ajax 的基础是 XMLHttpRequest（简称 XHR）。它允许 JavaScript 向服务器发送 HTTP 请求、接收响应，并在后台处理，不影响用户当前操作。
创建请求对象：const xhr = new XMLHttpRequest(); 配置请求：xhr.open('GET', '/api/data', true);（第三个参数 true 表示异步） 设置响应处理函数：xhr.onload = () => { if (xhr.status === 200) console.log(xhr.responseText); }; 发送请求：xhr.send();（POST 请求需传入 body 数据）
现代写法：fetch API 更简洁
fetch 是浏览器原生提供的、基于 Promise 的新标准，语法更清晰，逐渐替代 XHR。
基本 GET 请求：fetch('/api/users').then(res => res.json()).then(data => console.log(data)); 带选项的 POST 请求：
fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'abc', password: '123' })}).then(res => res.json());
注意：fetch 默认不带 cookie，如需携带，加 credentials: 'include'
更高级：用 axios 简化常见操作
axios 是一个流行的第三方库，封装了 XHR/fetch，支持拦截器、自动转换 JSON、取消请求等特性，适合中大型项目。
立即学习“Java免费学习笔记（深入）”；
安装：npm install axios 简单使用：axios.get('/api/posts').then(res => console.log(res.data)); POST 示例：axios.post('/api/comments', { text: 'Hello' }); 错误统一处理可借助响应拦截器，比原生更省心
本质上，Ajax 就是让前端“悄悄通信”的能力。用 fetch 已能满足大多数场景；需要兼容老浏览器或复杂控制时再考虑 XHR；追求开发效率和工程化，axios 是稳妥选择。基本上就这些。
以上就是JavaScript中什么是Ajax_如何发起请求的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541218.html
微信扫一扫 
支付宝扫一扫 
