ajax请求有哪些—示例代码

Ajax是一种在不刷新整个页面的情况下，通过与服务器进行异步通信的技术，可以实现动态更新页面内容的效果。通过Ajax，网页可以在后台与服务器进行数据交互，获取服务器返回的数据，并根据返回的数据动态地更新页面的内容。

在使用Ajax进行数据交互时，通常需要使用XMLHttpRequest对象来发送请求和接收响应。XMLHttpRequest对象是浏览器提供的用于与服务器进行交互的接口。通过该对象，可以发送HTTP请求，并获取服务器返回的数据。

下面是一个使用Ajax发送GET请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 在这里处理服务器返回的数据
  }
};
xhr.send();

在这个示例中，首先创建了一个XMLHttpRequest对象，并使用`open`方法指定了请求的方式（GET）、请求的URL（http://example.com/api/data）以及是否使用异步方式进行请求（true）。

然后，通过设置`onreadystatechange`事件处理函数，可以在请求状态发生变化时进行处理。当`readyState`为4（表示请求已完成）且`status`为200（表示请求成功）时，可以通过`responseText`属性获取服务器返回的数据。在这个示例中，假设服务器返回的是一个JSON格式的数据，我们可以使用`JSON.parse`方法将返回的数据解析为一个JavaScript对象。

通过调用`send`方法发送请求。

除了GET请求，Ajax还可以发送POST请求。下面是一个使用Ajax发送POST请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 在这里处理服务器返回的数据
  }
};
var data = {
  name: 'John',
  age: 25
};
xhr.send(JSON.stringify(data));

在这个示例中，与GET请求相比，需要额外调用`setRequestHeader`方法来设置请求头的`Content-Type`，以指定请求体的格式为JSON。

然后，通过调用`send`方法发送请求时，需要将请求体的数据以字符串形式传递给`send`方法。在这个示例中，我们使用`JSON.stringify`方法将JavaScript对象转换为JSON字符串。

通过使用Ajax，我们可以方便地与服务器进行数据交互，实现动态更新页面的效果。无论是GET请求还是POST请求，都可以通过XMLHttpRequest对象来发送请求和接收响应。