javascript_如何实现AJAX请求-js教程-PHP中文网

javascript_如何实现AJAX请求

夢幻星辰

发布： 2025-12-03 19:04:50

原创

412人浏览过

AJAX可通过XMLHttpRequest、fetch或jQuery实现；推荐使用基于Promise的fetch API，支持async/await，语法简洁，现代浏览器兼容，发送GET/POST请求更高效。

javascript_如何实现ajax请求

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。在JavaScript中，可以通过多种方式实现AJAX请求，下面介绍几种常用方法。

使用原生 XMLHttpRequest

XMLHttpRequest 是最早用于实现 AJAX 的原生对象，兼容性好，适合学习理解原理。

基本用法如下：

创建 XMLHttpRequest 实例
调用 open() 方法设置请求方式和URL
监听 onreadystatechange 事件处理响应
调用 send() 发送请求

示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 处理返回数据
  }
};
xhr.send();

登录后复制

使用 fetch API

fetch 是现代浏览器提供的更简洁、基于 Promise 的网络请求方法，推荐在支持的环境中使用。

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

特点：

语法更清晰，支持 async/await
返回 Promise，便于链式调用
需要手动检查响应状态

示例：

Android配合WebService访问远程数据库中文WORD版

采用HttpClient向服务器端action请求数据，当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据，那么什么是webService呢？，它是一种基于SAOP协议的远程调用标准，通过webservice可以将不同操作系统平台，不同语言，不同技术整合到一起。实现Android与服务器端数据交互，我们在PC机器java客户端中，需要一些库，比如XFire,Axis2,CXF等等来支持访问WebService，但是这些库并不适合我们资源有限的android手机客户端，

查看详情

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('网络错误');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

登录后复制

配合 async/await 使用更直观：

async function getData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

登录后复制

使用 jQuery.ajax（如果项目引入了 jQuery）

虽然现在原生方法更流行，但一些老项目仍使用 jQuery 简化 AJAX 操作。

示例：

$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, err) {
    console.error(err);
  }
});

登录后复制

发送 POST 请求（以 fetch 为例）

向服务器提交数据时通常使用 POST 方法。

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '张三', age: 25 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

登录后复制

基本上就这些。选择哪种方式取决于你的项目环境和浏览器兼容要求。现代开发推荐使用 fetch，如需兼容旧浏览器可搭配 polyfill 或使用 axios 等库。

以上就是javascript_如何实现AJAX请求的详细内容，更多请关注php中文网其它相关文章！