在当今的Web开发中，AJAX（Asynchronous JavaScript and XML）是一种非常流行的技术，它允许网页在不重新加载页面的情况下与服务器交换数据和更新部分网页内容。掌握AJAX的5种请求方法，将使你能够更加灵活地实现网页与服务器之间的数据交互。

1. GET请求

GET请求是最常见的AJAX请求方法，用于从服务器检索数据。以下是使用GET请求的步骤：

1.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1.2 初始化请求

xhr.open('GET', 'url', true);

这里，url 是服务器的URL，true 表示异步请求。

1.3 设置响应类型

xhr.responseType = 'json'; // 或者 'text', 'document' 等

1.4 处理响应

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.error('The request was successful, but the response was not OK.');
  }
};

1.5 发送请求

xhr.send();

2. POST请求

POST请求用于向服务器发送数据，通常用于表单提交。以下是使用POST请求的步骤：

2.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2.2 初始化请求

xhr.open('POST', 'url', true);

2.3 设置请求头

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

2.4 设置响应类型

xhr.responseType = 'json'; // 或者 'text', 'document' 等

2.5 处理响应

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.error('The request was successful, but the response was not OK.');
  }
};

2.6 发送请求

xhr.send('param1=value1&param2=value2');

3. PUT请求

PUT请求用于更新服务器上的资源。以下是使用PUT请求的步骤：

3.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

3.2 初始化请求

xhr.open('PUT', 'url', true);

3.3 设置请求头

xhr.setRequestHeader('Content-Type', 'application/json');

3.4 设置响应类型

xhr.responseType = 'json'; // 或者 'text', 'document' 等

3.5 处理响应

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.error('The request was successful, but the response was not OK.');
  }
};

3.6 发送请求

xhr.send(JSON.stringify({ key: 'value' }));

4. DELETE请求

DELETE请求用于删除服务器上的资源。以下是使用DELETE请求的步骤：

4.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

4.2 初始化请求

xhr.open('DELETE', 'url', true);

4.3 设置响应类型

xhr.responseType = 'json'; // 或者 'text', 'document' 等

4.4 处理响应

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.error('The request was successful, but the response was not OK.');
  }
};

4.5 发送请求

xhr.send();

5. PATCH请求

PATCH请求用于更新服务器上的资源的一部分。以下是使用PATCH请求的步骤：

5.1 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

5.2 初始化请求

xhr.open('PATCH', 'url', true);

5.3 设置请求头

xhr.setRequestHeader('Content-Type', 'application/json');

5.4 设置响应类型

xhr.responseType = 'json'; // 或者 'text', 'document' 等

5.5 处理响应

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.error('The request was successful, but the response was not OK.');
  }
};

5.6 发送请求

xhr.send(JSON.stringify({ key: 'value' }));

通过以上5种请求方法，你可以轻松实现网页与服务器之间的数据交互。在实际开发中，根据需求选择合适的请求方法，可以使你的Web应用更加高效和便捷。