讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

剧云
剧云

中文短剧剧本制作平台

Laper
Laper

剧本策划到成片协作

AniShort
AniShort

AI短剧协同制作平台

JavaScript如何实现Ajax请求_怎样处理跨域和错误响应

冬宇大大_7243

冬宇大大_7243

发布时间:2025-12-27 14:53:22

|

611人浏览过

|

来源于php中文网

原创

JavaScript实现Ajax推荐用fetch,需手动处理HTTP错误和业务错误;跨域须后端配置CORS,前端无法绕过;错误应分网络失败、HTTP异常、业务错误三层处理。

javascript如何实现ajax请求_怎样处理跨域和错误响应

JavaScript 实现 Ajax 请求主要靠 fetch 或 XMLHttpRequest,现代项目推荐用 fetch;跨域需后端配合设置 CORS 头,前端无法绕过;错误响应要区分网络失败、HTTP 状态码异常(如 404/500)和业务错误(如后端返回的 { code: 401, msg: "未登录" }),需分别处理。

用 fetch 发起基础 Ajax 请求

fetch 是基于 Promise 的原生 API,语法简洁,支持 async/await。注意它只在**网络请求失败时 reject**(比如断网、域名不存在),而 4xx/5xx 状态码仍会 resolve,需手动检查 response.ok 或 response.status。

  • GET 请求示例:
    const res = await fetch('/api/user?id=123');<br>if (!res.ok) throw new Error(`HTTP ${res.status}`);<br>const data = await res.json();
  • POST 提交 JSON:
    const res = await fetch('/api/login', {<br>  method: 'POST',<br>  headers: { 'Content-Type': 'application/json' },<br>  body: JSON.stringify({ username: 'a', password: 'b' })<br>});

跨域问题的核心是浏览器同源策略

跨域不是 Ajax 特有,而是所有浏览器发起的跨源 HTTP 请求都受限制。能否成功取决于**服务端是否允许当前源访问**,关键看响应头:

  • Access-Control-Allow-Origin: * 或指定域名(如 https://myapp.com)
  • 若带 Cookie 或认证头,还需 Access-Control-Allow-Credentials: true,且 Allow-Origin 不能为 *
  • 预检请求(OPTIONS)需服务端正确响应 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers

前端无法“解决”跨域,只能确认请求是否符合 CORS 规则。开发时可用代理(如 Webpack DevServer 的 proxy)临时规避,上线必须由后端配置。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载

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

统一处理错误响应更可靠

真实项目中,错误不止一种类型,建议封装请求函数集中处理:

  • 捕获网络异常(try/catch 捕获 fetch 抛出的错误)
  • 检查 response.ok === false 或状态码范围(如 status ≥ 400)
  • 解析 JSON 后再判断业务字段(如 data.code !== 0)
  • 对不同错误类型做不同反馈:网络错误提示重试,401 跳登录页,403 提示无权限,业务错误显示 data.msg

需要兼容老浏览器时用 XMLHttpRequest

如果必须支持 IE10/11,可封装简易版 XHR 工具函数。注意设置 xhr.withCredentials = true 才能发带 Cookie 的跨域请求,且需监听 onerror、onload 和 onreadystatechange 综合判断状态。

不复杂但容易忽略细节,关键是把网络层、HTTP 层、业务层的错误分开识别和响应。

热门AI工具

更多
豆包大模型

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

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

DeepSeek

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

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

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

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

SoundView
SoundView Hot

SoundView是一款面向跨境电商的视频翻译、配音和本地化 AI 创作平台。

相关专题

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

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

2335

2023.08.07

json是什么
json是什么

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

3842

2023.08.23

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

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

1276

2023.10.13

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

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

4459

2025.09.10

ajax教程
ajax教程

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

3480

2023.06.14

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

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

360

2023.08.31

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

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

3293

2023.11.15

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

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

1181

2024.09.24

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

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