ajax参考手册—示例代码

Ajax参考手册是一个用于学习和参考Ajax技术的工具。它提供了关于Ajax的详细说明和示例代码，帮助开发人员了解如何使用Ajax来实现网页的异步加载和交互。

示例代码一：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置一个回调函数，当请求完成时调用
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理返回的数据
    var response = xhr.responseText;
    console.log(response);
  }
};
// 打开一个GET请求，指定请求的URL
xhr.open('GET', 'https://api.example.com/data', true);
// 发送请求
xhr.send();

上述示例代码演示了使用Ajax发送一个GET请求，并在请求成功后处理返回的数据。我们创建了一个XMLHttpRequest对象，它是浏览器提供的用于发送Ajax请求的内置对象。然后，我们设置了一个回调函数，当请求的状态发生变化时会被调用。在回调函数中，我们首先检查请求的状态是否为4（即请求完成），并且响应的状态码是否为200（即请求成功）。如果满足这两个条件，我们可以通过xhr.responseText获取返回的数据，并进行进一步处理。

示例代码二：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置一个回调函数，当请求完成时调用
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    var result = response.data;
    console.log(result);
  }
};
// 打开一个POST请求，指定请求的URL
xhr.open('POST', 'https://api.example.com/data', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 发送请求，传递JSON格式的数据
xhr.send(JSON.stringify({ username: 'john', password: '123456' }));

上述示例代码演示了使用Ajax发送一个POST请求，并在请求成功后处理返回的数据。与GET请求相比，POST请求需要设置请求头来指定请求的内容类型。在这个例子中，我们使用`xhr.setRequestHeader`方法设置了Content-Type为application/json，表示请求的内容是JSON格式的数据。在发送请求时，我们需要将JSON格式的数据转换为字符串，并通过`xhr.send`方法发送。在回调函数中，我们可以通过`JSON.parse`方法将返回的数据解析为JSON对象，并进一步处理。