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

JavaScript中什么是Ajax_如何发起请求

陌墨姑娘_8460

陌墨姑娘_8460

发布时间:2025-12-05 20:48:06

|

1010人浏览过

|

来源于php中文网

原创

Ajax是一种不刷新页面即可与服务器交换数据并更新部分网页内容的开发模式,核心是XMLHttpRequest对象;现代常用fetch API(基于Promise),中大型项目多用axios库封装处理。

javascript中什么是ajax_如何发起请求

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。

Aria2 Json Rpc
Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载
  • 基本 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 是稳妥选择。基本上就这些。

热门AI工具

更多
DeepSeek

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

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

WorkBuddy

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

音述AI
音述AI Hot

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

Seko
Seko Hot

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

豆包大模型

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

Atoms
Atoms Hot

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

相关专题

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

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

1975

2023.08.07

json是什么
json是什么

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

2702

2023.08.23

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

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

936

2023.10.13

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

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

3019

2025.09.10

ajax教程
ajax教程

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

2360

2023.06.14

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

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

340

2023.08.31

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

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

2213

2023.11.15

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

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

1141

2024.09.24

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

120

2026.09.23

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

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

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