疯狂前端面试题(四)

一、Ajax、JSONP、JSON、Fetch 和 Axios 技术详解

1. Ajax（异步 JavaScript 和 XML）

什么是 Ajax？

Ajax 是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过 `XMLHttpRequest` 对象实现。

优点

支持同步和异步请求。
能够发送和接收多种格式的数据（如 JSON、XML 等）。

缺点

原生代码较复杂。
不支持跨域请求（需要服务器配置 CORS 或使用 JSONP）。

示例

// 创建 XMLHttpRequest 对象

const xhr = new XMLHttpRequest();

// 配置请求

xhr.open('GET', 'https://api.example.com/data', true);

// 设置响应类型

xhr.responseType = 'json';

// 处理响应

xhr.onload = function () {

if (xhr.status === 200) {

console.log(xhr.response); // 输出返回的 JSON 数据

} else {

console.error('Error:', xhr.status);

}

};

// 发送请求

xhr.send();

2. JSONP（JSON with Padding）

什么是 JSONP？

JSONP 是一种绕过浏览器同源策略的方法，通过 `<script>` 标签加载跨域资源，并将返回的数据作为函数参数传递。

优点

可以实现跨域请求。
简单易用。

缺点

只支持 GET 请求。
安全性较低（容易受到 XSS 攻击）。

示例

function handleResponse(data) {

console.log(data); // 输出返回的数据

}

</script>

3. JSON（JavaScript Object Notation）

什么是 JSON？

JSON 是一种轻量级的数据交换格式，易于阅读和编写，也易于机器解析和生成。

用途

作为前后端交互的数据格式。
可以通过 `JSON.parse()` 将字符串转换为对象，通过 `JSON.stringify()` 将对象转换为字符串。

示例

// JSON 字符串

const jsonString = '{"name": "Alice", "age": 25}';

// 转换为对象

const obj = JSON.parse(jsonString);

console.log(obj.name); // 输出: Alice

// 转换回 JSON 字符串

const str = JSON.stringify(obj);

console.log(str); // 输出: {"name":"Alice","age":25}

4. Fetch API

什么是 Fetch？

Fetch 是现代浏览器提供的一个更简洁、强大的接口，用于发起网络请求。它基于 Promise 设计，支持链式调用。

优点

更现代化，基于 Promise。
支持多种 HTTP 方法（GET、POST 等）。
自动解析响应为 JSON。

缺点

不支持 IE 浏览器。
错误处理需要手动检查状态码。

示例

fetch('https://api.example.com/data', {

method: 'GET', // 请求方法

headers: { 'Content-Type': 'application/json' }, // 请求头

})

.then(response => {

if (!response.ok) throw new Error('Network response was not ok');

return response.json(); // 解析为 JSON

})

.then(data => console.log(data)) // 处理数据

.catch(error => console.error('Error:', error)); // 捕获错误

5. Axios

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。它提供了比 Fetch 更丰富的功能。

优点

支持自动转换 JSON 数据。
内置拦截器，便于请求和响应的预处理。
支持取消请求。
兼容所有主流浏览器。

缺点

需要额外引入库。

示例

// 安装 Axios

// npm install axios

import axios from 'axios';

// 发起 GET 请求

axios.get('https://api.example.com/data')

.then(response => {

console.log(response.data); // 输出返回的数据

})

.catch(error => {

console.error('Error:', error);

});

// 发起 POST 请求

axios.post('https://api.example.com/data', {

name: 'Alice',

age: 25,

})

.then(response => console.log(response.data))

.catch(error => console.error('Error:', error));

跨域问题及解决方案

同源策略

浏览器的安全机制限制了不同源（协议、域名、端口）之间的直接通信。

解决方案

**CORS（跨域资源共享）**：
服务器通过设置响应头（如 `Access-Control-Allow-Origin`）允许特定来源访问资源。
支持所有 HTTP 方法。
**JSONP**：
使用 `<script>` 标签绕过同源策略，但仅支持 GET 请求。
**代理服务器**：
在后端搭建一个代理服务器，转发跨域请求。
**WebSocket**：
WebSocket 协议不受同源策略限制，适合实时通信场景。

总结

Ajax ，原生技术，灵活但代码较复杂，需服务器配合 CORS ，需兼容旧浏览器的项目

JSONP ，简单易用，仅支持 GET 请求，支持，简单的跨域 GET 请求

JSON，数据格式，轻量高效，不涉及跨域，数据传输

Fetch，现代化接口，基于 Promise ，需服务器配合 CORS ，现代浏览器项目

Axios，功能强大，易用性强，需服务器配合 CORS，复杂的前后端交互