ajax的异步交互(ajax异步请求提交的两种形式：示例代码)

Ajax（Asynchronous JavaScript and XML）是一种通过在后台与服务器进行异步通信的技术。它可以在不刷新整个页面的情况下更新部分页面内容，提升用户体验和页面加载速度。

Ajax的异步交互可以通过两种形式来实现：XMLHttpRequest对象和fetch API。

1. 使用XMLHttpRequest对象：

XMLHttpRequest对象是浏览器提供的用于与服务器进行交互的API。它可以通过发送HTTP请求来获取服务器返回的数据，并在接收到响应后更新页面内容。

示例代码如下：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的类型、URL以及是否异步
xhr.open('GET', 'https://api.example.com/data', true);
// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    // 更新页面内容
    document.getElementById('result').innerHTML = response.data;
  }
};
// 发送请求
xhr.send();

在上述示例中，首先创建了一个XMLHttpRequest对象，并通过open方法设置了请求的类型（GET）、URL（https://api.example.com/data）以及是否异步（true）。然后，通过监听onreadystatechange事件，当请求状态变化时执行相应的操作。当请求状态为4（表示请求已完成）且响应状态码为200时，说明请求成功，可以通过responseText属性获取服务器返回的数据。将返回的数据更新到页面中。

2. 使用fetch API：

fetch API是一种更现代化的异步请求方法，它提供了更简洁和灵活的接口来进行异步交互。

示例代码如下：

// 发送GET请求
fetch('https://api.example.com/data')
  .then(function(response) {
    // 处理返回的响应
    return response.json();
  })
  .then(function(data) {
    // 处理返回的数据
    document.getElementById('result').innerHTML = data.data;
  })
  .catch(function(error) {
    // 处理错误
    console.log(error);
  });

在上述示例中，通过fetch函数发送了一个GET请求，并通过then方法处理返回的响应。在第一个then方法中，可以通过response.json()方法将响应转换为JSON格式的数据。然后，在第二个then方法中处理返回的数据，并将其更新到页面中。如果发生错误，可以通过catch方法进行错误处理。

Ajax的异步交互可以通过XMLHttpRequest对象和fetch API来实现。无论是使用哪种方式，都可以在不刷新整个页面的情况下与服务器进行通信，并更新页面内容。