前后端交互：发起网络请求(xhr、ajax、fetch、axios)，跨域问题(jsonp、cors、配置代理)，数据交换格式(XML、JNON)，异步编程(Promise、asyn)
2023-09-11 14:21:26 时间
一、前后端交互模式
1、前后端交互的方法
前后端交互的方法有：xhr、jQuery、fetch、axios
| 方法 | 原理 | 特点 | 详细文章 |
|---|---|---|---|
| 原生ajax | 在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式 | 比较麻烦 | XMLHttpRequest的基本使用 |
| 基于jQuery的ajax | 二次封装xhr | jQuery的核心是操作DOM | jQuery中的Ajax的3种方法 |
| fetch | 基于Promise来实现的 | 标准化组织制定的，返回的值包裹着两层then | fetch的基本用法、请求参数及响应结果 |
| axios | axios是一个基于promise的专门用于网络请求的库 | 比fetch更强大，前端两大框架Vue和React官方都推荐使用axios发送ajax请求 | axios基本用法、如何二次封装axios？ |
2、HTTP请求方式
① GET 查询
② POST 添加
③ PUT 修改
④ DELETE 删除
二、解决跨域请求
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
实现跨域数据请求，最主要的两种解决方案，分别是JSONP 和 CORS
| 方法 | 原理 | 特点 | 详细文章 |
|---|---|---|---|
| jsonp | 通过 < script > 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据 | 前端程序员想出来的野路子 | JSONP实现跨域数据请求 |
| cors | 由一系列http响应头组成，这些http响应头决定浏览器是否阻止前端JS代码跨域获取资源 | 真正意义的解决跨域（cors主要在服务器端进行配置，客户端无需任何配置） | |
| 配置代理 | 创建一个与客户端相同端口的虚拟服务器，然后实现虚拟服务器向后端服务器发送请求 | 是vue中的一种技术，依赖vue脚手架 | vue脚手架配置代理 |
三、数据交换格式
数据交换格式是指服务器与客户端之间进行数据传输与交换的格式。
在前端，经常提到的数据交换格式是JSON和XML。XML用的非常少，JSON是主流的数据交换格式
| 方法 | 原理 | 特点 | 详细文章 |
|---|---|---|---|
| XML | 与HTML类似，也是一种标记语言。 | 格式臃肿，和数据无关的代码多，体积大，传输效率低，在JS中解析XML比较麻烦 | 数据交换格式（XML与JSON |
| JNON | J用字符串来表示javascript对象数据或数组数据 | 本质是字符串 | 数据交换格式JSON详解 |
四、异步编程
异步编程有：定时器、ajax、事件回调函数，Promise、async/await
| 方法 | 特点 | 详细文章 |
|---|---|---|
| ajax回调模式 | 嵌套调用，会出现回调地狱，可读性不强 | 什么是ajax？jQuery中的Ajax的3种方法 |
| Promise的链式回调函数 | 多个请求之间存在依赖关系，使用Promise的链式调用的话,那么有几个请求就需要写几个then，比较麻烦 | Promise的基本用法，基于Promise处理ajax请求 |
| async和await | ES7引入的新的语法，async是Promise的终结版 | async与await是什么？async和await基本用法 |
以上是前后端交互相关知识点，总结到一篇文章上，这样自己能够更好的理解各个部分。
有哪里不对的，请多指教，感谢感谢~~
相关文章
- 技术的正宗与野路子 c#, AOP动态代理实现动态权限控制（一） 探索基于.NET下实现一句话木马之asmx篇 asp.net core 系列 9 环境(Development、Staging 、Production)
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果
- 8 -- 深入使用Spring -- 4...5 AOP代理：基于注解的“零配置”方式
- 设计模式—代理模式
- 利用JDK动态代理机制实现简单拦截器
- CentOS 5.1 做NAT代理,实现封迅雷,BT,pplive
- zuul（springboot）设置静态资源代理和默认首页代码一例
- nginx 反向代理做域名转发简单配置
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- 宝塔配置vue反向代理Nginx解决
- 【树莓派】Squid代理以及白名单配置
- nginx 配置代理ip访问https的域名配置
- 8、代理模式（Proxy）
- Nginx反向代理配置