前端 javascript 实现原生 ajax 的方法有哪些

实现原生AJAX的方法主要有两种，分别是XMLHttpRequest对象和Fetch API。XMLHttpRequest对象是较传统的方法，提供了在客户端与服务器之间交换数据的能力，不需要刷新页面即可更新网页。与之相对较新的方法是Fetch API，它提供了一个更简洁、更强大的操作网络请求的接口。在介绍这两种方法的特点与使用方式前，先对XMLHttpRequest对象进行详细描述。

XMLHttpRequest对象（简称XHR）允许网页与服务器进行数据交换，使得网页能够动态更新。利用XHR对象可以从服务器请求数据、发送数据到服务器，这一切都可以异步进行。当使用XHR发起请求后，浏览器会创建一个后台的请求，待收到服务器响应后，就会触发指定的回调函数处理数据。这使得开发者能够实现页面的局部刷新而非整页刷新，极大地提高了用户体验。

一、XMLHTTPREQUEST对象

XMLHttpRequest对象创建方式简单，早已被广泛应用在AJAX技术中。使用时首先需要实例化XMLHttpRequest对象。

• 实例化对象与发起请求

  var xhr = new XMLHttpRequest();
  
  // 配置请求类型、URL及是否异步
  xhr.open('GET', 'example.com', true);
  

  在实例化XMLHttpRequest对象后，通过调用其open方法配置请求的类型（如GET或POST）、请求的URL以及是否采用异步方式。

• 处理响应

  xhr.onreadystatechange = function() {
  
    // 判断请求是否完成
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send();
  

  在发送请求前，需要设置一个onreadystatechange事件处理函数，用于监听请求的状态变化。一旦xhr.readyState属性变为4且HTTP状态码为200，表示请求成功，我们便可通过xhr.responseText获取到响应的数据。

二、FETCH API

Fetch API作为一个新兴的网络请求API，提供了一个更为现代、功能丰富的接口来处理网络请求。与XMLHttpRequest相比，Fetch API基于Promise，使得处理异步操作更为方便。

• 基本使用

  fetch('example.com')
  
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  

  Fetch API通过fetch函数接收请求的URL作为参数。它返回一个Promise对象，可以通过.then()方法处理成功的响应和.catch()方法处理可能出现的异常。

• 配置请求

  fetch('example.com', {
  
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({key: 'value'})
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  

  与XHR类似，Fetch也支持配置请求的类型、头信息等。这通过向fetch函数传递第二个参数完成，这个参数是一个配置对象，可以指定方法、头信息、请求体等。

三、XHR与FETCH比较

• 兼容性与使用：虽然Fetch API的语法更加现代简洁，但XMLHttpRequest在旧版本浏览器中的兼容性更好。Fetch API受现代浏览器支持，但在一些旧浏览器中可能需要polyfill来实现。

• 基于Promise：与XMLHttpRequest相比，Fetch API的最大优势在于其基于Promise，这使得异步代码更加简洁、易于管理。

对前端开发者而言，了解并掌握XMLHttpRequest对象和Fetch API的使用，是进行网络请求操作的基础。两者各有千秋，选择合适的方法根据项目需求和浏览器兼容性进行考量。通过异步技术和这些API的结合使用，可以实现更丰富的用户交互以及数据处理逻辑，为用户带来更加流畅和丰富的Web体验。

相关问答FAQs：

1. 如何使用 JavaScript 实现原生的 AJAX 请求？

在 JavaScript 中实现原生的 AJAX 请求可以使用 XMLHttpRequest 对象。这个对象可以和服务器进行数据交互，实现异步的数据请求和响应。通过创建 XMLHttpRequest 对象、设置请求的方法、URL以及回调函数，我们可以发送请求并获取响应数据。

示例代码如下：

const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象

xhr.open('GET', 'http://www.example.com/api/data', true); // 设置请求方法、URL和是否异步
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText); // 在这里处理响应数据
  }
};
xhr.send(); // 发送请求

2. 使用 JavaScript 原生实现 AJAX 有什么优势？

使用 JavaScript 原生实现 AJAX 请求具有以下优势：

• 兼容性好：几乎所有的现代浏览器都支持 XMLHttpRequest 对象，因此可以确保你的代码在大部分环境中正常运行。
• 可控性强：使用原生的 AJAX 可以更加精确地控制请求和响应过程，根据自己的需求来进行定制和优化。
• 性能高：原生 AJAX 请求通常会比使用第三方库或框架的方式更轻量高效，减少不必要的开销。

3. 原生 JavaScript AJAX 和使用 jQuery 的 AJAX 有什么区别？

原生 JavaScript AJAX 和使用 jQuery 的 AJAX 在使用上有一些区别：

• 代码的书写方式：原生 JavaScript AJAX 的代码相对较为繁琐，需要手动创建 XMLHttpRequest 对象，设置请求参数和回调函数等；而使用 jQuery 的 AJAX 只需要调用简单的方法即可完成请求，代码更加简洁。
• 兼容性：原生 JavaScript AJAX 在大部分现代浏览器中都能正常运行，而 jQuery 的 AJAX 更加兼容一些旧版本的浏览器。
• 功能扩展：通过使用 jQuery 的 AJAX，你可以轻松地进行跨域请求、发送 JSONP 请求和实现更复杂的请求交互。而原生 JavaScript AJAX 需要自行编写相关代码来实现这些功能。

总的来说，选择使用原生 JavaScript AJAX 还是 jQuery 的 AJAX 取决于你的项目需求、兼容性要求和个人编码习惯。