当前位置: 首页 > 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 编写服务器端程序 ✓ …...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...