在html中写ajax代码怎么运行_html中运行ajax代码步骤【指南】-html教程-PHP中文网

在html中写ajax代码怎么运行_html中运行ajax代码步骤【指南】

爱谁谁

发布： 2025-12-01 15:49:02

原创

950人浏览过

AJAX可在不刷新页面的情况下异步更新内容，通过在HTML中嵌入JavaScript使用XMLHttpRequest或fetch()发送请求，需通过Web服务器运行以避免跨域问题，配合公共API或本地后端接口实现数据交互，调试时借助浏览器开发者工具查看网络状态。

在html中写ajax代码怎么运行_html中运行ajax代码步骤【指南】

AJAX（Asynchronous JavaScript and XML）可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在HTML中运行AJAX代码，实际上是在HTML页面中嵌入JavaScript代码来发送异步请求。下面是具体步骤和示例，帮助你快速上手。

1. 创建基本的HTML结构

首先准备一个简单的HTML文件，包含一个用于显示结果的区域和一个触发AJAX请求的按钮。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>AJAX 示例</title>
</head>
<body>
  <h2>AJAX 请求演示</h2>
  <button onclick="loadData()">获取数据</button>
  <div id="result"></div>

  <script>
    // AJAX 代码将写在这里
  </script>
</body>
</html>

登录后复制

2. 编写AJAX代码（使用原生JavaScript）

在<script>标签内编写AJAX逻辑。常用方式是使用XMLHttpRequest对象或现代的fetch() API。

方法一：使用 XMLHttpRequest

function loadData() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "https://www.php.cn/link/1e29c56ad0f221a5aa3f0553eb72055bposts/1", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById("result").innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}

登录后复制

方法二：使用 fetch()（推荐）

function loadData() {
  fetch("https://www.php.cn/link/1e29c56ad0f221a5aa3f0553eb72055bposts/1")
    .then(response => response.json())
    .then(data => {
      document.getElementById("result").innerHTML =
        "<h3>" + data.title + "</h3><p>" + data.body + "</p>";
    })
    .catch(error => {
      document.getElementById("result").innerHTML = "请求失败：" + error;
    });
}

登录后复制

3. 准备后端接口（或使用公共测试API）

AJAX需要向服务器发送请求。开发阶段可以：

立即学习“前端免费学习笔记（深入）”；

Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

145

查看详情

使用免费公共测试接口，如：
https://www.php.cn/link/1e29c56ad0f221a5aa3f0553eb72055b
自己搭建本地服务（如Node.js、PHP、Python Flask等），提供返回JSON的接口。

示例本地接口（Node.js + Express）

// server.js
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
  res.json({ message: "这是来自服务器的数据！" });
});
app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));

登录后复制

然后把AJAX请求地址改为：http://localhost:3000/api/data