简单实现Ajax基础应用

Ajax不是一种技术，而是一个编程概念。HTML 和 CSS 可以组合使用来标记和设置信息样式。JavaScript 可以修改网页以动态显示，并允许用户与新信息进行交互。内置的 XMLHttpRequest 对象用于在网页上执行 Ajax，允许网站将内容加载到屏幕上而无需刷新页面。Ajax不是一种新技术，也不是一种新语言。相反，它是以新方式使用的现有技术。

在创造"Ajax"一词的文章中，杰西·詹姆斯·加勒特解释说，以下技术被整合在一起：

用于演示的HTML（或 XHTML）和 CSS
文档对象模型（DOM），用于动态显示数据并与之交互
用于数据交换的 JSON 或 XML，以及用于 XML 操作的 XSLT
用于异步通信的XMLHttpRequest对象
将这些技术结合在一起的JavaScript

下面为你介绍 AJAX 的基础应用，我会通过原生 JavaScript 和 Fetch API 两种方式来实现一个简单的示例。

1. 原生 XMLHttpRequest 方式

步骤解析：

创建 XMLHttpRequest 对象。
打开与服务器的连接。
监听请求状态的变化。
发送请求。
处理响应数据。

示例代码：

复制代码

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 配置请求（以GET请求为例）
xhr.open('GET', 'https://api.example.com/data', true);

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求已完成
    if (xhr.status === 200) { // 请求成功
      console.log('响应数据:', xhr.responseText);
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  }
};

// 发送请求
xhr.send();

2. Fetch API 方式（现代方法）

步骤解析：

使用 fetch () 函数发起请求。
处理 Promise 对象。
将响应数据解析为 JSON 格式。
处理解析后的数据。

示例代码：

复制代码

// 发起GET请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP错误，状态码：' + response.status);
    }
    return response.json(); // 解析JSON数据
  })
  .then(data => {
    console.log('响应数据:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

3. 实际应用示例

下面是一个结合 HTML 和 Fetch API 的完整示例，它能够从 GitHub API 获取用户信息并展示出来：

复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX示例</title>
</head>
<body>
  <button id="fetchData">获取GitHub用户信息</button>
  <div id="result"></div>

  <script>
    document.getElementById('fetchData').addEventListener('click', function() {
      // 使用Fetch API发送请求
      fetch('https://api.github.com/users/octocat')
        .then(response => response.json())
        .then(data => {
          // 处理返回的数据
          const resultDiv = document.getElementById('result');
          resultDiv.innerHTML = `
            <h3>${data.login}</h3>
            <img src="${data.avatar_url}" alt="Avatar" width="100">
            <p>关注者: ${data.followers}</p>
            <p>仓库数量: ${data.public_repos}</p>
          `;
        })
        .catch(error => {
          console.error('请求出错:', error);
          document.getElementById('result').innerHTML = '获取数据失败';
        });
    });
  </script>
</body>
</html>

4. 关键要点提醒

跨域请求：由于浏览器的同源策略限制，AJAX 通常只能向同源的服务器发送请求。不过，可以通过 CORS（跨域资源共享）或者 JSONP 来解决跨域问题。
错误处理：在实际应用中，必须对网络错误、超时等异常情况进行处理。
请求方法：支持 GET、POST、PUT、DELETE 等多种 HTTP 请求方法。
数据格式：常见的数据格式有 JSON、XML、纯文本等。

通过上述示例，你可以实现简单的 AJAX 请求。在实际的项目开发中，建议使用 axios 等第三方库，它能提供更强大的功能和更友好的 API。