AJAX 基础实例

m0_748254662026-01-16 16:48

AJAX 基础实例

AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载的情况下与服务器交换数据。以下是一个简单的 AJAX 示例，使用原生 JavaScript 实现。

HTML 部分

创建一个按钮和用于显示结果的 <div>：

html 复制代码

<button onclick="loadData()">加载数据</button>
<div id="result"></div>

JavaScript 部分

使用 XMLHttpRequest 对象发送请求并处理响应：

javascript 复制代码

function loadData() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById("result").innerHTML = 
        `标题: ${JSON.parse(xhr.responseText).title}`;
    } else {
      console.error("请求失败");
    }
  };

  xhr.send();
}

jQuery AJAX 实例

使用 jQuery 简化 AJAX 调用，代码更简洁。

引入 jQuery

在 HTML 头部添加：

html 复制代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery 代码

javascript 复制代码

$("button").click(function() {
  $.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
    $("#result").text(`标题: ${data.title}`);
  }).fail(function() {
    console.error("请求失败");
  });
});

Fetch API 实例

现代浏览器支持的 fetch 方法，基于 Promise 实现。

JavaScript 代码

javascript 复制代码

async function loadData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!response.ok) throw new Error("请求失败");
    const data = await response.json();
    document.getElementById("result").innerHTML = `标题: ${data.title}`;
  } catch (error) {
    console.error(error);
  }
}

关键点说明

跨域问题：若请求非当前域名下的接口，需确保服务器支持 CORS（如示例中的 JSONPlaceholder）。
错误处理 ：始终检查响应状态码（如 xhr.status 或 response.ok）。
异步性：AJAX 默认异步执行，避免阻塞页面渲染。

通过以上示例，可根据需求选择原生 JavaScript、jQuery 或 Fetch API 实现 AJAX 功能。