javascriptAJAX是什么_如何与服务器进行数据交互【教程】

10次阅读

ajax 是用 javaScript 发起 http 请求、不刷新页面更新局部内容的实践方式,核心是 XMLHttpRequest 或 fetch(),关键在“异步”和“局部更新”;推荐优先使用 fetch(),因其语法简洁、基于 promise、天然支持 async/await,而 XMLHttpRequest 需手动处理状态码事件和响应体转换。

javascriptAJAX是什么_如何与服务器进行数据交互【教程】

AJAX 不是某种新语言,而是用 javascript 发起 HTTP 请求、不刷新页面更新局部内容的一套实践方式。 它的核心是 XMLHttpRequest 或更现代的 fetch(),关键在于“异步”和“局部更新”——你改一个表单、点个按钮、下拉加载更多,背后都在用它。

为什么fetch() 而不是 XMLHttpRequest

除非要支持 IE11 及更老浏览器,否则直接用 fetch()。它语法简洁、基于 Promise、天然支持 async/await,而 XMLHttpRequest 需手动处理状态码、监听事件、转换响应体,容易写错。

常见坑:

  • fetch() 默认不带 cookie,需显式加 { credentials: 'include' } 才能传登录态
  • fetch() 只在网络失败时 reject,HTTP 状态码 404/500 不会触发 catch,得手动检查 response.ok
  • POST 提交 jsON 时,必须设 headers: { 'Content-Type': 'application/json' },否则后端可能收不到 body

fetch() 最简可用示例(GET 和 POST)

GET 请求(查数据):

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

const res = await fetch('/api/users?id=123'); const data = await res.json(); if (!res.ok) throw new Error(`HTTP ${res.status}`); console.log(data);

POST 请求(发数据):

const res = await fetch('/api/comments', {   method: 'POST',   headers: { 'Content-Type': 'application/json' },   body: JSON.stringify({ content: '你好', post_id: 42 }) }); const result = await res.json();

注意:JSON.stringify() 是必须的,fetch() 不会自动序列化对象body 只接受字符串FormDataBlob 等原生类型。

什么时候该用 FormData 而不是 JSON?

上传文件、或表单含 时,必须用 FormData。它能自动处理多部分编码multipart/form-data),而 JSON 无法表示二进制文件。

实操要点:

  • 创建后直接 append 字段:const fd = new FormData(); fd.append('title', '测试');
  • 传文件时,append 的第二个参数可以是 File 对象(来自 input.files[0]
  • 不用手动设 Content-Type 头——fetch() 会自动设置并带上边界符
  • 后端接收时,不能按 JSON 解析,得用 multipart 解析器(如 expressmulter

真正难的不是发请求,而是处理并发、取消重复请求、统一错误提示、缓存策略——这些没封装好,fetch() 写多了反而更乱。

text=ZqhQzanResources