Ajax发送和接收请求

​Ajax发送和接收请求是现代前端开发中非常常用且重要的技术。在本文中，我们将详细讲解如何使用Ajax发送和接收请求。

准备工作

在开始使用Ajax发送和接收请求之前，需要先准备好以下工作：

• 引入jQuery等JavaScript库。
• 编写后端接口，用于接收请求并返回数据。
• 编写前端页面，用于发送Ajax请求和展示返回的数据。

Ajax发送请求

使用Ajax发送请求主要有以下步骤：

1. 创建XMLHttpRequest对象

使用XMLHttpRequest对象可以向服务器发送请求并接收服务器的响应。创建对象的代码如下：

var xhr = new XMLHttpRequest();

1. 设置请求参数

在创建好对象之后，需要设置请求参数，包括请求的URL、请求的方法、请求是否异步等。代码如下：

xhr.open('GET', '/api/user?id=1', true);

其中，第一个参数是请求的方法（GET/POST），第二个参数是请求的URL，第三个参数表示请求是否异步。

1. 发送请求

设置好请求参数之后，需要使用send()方法发送请求。代码如下：

xhr.send();

1. 监听响应状态

在服务器返回响应之前，需要监听响应状态，以确保请求已经成功发送。代码如下：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

其中，readyState是XHR对象的状态码，状态码为4表示响应已经返回。status则表示请求的状态码，状态码200表示请求成功。

Ajax接收请求

使用Ajax接收请求主要需要以下步骤：

1. 编写后端接口

在后台服务器中，需要编写接口用于接收前端发送的请求，并返回数据。例如，假设我们编写了一个/api/user的接口，用于获取用户信息。

1. 响应请求并返回数据

在接收到请求之后，后端需要根据请求参数获取数据，并将数据返回给前端。例如，使用Node.js和Express框架编写的接口代码如下：

app.get('/api/user', function(req, res) {
  var id = req.query.id;
  var user = getUser(id);
  res.send(user);
});

其中，req.query.id获取请求参数中的id值，getUser(id)用于从数据库中获取对应的用户数据，最后使用res.send(user)将数据返回给前端。

1. 解析响应数据

在前端页面中，需要解析服务器返回的JSON数据，并将数据渲染到页面上。例如，假设我们使用jQuery解析服务器返回的数据并展示在页面上，代码如下：

$.get('/api/user?id=1', function(data) {
  $('#user-name').text(data.name);
  $('#user-age').text(data.age);
});

其中，$.get()为jQuery提供的发送AJAX请求的方法，function(data)为请求成功时的回调函数，在回调函数中解析JSON数据，并将用户姓名和年龄分别赋值给#user-name和#user-age元素。

示例一：发送GET请求

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

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user?id=1', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

在这个示例中，我们使用XMLHttpRequest对象发送了一个GET请求到/api/user?id=1的接口，通过监听readyState为4和status为200的响应，输出了返回的数据。

示例二：发送POST请求

下面是一个使用Ajax发送POST请求的完整示例：

var 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);
  }
};
var data = {name: 'Tom', age: 18};
xhr.send(JSON.stringify(data));

在这个示例中，我们使用XMLHttpRequest对象发送了一个POST请求到/api/user的接口，并设置了请求头类型为application/json。将请求参数{name: 'Tom', age: 18}转为JSON格式，并发送到服务器。通过监听readyState为4和status为200的响应，输出了返回的数据。

以上就是使用Ajax发送和接收请求的完整攻略，希望对你有所帮助！