前端面试必备 | Ajax/Fetch篇（P1-15）

文章目录

1. 解释 Ajax 的含义及其核心原理。
2. Ajax 是如何实现异步数据交互的？请描述整个 Ajax 请求的过程。
3. 比较 Ajax、fetch 和 axios 的异同点。
4. Ajax 中的跨域请求是如何处理的？请提供几种解决跨域问题的方法。
5. 什么是 JSONP？如何使用 JSONP 进行跨域请求？
6. fetch 方法返回一个 Promise 对象，你可以描述一下 Promise 的用途和如何处理 fetch 请求返回的数据？
7. 请解释一下什么是 CORS？在 Ajax 请求中如何处理 CORS 问题？
8. 在进行 Ajax 请求时，常见的请求类型有哪些？它们的作用是什么？
9. Ajax 是什么？它的主要特点是什么？如何使用 Ajax 发送 GET 和 POST 请求？
10. 在使用 fetch 函数进行网络请求时，如何处理错误和异常情况？
11. 如何取消一个正在进行中的 Ajax 请求？
12. 在使用 Ajax 请求时，什么是同步请求和异步请求？它们有什么区别？
13. 解释一下 Ajax 的优缺点，以及在哪些场景下可以使用它。
14. 在使用 Ajax 请求时，如何更好地处理和展示加载中和加载完成的状态？
15. 在使用 Ajax 请求时，如何处理并展示服务器返回的错误信息？

1. 解释 Ajax 的含义及其核心原理。

AJAX（Asynchronous JavaScript and XML）是一种在前端实现异步数据交互的技术。

它允许在不刷新整个网页的情况下，通过后台服务器进行数据的获取、发送和更新。

Ajax 的核心原理是利用浏览器提供的 XMLHttpRequest 对象（现在也可以使用 Fetch API 或 axios 等替代）与服务器进行通信。

它通过以下步骤实现异步数据交互：

1. 创建 XMLHttpRequest 对象（或使用现代的 Fetch API 或 axios 库）。
2. 定义请求的类型（GET、POST等）和目标服务器的 URL。
3. 设置回调函数，用于处理从服务器返回的数据。
4. 调用 XMLHttpRequest 对象的 open() 方法，指定请求的类型和目标 URL。
5. 发送请求到服务器，可以传递参数或数据。
6. 等待服务器响应，当服务器响应返回后，触发回调函数进行处理。
7. 在回调函数中对返回的数据进行处理，可以更新页面内容或执行其他操作。

通过以上步骤，AJAX 能够在后台与服务器进行异步通信，并根据服务器的响应更新页面内容，而无需刷新整个页面。

Ajax 的好处在于能够提供更好的用户体验和性能优化。通过异步请求，可以在后台与服务器进行数据交互，而不需要刷新整个页面。这意味着用户可以在等待服务器响应时继续与页面交互，同时减少了不必要的数据传输，提高了页面加载速度和响应性能。

Ajax 并不一定需要使用 XML 格式的数据交换，现在更常用的是 JSON 或其他格式。因此，AJAX 有时也被解释为 "Asynchronous JavaScript and (JSON/XML)"，表示异步 JavaScript 和 JSON/XML 数据的交互。

2. Ajax 是如何实现异步数据交互的？请描述整个 Ajax 请求的过程。

Ajax 实现异步数据交互的过程可以分为以下步骤：

1. 创建 XMLHttpRequest 对象：使用 JavaScript 创建一个 XMLHttpRequest 对象，或者使用现代的 Fetch API 或 axios 等方法来进行异步请求。

2. 定义请求的类型和目标 URL：使用 XMLHttpRequest 的 open() 方法，指定请求的类型（如 GET、POST 等）和目标服务器的 URL。可以在 URL 中传递参数或数据。

3. 设置回调函数：使用 XMLHttpRequest 的 onreadystatechange 属性指定一个回调函数，该函数将在请求状态发生变化时被调用。通常，还需要设置 readyState 状态为 4（表示请求已完成）和 status 状态为 200（表示请求成功）时执行的回调处理函数。

