JavaScript Ajax请求

JavaScript Ajax请求的完整攻略:

1. 创建XMLHttpRequest对象（XHR）

创建XHR对象是Ajax请求的第一步。XHR是一个内置的JavaScript对象，允许在不刷新页面的情况下向服务器发送请求。

var xhr = new XMLHttpRequest();

2. 准备请求

在发起请求之前，需要设置请求的各个参数，如请求类型、请求URL、请求参数等。

xhr.open('GET', '/url', true); // true表示异步请求

3. 发送请求

当请求准备好之后，可以发送请求到服务器。

xhr.send();

4. 监听请求状态变化

XHR对象提供了一些事件回调函数，可以监听请求状态的变化，并对请求结果进行处理。

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

5. 处理请求结果

在获取到服务器返回的数据之后，可以对结果进行处理，如显示结果到页面、修改页面内容等。

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = xhr.responseText;
    document.getElementById('result').innerHTML = response;
  }
};

完整的Ajax请求代码示例:

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

// 准备请求
xhr.open('GET', '/url', true);

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

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = xhr.responseText;
    document.getElementById('result').innerHTML = response;
  }
};