action与ajax交互—示例代码

1、在网页开发中，action与ajax交互是指通过ajax技术将用户在网页上的操作发送给服务器，并接收服务器返回的数据，实现页面的动态更新。这种交互方式可以提升用户体验，避免页面的刷新，同时减轻服务器的负担。

示例代码如下：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的方法和URL
xhr.open('POST', '/api/update', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听服务器响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理服务器返回的数据
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
// 构造请求参数
var data = {
  username: 'john',
  password: '123456'
};
// 将请求参数转换为JSON字符串
var jsonData = JSON.stringify(data);
// 发送请求
xhr.send(jsonData);

在上述示例中，我们首先创建了一个XMLHttpRequest对象，这是用于发送ajax请求的核心对象。然后使用`open`方法设置请求的方法和URL，这里使用了POST方法，请求的URL为`/api/update`。接着使用`setRequestHeader`方法设置请求头，这里设置为`application/json`，表示请求体中的数据为JSON格式。

然后我们通过监听`onreadystatechange`事件来处理服务器响应。当`readyState`等于4且`status`等于200时，表示服务器响应成功，我们可以通过`responseText`属性获取服务器返回的数据。这里我们将返回的数据解析为JSON对象，并打印到控制台上。

接下来，我们构造了一个请求参数`data`，包含了用户名和密码。然后使用`JSON.stringify`方法将请求参数转换为JSON字符串。最后使用`send`方法发送请求，将JSON字符串作为请求体发送给服务器。

通过以上代码，我们可以实现将用户的用户名和密码发送给服务器，并获取服务器返回的数据进行处理，实现页面的动态更新。