4. 发送请求到服务器：使用 XMLHttpRequest 的 send() 方法，将请求发送到服务器。对于 POST 请求，可以在 send() 方法中传递数据作为请求的实体部分。

5. 处理服务器响应：当服务器接收到请求并返回响应时，XMLHttpRequest 对象的状态将发生变化，触发 onreadystatechange 事件，从而调用之前设置的回调函数。可以通过 XMLHttpRequest 的 readyState 和 status 属性来检查请求的状态和结果。

6. 处理返回的数据：在回调函数中，可以使用 XMLHttpRequest 的 responseText 或 responseXML 属性来获取服务器返回的数据。根据数据的格式（如文本、XML 或 JSON），进行相应的处理和解析。

7. 更新页面内容：根据返回的数据，动态更新页面的指定部分而不用刷新整个页面。通过 JavaScript 操作 DOM，可以将获取的数据插入到页面中的特定元素或执行其他操作，实现页面的动态刷新。

整个 Ajax 请求过程是异步的，即在发送请求后，浏览器不会等待响应返回就继续执行后续的 JavaScript 代码。这样可以实现在后台与服务器进行数据交互的同时，用户可以继续与页面进行交互，提升用户体验和性能。

3. 比较 Ajax、fetch 和 axios 的异同点。

Ajax、fetch 和 axios 都是用于实现异步数据交互的技术，但它们在语法、功能和用法上存在一些异同点：

Ajax:

• 基于原生的 XMLHttpRequest 对象，也可以使用 ActiveXObject（兼容性较差）。
• 需要手动处理各个步骤，如创建 XMLHttpRequest 对象、设置回调函数等。
• 可以对请求进行更细粒度的控制，如设置请求头、超时时间等。
• 回调函数传统上采用 onreadystatechange 事件处理，需要手动判断请求状态和处理结果。
• 在兼容性和底层控制方面更加灵活，但使用起来相对繁琐。

Fetch API:

• 是现代的异步请求接口，提供了更简洁的语法。
• 基于 Promise，支持链式调用，更符合现代 JavaScript 开发的风格。
• 提供了更强大的功能，如请求和响应的拦截、上传和下载进度的监控等。
• 具有更好的可读性，更易于理解和使用。
• 需要手动处理响应状态，使用 Promise 的 then() 方法处理返回的结果。

Axios:

• 是一个基于 Promise 的 HTTP 客户端库，封装了原生的 XMLHttpRequest 或 Fetch API。
• 提供了更简单、一致的 API，使用起来更方便，具有易于使用的接口。
• 支持请求和响应的拦截器，可以全局或局部地对请求和响应进行拦截和处理。
• 具有更高的可配置性，可以设置请求超时时间、请求头等。
• 支持请求的取消、并行请求等功能。
• 在处理错误时提供了更丰富的功能，如处理 HTTP 错误状态码、网络错误等。

总结起来

• Ajax 是一种基于原生 XMLHttpRequest 实现的异步请求技术，需要手动处理请求的各个步骤。
• Fetch API 是现代的异步请求接口，提供了更简洁的语法和更强大的功能。
• Axios 是一个基于 Promise 的 HTTP 客户端库，封装了原生的 XMLHttpRequest 或 Fetch API，并提供了更简单、一致的 API、更高的可配置性和错误处理功能。

PS：选择使用哪种技术取决于具体的需求和个人偏好。

下面是一个使用表格简单总结 Ajax、fetch 和 axios 的异同点：

需要注意，这里的表格仅提供了一个简单的总结，实际上每种技术都有更多的特性和用法可以进一步探索和比较。

4. Ajax 中的跨域请求是如何处理的？请提供几种解决跨域问题的方法。

在传统的Ajax中，浏览器执行同源策略（Same-Origin Policy），该策略要求JavaScript只能在同一个源（协议、域名、端口）下进行通信。跨域请求是指在不同源之间进行Ajax请求。

为了解决跨域问题，有几种常见的方法：

