AJAX揭秘 网页局部刷新其实很简单

在现代网页开发中，AJAX几乎无处不在。你在音乐网站搜索歌手、在电商平台切换商品、在社交网站点赞评论，这些无需刷新页面就能动态更新内容的体验，背后都离不开AJAX的支持。那么，AJAX到底是什么？它是如何让网页"动"起来的？今天我们就用最简单的语言，带你揭开AJAX的神秘面纱。

AJAX是什么？

AJAX，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。它不是一门新的编程语言，而是一种结合了多种技术的开发方式。是一种开发思路

AJAX的核心思想：让网页在后台与服务器通信，实现页面的局部刷新

AJAX的两种主流实现方式

AJAX的实现主要有两种方式：XMLHttpRequest和fetch。下面我们分别介绍，并对比它们的区别。

1. XMLHttpRequest------经典老牌方案

XMLHttpRequest（简称XHR）是最早实现AJAX的方式，几乎所有浏览器都支持。它的用法稍显繁琐，但原理清晰。

示例：

// 创建XHR对象
var xhr = new XMLHttpRequest();
// 配置请求类型、地址、是否异步
xhr.open('GET', '/api/singer?name=周杰伦', true);
// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理返回数据
    var data = JSON.parse(xhr.responseText);
    document.getElementById('result').innerText = data.info;
  }
};
// 发送请求
xhr.send();

流程说明：

1. 创建XHR对象。
2. 用open方法配置请求。
3. 监听onreadystatechange，判断请求是否完成。
4. 用send方法发起请求。

2. fetch------现代简洁新宠

fetch是ES6引入的新API，语法更简洁，基于Promise，易于链式调用和异常处理。

示例：

fetch('/api/singer?name=周杰伦')
  .then(response => response.json())
  .then(data => {
    document.getElementById('result').innerText = data.info;
  });

流程说明：

1. 直接用fetch发起请求。
2. 用.then处理响应和数据。
3. 代码更短，逻辑更清晰。

---

两种方法的区别

特点	XMLHttpRequest	fetch
语法	传统，较繁琐	现代，简洁
返回值	事件回调	Promise链式调用
错误处理	需手动判断状态码	支持.catch统一处理

总结一句话：
XMLHttpRequest是经典老牌，兼容性好但写法繁琐；fetch是现代新宠，语法简洁，推荐在新项目中优先使用。

---

实战案例：歌手查询页面

假设我们有一个歌手查询页面，用户输入歌手名，点击"查询"按钮后，页面下方显示歌手信息。我们用两种方式实现：

XMLHttpRequest版：

document.getElementById('searchBtn').onclick = function() {
  var name = document.getElementById('singerName').value;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/singer?name=' + encodeURIComponent(name), true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      document.getElementById('result').innerText = data.info;
    }
  };
  xhr.send();
};

fetch版：

document.getElementById('searchBtn').onclick = function() {
  var name = document.getElementById('singerName').value;
  fetch('/api/singer?name=' + encodeURIComponent(name))
    .then(response => response.json())
    .then(data => {
      document.getElementById('result').innerText = data.info;
    });
};

你会发现，fetch写起来更直观，逻辑更清晰。

---

结语

AJAX让网页变得更灵活、更智能。无论你用XMLHttpRequest还是fetch，掌握AJAX的核心思想------异步请求，局部刷新 ，就能让你的网页"活"起来。建议新项目优先使用fetch，老项目或需兼容IE时用XMLHttpRequest。多练习、多思考，AJAX其实很简单！