Ajax 高级功能之ajax向服务器发送数据

下面我将为您详细讲解“Ajax 高级功能之ajax向服务器发送数据”的完整攻略。

什么是 Ajax？

Ajax（Asynchronous Javascript And XML）是一种浏览器与服务器交互的技术，主要用于局部刷新页面，避免页面全局刷新，提升用户体验，同时也能够实现异步数据加载和前后端分离的技术需求。

Ajax向服务器发送数据的原理

在 Ajax 技术中，要向服务器发送数据，最常用的方式是使用 XMLHttpRequest 对象。该对象可以通过 JavaScript 创建，并用于发送 HTTP 请求和接收服务器响应，在不刷新页面的情况下更新页面内容。

通常，在向服务器发送数据时，我们需要使用 POST 方法，并将数据以键值对的形式一同发送。这样，在服务器端我们就能够通过解析请求体来获取数据了。

接下来，我们通过两个示例来具体说明如何在实践中向服务器发送数据。

示例一

下面的代码演示了如何通过 Ajax 向服务器发送 JSON 数据：

const data = {
  name: 'Alice',
  age: 20
};

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify(data));

在上述代码中，我们首先定义了一个 JavaScript 对象 data，然后创建了一个 XMLHttpRequest 对象 xhr，并通过 xhr.open() 方法来设置请求的方法（POST）、URL（/api/user）和异步标志（true）。

接着，使用 xhr.setRequestHeader() 方法来设置请求头的 Content-Type 为 application/json。这样，在服务器端解析请求体时就能将数据解析成 JSON 格式的对象。

最后，使用 xhr.onreadystatechange() 方法来监听请求状态的变化。当请求完成并成功时（xhr.readyState为 4，xhr.status为 200），调用 xhr.responseText 来获取服务器返回的响应数据，并输出到控制台上。

最后，通过 xhr.send() 方法将数据以字符串的形式发送到服务器。

示例二

下面的代码演示了如何通过 Ajax 向服务器发送表单数据：

const form = document.getElementById('myForm');
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(new FormData(form));

在上述代码中，我们首先通过 document.getElementById() 方法获取表单元素 myForm。然后，创建了一个 XMLHttpRequest 对象 xhr，并通过 xhr.open() 方法来设置请求的方法（POST）、URL（/api/user）和异步标志（true）。

接着，使用 xhr.onreadystatechange() 方法来监听请求状态的变化。当请求完成并成功时（xhr.readyState为 4，xhr.status为 200），调用 xhr.responseText 来获取服务器返回的响应数据，并输出到控制台上。

最后，通过 xhr.send() 方法将表单数据使用 FormData 类型封装，并以对象的形式发送到服务器。在服务器端，我们需要对请求体进行解析，以获取表单数据。

至此，我们简单介绍了如何通过 Ajax 向服务器发送数据，希望对您有所帮助。