当前位置: 首页 > news >正文

疯狂前端面试题(四)

一、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 攻击)。

示例
<!-- HTML 示例 -->
<script>
  function handleResponse(data) {
    console.log(data); // 输出返回的数据
  }
</script>
<script src="https://api.example.com/data?callback=handleResponse"></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));

跨域问题及解决方案

1. 同源策略
浏览器的安全机制限制了不同源(协议、域名、端口)之间的直接通信。

2. 解决方案
- **CORS(跨域资源共享)**:
  - 服务器通过设置响应头(如 `Access-Control-Allow-Origin`)允许特定来源访问资源。
  - 支持所有 HTTP 方法。
  
- **JSONP**:
  - 使用 `<script>` 标签绕过同源策略,但仅支持 GET 请求。

- **代理服务器**:
  - 在后端搭建一个代理服务器,转发跨域请求。

- **WebSocket**:
  - WebSocket 协议不受同源策略限制,适合实时通信场景。

总结

Ajax ,原生技术,灵活但代码较复杂 ,需服务器配合 CORS ,需兼容旧浏览器的项目 
JSONP  ,简单易用,仅支持 GET 请求,支持,简单的跨域 GET 请求 
JSON,数据格式,轻量高效 ,不涉及跨域 ,数据传输  
Fetch,现代化接口,基于 Promise , 需服务器配合 CORS ,现代浏览器项目 
Axios,功能强大,易用性强 ,需服务器配合 CORS,复杂的前后端交互  

相关文章:

疯狂前端面试题(四)

一、Ajax、JSONP、JSON、Fetch 和 Axios 技术详解 1. Ajax&#xff08;异步 JavaScript 和 XML&#xff09; 什么是 Ajax&#xff1f; Ajax 是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过 XMLHttpRequest 对象实现。 优点 - 支持同步和异步请求。 - 能…...

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-metrics.py

metrics.py ultralytics\utils\metrics.py 目录 metrics.py 1.所需的库和模块 2.def bbox_ioa(box1, box2, iouFalse, eps1e-7): 3.def box_iou(box1, box2, eps1e-7): 4.def bbox_iou(box1, box2, xywhTrue, GIoUFalse, DIoUFalse, CIoUFalse, eps1e-7): 5.def mas…...

SuperCopy解除网页禁用复制功能插件安装和使用

点击下载《SuperCopy解除网页禁用复制功能插件》 1. 前言 在当今数字化时代&#xff0c;网络已成为我们获取信息和知识的主要渠道。互联网如同一片浩瀚无垠的知识海洋&#xff0c;蕴藏着无数的资源&#xff0c;从学术论文到生活小窍门&#xff0c;从专业教程到娱乐资讯&#…...

UP-VLA:具身智体的统一理解与预测模型

25年1月来自清华大学和上海姚期智研究院的论文“UP-VLA: A Unified Understanding and Prediction Model for Embodied Agent”。 视觉-语言-动作 (VLA) 模型的最新进展&#xff0c;利用预训练的视觉语言模型 (VLM) 来提高泛化能力。VLM 通常经过视觉语言理解任务的预训练&…...

Unity 基于状态机的逻辑控制详解

状态机是游戏开发中常用的逻辑控制方法&#xff0c;它可以将复杂的逻辑分解成多个独立的状态&#xff0c;并通过状态转移来控制逻辑的执行流程。本文将详细介绍如何在 Unity 中基于状态机实现逻辑控制&#xff0c;并提供技术详解和代码实现。 一、状态机简介 1.1 基本概念 状…...

傅里叶单像素成像技术研究进展

摘要&#xff1a;计算光学成像&#xff0c;通过光学系统和信号处理的有机结合与联合优化实现特定成像特性的成像系统&#xff0c;摆脱了传统成像系统的限制&#xff0c;为光学成像技术添加了浓墨重彩的一笔&#xff0c;并逐步向简单化与智能化的方向发展。单像素成像(Single-Pi…...

IDEA接入DeepSeek

IDEA 目前有多个途径可以接入deepseek&#xff0c;比如CodeGPT或者Continue&#xff0c;这里借助CodeGPT插件接入&#xff0c;CodeGPT目前用的人最多&#xff0c;相对更稳定 一、安装 1.安装CodeGPT idea插件市场找到CodeGPT并安装 2.创建API Key 进入deepseek官网&#xf…...

前端如何判断浏览器 AdBlock/AdBlock Plus(最新版)广告屏蔽插件已开启拦截

2个月前AdBlock/AdBlock Plus疑似升级了一次 因为自己主要负责面对海外的用户项目&#xff0c;发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了&#xff0c;于是专门研究了一下。并尝试了很多方法。 已失效的老方法 // 定义一个检测 AdBlock 的函数 function chec…...

macOS 上部署 RAGFlow

