AJAX-基本了解和掌握(前端必掌握在后台与服务器交换数据)

服务器 0
首先前端常听到的有ajax,axios,fetch来与服务器交换数据。我们来了解一下这些都是什么？

目录

第一部分：什么是AJAX？

第二部分：什么是axios？

第三部分 什么是fetch？

第四部分 ajax,axios,fetch的区别

第五部分 细节拓展

第一部分：什么是AJAX？

AJAX：官方释意:Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），针对MVC的编程。

怎么去简单理解AJAX技术：异步的JavaScript和XML

  • 异步：比如有两个请求，A() 如果A请求数据没结束，没得到响应,B()在A()等待服务器响应时也可以执行，这就是异步。
  • XML：是在任何应用程序中读写数据的语言。
  • JavaScript：是一种前端常用web开发语言，其中会使用浏览器XMLHttpRequest的对象读取数据。

简单理解AJAX：就是可以在请求没有结束的同时，仍可以继续多次发送请求，进行数据的读取的操作的一种技术。（重点：不是新的编程语言，而是一种使用现有标准的新方法！！）

AJAX技术 特性

  • Ajax 是一种用于创建快速动态网页的技术。
  • Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

AJAX技术 应用

  • 在jQuery中对AJAX技术进行了封装，可以使用$ajax()来使用，改方法要引入整个JQuery，且针对于MVC框架来使用;

  • vue和react中常用的axios(),针对MVVM框架;

  • 运用 XHTML+CSS 来表达资讯；

  • 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；

  • 运用 XML 和 XSLT 操作资料;

  • 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

第二部分：什么是axios？

axios:是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。  axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。对ajax技术的二次封装。

axios 特性

  • 为MVVM框架而生 (vue react)
  • 用于浏览器和node.js的基于Promise的HTTP客户端。
  • 从浏览器制作XMLHttpRequests
  • 让HTTP从node.js的请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换为JSON数据
  • 客户端支持防止XSRF
  • 支持并发请求, 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF。
第三部分 什么是fetch？

fetch是和XMLHttpRequest同级的，XHR(XMLHttpRequests) 和 fetch API是两种最常见的方法，用于从 Web 服务器获取数据。XHR(XMLHttpRequests) 是一种传统的数据请求方式，而 fetch API则代表了现代 Web 开发的新兴标准。

你知道 XHR 和 Fetch 的区别吗？ - 掘金 (juejin.cn)

fetch的特点

1、当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。

2、fetch() 可以接受跨域 cookies。
3、fetch 不会发送 cookies，除非使用了credentials 的初始化选项。

第四部分 ajax,axios,fetch的区别

总结：

  • ajax是一种技术；
  • jquey中使用$.ajax()封装了ajax技术，使用时必须引入juqery，针对的MVC框架; 
  • axios也是封装的ajax技术，可以在vue和react中使用,针对于MVVM框架；
  • XHR(XMLHttpRequests) 和 fetch API是两种最常见的方法，用于从 Web 服务器获取数据。

第五部分 细节拓展
  • 异步和同步的概念

同步：同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去。
异步：异步是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回的时候会通知进程进行处理，这样就可以提高执行的效率了，即异步是我们发出的一个请求，该请求会在后台自动发出并获取数据，然后对数据进行处理，在此过程中，我们可以继续做其他操作，不管它怎么发出请求，不关心它怎么处理数据。

  • jquery.ajax()官网和 axios()的官网

jquery.ajax()官网jQuery.ajax（） |jQuery API 文档icon-default.png?t=N7T8https://api.jquery.com/Jquery.ajax/

 axios()的官网

起步 | Axios中文文档 | Axios中文网 (axios-http.cn)icon-default.png?t=N7T8https://www.axios-http.cn/docs/intro

  • CSRF

CSRF（Cross-site request forgery）跨站请求伪造（缩写为XSRF/CSRF），举例：攻击者盗用了你的身份，以你的名义发送恶意请求，CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。

CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！

CSRF的防御

CSRF的防御可以从服务端和客户端两方面着手，防御效果是从服务端着手效果比较好，现在一般的CSRF防御也都在服务端进行。

服务端进行CSRF防御

服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。一般使用都是在请求中添加Token,CSRF不能获取到请求头中的token，只能使用浏览器的cookie，所以就不能进行CSRF攻击了。

总结：CSRF是恶意网站，通过用户的点击，使用用户的Cookie,来去访问第三方网站，解决方法，请求时加上随机数Token,在访问恶意网站时，是不会带上这些token的，所以恶意网站就无法盗用身份去请求第三方网站，举例：你去朋友家做客，朋友给你一把钥匙，你放门垫下面，小偷看到了，也可以用这把钥匙，后来朋友家做了升级，钥匙上加了人脸识别，把你的脸录入门锁，每次只有你的脸才可以开门，小偷拿不到你的脸，只要钥匙，就没法进去了。人脸信息就相当于token。钥匙就相当于cookie。小偷相当于恶意网站，朋友相当于第三方网站。

  • MVC框架和MVVM框架

MVVM是Model-View-ViewModel的简写。 它本质上就是MVC 的改进版，整体和mvc差不多，最大的区别就是 mvc是单向的，而mvvm是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据 ，同时解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

MVC框架：MVC框架即Model View Controller，是模型Model-视图View-控制器Controller的缩写。

  • Model：模型，是应用程序中用于处理数据逻辑的部分，通常模型对象负责在数据库中存取数据。
  • View：视图，用户界面显示，通常视图是根据模型数据创建的。
  • controller：控制器，数据模型和视图之间通信的桥梁。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC思想：Controller负责将Model的数据用View显示出来。

MVC优点：耦合度低（运用MVC的应用程序的三个部件是相互独立的，改变其中一个不会影响其他两个）；重用性高（多个视图可以使用同一个模型，生命周期成本低部署快（业务分工明确）可维护性高

缺点：不适合小型项目开发，视图与控制器联系过于紧密，妨碍了它们的独立重用

MVVM框架：由Model，View，ViewModel三部分构成。

  • M(Model)：数据模型（Vue的data）
  • V(View)：视图，即UI，用来展示数据（Vue的el）
  • ViewModel：是一个对象，用来同步视图View和模型Model

MVVM思想：双向绑定，View和Model之间没有直接联系，通过ViewModel进行交互（即双向数据绑定），View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。通过双向数据绑定，View 和 Model 之间的同步工作完全是自动的，因此开发过程中不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

可以实现双向绑定的标签：Input，textarea，select标签等（可以输入或改变标签内容的标签）

MVVM优点：低耦合，可重用性，双向数据绑定，它实现了View和Model的自动同步，Vue就是使用的MVVM框架。

MVVM与MVC的区别：MVVM和MVC都是一种设计思想。MVVM与MVC最大的区别就是：它实现了View和Model的自动同步（当Model属性改变时，不用手动操作Dom元素去改变View的显示。而是改变属性后，该属性对应View的显示会自动改变）。

本文有不足的地方，欢迎反应和提醒，会持续更新优化该文章

也许您对下面的内容还感兴趣：