AJAX 实例大全

在这个章节中，我们将提供一些常见的 AJAX 实例，帮助你更好地理解和掌握 AJAX 技术。

1. 发送 GET 请求

// www.javascriptcn.com code example
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

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

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

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('请求失败');
    }
  }
};

2. 发送 POST 请求

// www.javascriptcn.com code example
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send(JSON.stringify({ key: 'value' }));

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('请求失败');
    }
  }
};

3. 处理 JSON 数据

// www.javascriptcn.com code example
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://api.example.com/json', true);

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

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      console.log(data);
    } else {
      console.error('请求失败');
    }
  }
};

以上是一些常见的 AJAX 实例，希望能帮助你更好地理解和使用 AJAX 技术。