1. JSONP（JSON with Padding）: JSONP利用<script>标签可以跨域加载外部脚本的特性，通过动态创建<script>标签并指定跨域的URL，返回的数据需要包装在一个预先定义好的回调函数中。这种方法不是真正的Ajax请求，而是利用脚本的方式获取数据。

2. CORS（Cross-Origin Resource Sharing）: CORS是在服务器端进行配置，允许指定的域名进行跨域访问。服务器通过设置相应的响应头，例如Access-Control-Allow-Origin，来允许特定的源进行访问。

3. 代理服务器: 可以设置一个位于同源的服务器作为代理服务器，然后将Ajax请求发送给代理服务器，代理服务器再转发请求到目标服务器，并将响应返回给客户端。因为是同源请求，所以不会存在跨域问题。

4. WebSocket: 可以使用WebSocket协议进行跨域通信，WebSocket提供了全双工通信的能力，不受同源策略的限制。

5. 通过修改服务器配置: 在一些情况下，可以通过修改服务器的配置来允许跨域请求。例如，在Apache服务器上可以使用.htaccess文件添加相应的Header设置。

需要根据具体的情况选择适合的方法来解决跨域问题。跨域请求涉及到安全性问题，因此在实际应用时需要考虑安全风险，并根据具体情况选择适当的解决方案。

5. 什么是 JSONP？如何使用 JSONP 进行跨域请求？

JSONP（JSON with Padding）是一种用于解决跨域请求的技术，它利用了<script>标签可以跨域加载外部脚本的特性。

在使用JSONP进行跨域请求时，服务器端需要返回一个JavaScript函数调用，并将需要传递的数据作为参数传递给该函数。客户端通过在文档中动态创建一个<script>标签，并在其src属性中指定跨域请求的URL，同时定义一个全局的回调函数，服务器返回的数据会作为回调函数的参数，从而实现了跨域数据获取。

下面是一个使用JSONP进行跨域请求的示例：

客户端代码：

function handleResponse(data) {
  // 处理返回的数据
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器端返回的数据：

handleResponse({ "name": "John", "age": 30 });

在这个示例中，客户端会向http://api.example.com/data发送一个跨域请求，并指定了回调函数名为handleResponse。服务器返回的数据将被包裹在回调函数中，例如handleResponse({ "name": "John", "age": 30 })。客户端通过动态创建<script>标签加载跨域请求的URL，服务器返回的数据将会自动执行回调函数handleResponse，从而将数据传递给客户端进行处理。

需要注意的是，JSONP只支持GET请求，因为它是通过动态创建<script>标签来获取数据的。此外，使用JSONP时要确保信任接收的数据源，以避免安全风险。

6. fetch 方法返回一个 Promise 对象，你可以描述一下 Promise 的用途和如何处理 fetch 请求返回的数据？

Promise是JavaScript中处理异步操作的一种机制。

它表示一个异步操作的最终完成或失败，并可以用于处理和组织异步代码。

Promise对象可以处于以下三个状态之一：

1. Pending（进行中）: 初始状态，表示异步操作还未完成，Promise还没有被解决或拒绝。

2. Fulfilled（已完成）: 表示异步操作成功完成，Promise被解决。

3. Rejected（已拒绝）: 表示异步操作失败，Promise被拒绝。

Promise的主要用途是简化异步操作的处理和编写。 它提供了一种结构化的方式来处理异步代码，通过使用.then()和.catch()方法，可以更清晰地进行流程控制和错误处理。

关于如何处理fetch请求返回的数据，fetch方法返回一个Promise对象，我们可以使用Promise的方法链来处理fetch的结果。fetch返回的Promise对象在成功时会执行then()方法，在失败时会执行catch()方法。

例如，我们可以这样处理fetch请求返回的数据：

fetch('https://api.example.com/data') // 发起fetch请求
  .then(response => {
    // 处理成功响应
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json(); // 解析响应的JSON数据
  })
  .then(data => {
    // 处理解析后的数据
    console.log(data);
  })
  .catch(error => {
    // 处理请求失败或解析数据出错
    console.error(error);
  });

在上述示例中，我们使用fetch方法发起了一个GET请