讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript如何发送请求_ajax的基本原理是什么【教程】

云浩酱_4650

云浩酱_4650

发布时间:2026-01-25 17:12:10

|

596人浏览过

|

来源于php中文网

原创

Ajax是异步加载数据的概念,非具体API;现代开发首选fetch,需手动检查response.ok、设置credentials、处理超时与JSON解析;XMLHttpRequest仅兼容老IE时使用;跨域预检请求需前后端协同配置。

javascript如何发送请求_ajax的基本原理是什么【教程】

JavaScript 发送请求不是靠“Ajax”这个东西本身,而是靠 XMLHttpRequest 或 fetch 这类底层 API;“Ajax”只是个概念——异步加载数据,不刷新页面。现在写法早就不依赖 XMLHttpRequest 手动封装了。

用 fetch 发请求最常用,但要注意它不认 HTTP 状态码错误

fetch 默认只在网络失败(如断网、DNS 失败)时 reject,404、500 这类响应仍算“成功”,response.ok 才是判断业务是否成功的可靠依据:

  • 必须手动检查 response.ok 或 response.status,否则 500 响应会静默进入 then
  • fetch 默认不带 cookie,要发带凭证的请求得加 { credentials: 'include' }
  • 没有超时控制,需要自己用 AbortController 实现
  • 不自动解析 JSON,得链式调用 .json(),且该方法也返回 Promise,要 await 两次
fetch('/api/user')
  .then(r => {
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return r.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

XMLHttpRequest 还值得学吗?只在兼容老环境时用

除非要支持 IE9 及更早版本,否则没必要手写 XMLHttpRequest。它的主要坑在于:

  • 回调嵌套深,容易写出“回调地狱”
  • 状态判断靠 xhr.readyState === 4 && xhr.status === 200,容易漏判
  • 设置请求头必须在 .open() 之后、.send() 之前
  • 上传进度监听用 xhr.upload.onprogress,下载用 xhr.onprogress,两者不同

POST 提交 JSON 数据,别忘了设 Content-Type

用 fetch 发 JSON 时,headers 必须显式声明 Content-Type: application/json,否则后端可能收不到 body 或解析失败:

Work Productivity Word Mail Workflow Helper
Work Productivity Word Mail Workflow Helper

构建并排查Microsoft Word邮件合并及DOCX模板工作流,使用合并域、内容控件、文档属性、重复区块、数据等

下载

立即学习“Java免费学习笔记(深入)”;

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'a', password: 'b' })
});
  • 如果后端用的是 form 表单接收(如 application/x-www-form-urlencoded),就得用 new URLSearchParams({...}) 构造 body
  • 传文件要用 FormData,此时不能设 Content-Type —— 浏览器会自动生成带 boundary 的 multipart 类型

跨域问题不是前端能绕开的,但预检请求可以少触发

当请求满足“非简单请求”条件(比如带自定义 header、Content-Type 不是 text/plain/multipart/form-data/application/x-www-form-urlencoded),浏览器会先发一个 OPTIONS 预检请求。避免它的办法只有:

  • 后端在响应中加 Access-Control-Allow-Headers,把前端用到的 header 列全
  • 前端尽量用简单请求方式:比如不用 Authorization header,改用 query 参数或 cookie 传 token
  • credentials: 'include' 会让预检必发,且后端必须返回 Access-Control-Allow-Origin 具体域名,不能是 *

真正难调试的往往不是语法,而是预检被拦截后控制台只显示“CORS error”,却不告诉你到底是哪个响应头没配对。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2195

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3442

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1156

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3959

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

3100

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2913

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

0

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn