不用ajax如何发送json

不依赖Ajax：多种高效发送JSON数据的方法

在现代Web开发中，Ajax（异步JavaScript和XML）曾是前后端数据交互的代名词，而JSON以其轻量级、易读的特性成为主流数据格式，Ajax并非发送JSON的唯一途径，随着技术演进，多种替代方案应运而生，它们在特定场景下能提供更优的体验或更简洁的实现，本文将探讨不依赖Ajax发送JSON数据的多种方法，分析其原理、适用场景及优缺点，助你拓宽技术视野,灵活应对不同开发需求。

传统表单提交：经典永不过时的JSON传输

提到不依赖Ajax的数据提交，传统HTML表单（<form>）是最基础也最直接的方式，虽然表单默认的Content-Type是application/x-www-form-urlencoded，但通过设置enctype="application/json"，我们可以让表单直接提交JSON数据，需要注意的是，浏览器对application/json作为表单编码类型的支持存在差异,因此更常见的做法是通过JavaScript手动构建JSON并作为表单数据提交。

实现原理

构建JSON数据：使用JSON.stringify()将JavaScript对象转换为JSON字符串。
隐藏表单字段：在表单中添加一个隐藏的<input>或<textarea>，将JSON字符串作为其值。
表单提交：通过form.submit()触发同步提交，页面会跳转到目标URL（或携带数据跳转）。

示例代码

<form id="jsonForm" action="/api/submit" method="POST">
  <input type="hidden" id="jsonData" name="data">
  <button type="submit">提交JSON</button>
</form>
<script>
  const data = { name: "张三", age: 25, hobbies: ["阅读", "编程"] };
  document.getElementById("jsonData").value = JSON.stringify(data);
  // 可选：监听表单提交事件（非必需，仅用于演示）
  document.getElementById("jsonForm").addEventListener("submit", function(e) {
    console.log("表单提交，数据：", this.elements.data.value);
  });
</script>

优缺点分析

优点：
- 兼容性极好，所有浏览器均支持；
- 实现简单，无需额外库；
- 支持文件上传（通过<input type="file">）。
缺点：
- 提交后会刷新页面或跳转，无法实现异步无刷新更新；
- 提交数据大小可能受浏览器或服务器限制；
- 无法直接处理复杂响应（需刷新页面后重新获取）。

Fetch API：现代浏览器原生的“Ajax替代者”

Fetch API是现代浏览器提供的原生接口，用于发起HTTP请求，它基于Promise设计，比传统的XMLHttpRequest（Ajax的核心对象）更简洁、更强大，虽然Fetch常被归为“现代Ajax方案”，但其本质是独立的HTTP请求机制，与Ajax的“XMLHttpRequest+回调”模式有本质区别,因此可视为不依赖Ajax的JSON发送方式。

实现原理

使用fetch()函数发送HTTP请求，通过headers设置Content-Type: application/json，并将JSON数据作为body传入，同时设置method（如POST、PUT等）。

示例代码

const data = { name: "李四", age: 30, city: "北京" };
fetch("/api/user", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    // 可添加其他自定义头，如Authorization
  },
  body: JSON.stringify(data),
})
  .then(response => {
    if (!response.ok) {
      throw new Error("网络响应异常");
    }
    return response.json(); // 解析响应的JSON数据
  })
  .then(result => {
    console.log("提交成功：", result);
  })
  .catch(error => {
    console.error("提交失败：", error);
  });

优缺点分析

优点：
- 原生支持，无需额外依赖；
- 基于Promise，语法简洁，易于异步链式调用；
- 支持请求/响应流（Stream），适合处理大文件或实时数据；
- 可灵活配置请求头、缓存模式等。
缺点：
- 旧浏览器（如IE11）不支持（可通过polyfill解决）；
- 默认不携带Cookie（需设置credentials: "include"）；
- 错误处理机制：仅当网络请求失败时才会触发catch，HTTP状态码错误（如404、500）需手动判断。

WebSocket：全双工通信下的实时JSON交互

WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务器主动向客户端推送数据，非常适合实时场景（如聊天室、实时数据监控、在线协作等），在WebSocket通信中，JSON是常用的数据格式之一，通过send()方法可直接发送JSON数据。

实现原理

建立连接：通过new WebSocket(url)创建连接，协议需匹配（ws://或wss://）。
发送数据：使用ws.send(JSON.stringify(data))发送JSON数据。
接收数据：监听onmessage事件,解析服务器返回的JSON数据。

示例代码

// 建立WebSocket连接（假设服务器地址为ws://localhost:8080）
const ws = new WebSocket("ws://localhost:8080");
// 连接建立后发送JSON数据
ws.onopen = function() {
  const data = { type: "message", content: "你好，服务器！" };
  ws.send(JSON.stringify(data));
  console.log("JSON数据已发送");
};
// 接收服务器返回的JSON数据
ws.onmessage = function(event) {
  try {
    const response = JSON.parse(event.data);
    console.log("收到服务器响应：", response);
  } catch (error) {
    console.error("解析JSON失败：", error);
  }
};
// 连接关闭或出错时的处理
ws.onclose = function() {
  console.log("WebSocket连接已关闭");
};
ws.onerror = function(error) {
  console.error("WebSocket错误：", error);
};

优缺点分析

优点：
- 全双工通信，服务器可主动推送数据，实时性高；
- 支持自定义JSON数据格式，灵活扩展；
- 连接建立后，数据传输开销小（无需重复建立连接）。
缺点：
- 需服务器端支持WebSocket协议（如Node.js的ws库、Spring的@ServerEndpoint）；
- 长连接可能占用服务器资源；
- HTTP环境下无法直接使用（需浏览器支持WebSocket协议）。

Server-Sent Events（SSE）：服务器推送的单向JSON流

SSE是一种服务器向客户端推送数据的轻量级技术，基于HTTP协议，使用文本/event-stream格式传输数据，虽然SSE主要用于服务器向客户端推送，但客户端也可通过HTTP请求（如POST）发送JSON数据，服务器处理后通过SSE返回响应，形成“客户端提交JSON+服务器推送响应”的模式。

实现原理

客户端发送JSON：通过Fetch或传统表单提交JSON数据到服务器。
服务器处理并推送：服务器接收JSON后，通过SSE连接向客户端推送实时响应（如JSON格式的进度更新、结果通知等）。

示例代码（客户端发送JSON并接收SSE响应）

// 1. 先通过Fetch提交JSON数据
const data = { task: "数据处理", params: { type: "export" } };
fetch("/api/start-task", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(initData => {
    // 假设服务器返回了任务ID，用于建立SSE连接
    const taskId = initData.taskId;
    console.log("任务已启动，ID：", taskId);
    // 2. 建立SSE连接接收服务器推送的JSON响应
    const eventSource = new EventSource(`/api/task-progress?taskId=${taskId}`);
    eventSource.onmessage = function(event) {
      const progress = JSON.parse(event.data);
      console.log("任务进度：", progress);
      if (progress.status === "completed") {
        eventSource.close(); // 任务完成后关闭连接
      }
    };
    eventSource.onerror = function(error) {
      console.error("SSE连接错误：", error);
      eventSource.close();
    };
  })
  .catch(error => console.error("提交失败：", error));