Javascript Ajax 获取

Ajax（Asynchronous Javascript and XML）是指使用Javascript以异步的方式向服务器发送请求，并在页面不必刷新的情况下获取所需信息的一种技术。

在前端开发中，我们经常需要使用Ajax来获取后端数据，以实现动态展示数据、实时更新等效果。

XMLHttpRequest

在Javascript中，我们可以使用XMLHttpRequest对象来发送Ajax请求。如下是一个基本的使用示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

• 首先，我们使用new XMLHttpRequest()创建一个XMLHttpRequest对象。
• 然后，使用open()方法设置请求方式和请求URL。这里使用了GET方式，并请求了/api/data的数据。
• 接着，设置了一个onreadystatechange事件，在Ajax请求状态变化时会被触发。其中，readyState表示Ajax的状态，status表示请求的状态码。
• 最后，使用send()方法发送请求。

在上面的示例中，我们使用了简单的GET请求方式。如果需要使用其他请求方式，如POST、DELETE等，只需要在open()方法中设置即可。

jQuery Ajax

由于原生Javascript的Ajax使用起来比较麻烦，一些第三方库如jQuery提供了更加简便的方式来使用Ajax。如下是一个基本的jQuery Ajax示例：

$.ajax({
  url: '/api/data',
  type: 'GET',
  success: function (data) {
    console.log(data);
  }
});

• 首先，我们使用$.ajax()方法发起一个Ajax请求。其中，url表示请求URL，type表示请求方式，这里使用了GET方式。
• 接着，设置了一个success回调函数，当请求成功时会被调用。data参数表示服务器返回的数据。

同样的，如果需要使用其他请求方式，也可以在type参数中进行设置。

Fetch Api

除了原生Javascript和jQuery Ajax，现在也有一种新的方式来发送Ajax请求，那就是使用Fetch Api。Fetch Api是一种基于Promise实现的网络请求接口，其使用方式如下：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

可以看到，Fetch Api相比原生Javascript和jQuery Ajax更简洁明了，虽然在语法上有所不同，但其实本质上是一样的。

总结

JavaScript Ajax获取通常采用XMLHttpRequest、jQuery Ajax和Fetch Api等方式，以上介绍了在这三种方式下发送Ajax请求的基本使用方法。当然，在实际开发中，我们还需要考虑到一些细节问题，如请求的数据格式、请求数据的安全性、请求失败的处理等等。