在 macOS 上从源码部署 RAGFlow-0.14.1&#xff1a;详细指南 一、引言 RAGFlow 作为一款强大的工具&#xff0c;在人工智能领域应用广泛。本文将详细介绍如何在 macOS 系统上从源码部署 RAGFlow 0.14.1 版本&#xff0c;无论是开发人员进行项目实践&#xff0c;还是技术爱好者…...

如何在Kickstart自动化安装完成后ISO内拷贝文件到新系统或者执行命令

如何在Kickstart自动化安装完成后ISO内拷贝文件到新系统或者执行命令 需求 在自动化安装操作系统完成后&#xff0c;需要对操作系统进行配置需要拷贝一些文件到新的操作系统中需要运行一些脚本 问题分析 Linux安装操作系统时&#xff0c;实际上是将ISO镜像文件中的操作系统…...

在服务器部署JVM后,如何评估JVM的工作能力,比如吞吐量

在服务器部署JVM后&#xff0c;评估其工作能力&#xff08;如吞吐量&#xff09;可以通过以下步骤进行&#xff1a; 1. 选择合适的基准测试工具 JMH (Java Microbenchmark Harness)&#xff1a;适合微基准测试&#xff0c;测量特定代码片段的性能。Apache JMeter&#xff1a;…...

攻防世界32 very_easy_sql【SSRF/SQL时间盲注】

不太会&#xff0c;以后慢慢看 被骗了&#xff0c;看见very_easy就点进来了&#xff0c;结果所有sql能试的全试了一点用都没有 打开源代码发现有个use.php 好家伙&#xff0c;这是真的在考sql吗...... 制作gopher协议的脚本&#xff1a; import urllib.parsehost "12…...

STM32G474--Whetstone程序移植(双精度)笔记

1 获取Whetstone程序 Whetstone程序&#xff0c;我用github被墙了&#xff0c;所以用了KK的方式。 获取的程序目录如上所示。 2 新建STM32工程 配置如上&#xff0c;生成工程即可。 3 在生成的工程中添加并修改Whetstone程序 3.1 实现串口打印功能 在生成的usart.c文件中…...

【DeepSeek × Postman】请求回复

新建一个集合 在 Postman 中创建一个测试集合 DeepSeek API Test&#xff0c;并创建一个关联的测试环境 DeepSeek API Env&#xff0c;同时定义两个变量 base_url 和 api_key 的步骤如下&#xff1a; 1. 创建测试集合 DeepSeek API Test 打开 Postman。点击左侧导航栏中的 Co…...

开源身份和访问管理方案之keycloak(一)快速入门

文章目录 什么是IAM什么是keycloakKeycloak 的功能 核心概念client管理 OpenID Connect 客户端 Client Scoperealm roleAssigning role mappings分配角色映射Using default roles使用默认角色Role scope mappings角色范围映射 UsersGroupssessionsEventsKeycloak Policy创建策略…...

基于PaddleOCR的图像文字识别与程序打包方法

目录 一、基本介绍 二、程序实现 1&#xff09;环境配置 2&#xff09;代码实现 3&#xff09;程序运行结果 三、程序打包 1&#xff09;使用pyinstaller打包程序 2&#xff09;添加依赖和模型数据 四、需要注意的问题 五、总结 一、基本介绍 本文主要介绍利用现有开源…...

单片机上SPI和IIC的区别

SPI&#xff08;Serial Peripheral Interface&#xff09;和IC&#xff08;Inter-Integrated Circuit&#xff09;是两种常用的嵌入式外设通信协议&#xff0c;它们各有优缺点&#xff0c;适用于不同的场景。以下是它们的详细对比&#xff1a; — 1. 基本概念 SPI&#xff0…...

Python 字典(一个简单的字典)

在本章中&#xff0c;你将学习能够将相关信息关联起来的Python字典。你将学习如何访问和修改字典中的信息。鉴于字典可存储的信息量几乎不受限制&#xff0c;因此我们会演示如何遍 历字典中的数据。另外&#xff0c;你还将学习存储字典的列表、存储列表的字典和存储字典的字典。…...

一个简单的Windows TCP服务器实现

初始化 WSADATA wsaData; SOCKET serverSocket, clientSocket; struct sockaddr_in serverAddr { 0x00 }; struct sockaddr_in clientAddr { 0x00 }; int clientAddrLen sizeof(clientAddr);if (WSAStartup(MAKEWORD(2, 2), &wsaData) ! 0) {printf("WSAStartup f…...

Node.js笔记入门篇

黑马程序员视频地址&#xff1a; Node.js与Webpack-01.Node.js入门 基本认识 概念 定义&#xff1a;Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境, 它让开发人员能够创建服务器 Web 应用、命令行工具和脚本 作用&#xff1a;使用Node.js 编写服务器端程序 ✓ …...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...