【web】学习ajax和fetch

1/什么是ajax

ajax 全名 async javascript and XML(异步JavaScript和XML) 是前后台交互的能⼒。
也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具。
在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面

• 什么是同步请求？(false)
  同步请求是指当前发出请求后，浏览器什么都不能做，
  必须得等到请求完成返回数据之后，才会执行后续的代码，

• 什么是异步请求？(默认:true)
  默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
  Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。

GET 还是 POST？
get 请求的参数就直接在 url 后面进行拼接就可以 post 请求的参数是携带在请求体中的，所以不需要再
url 后面拼接

.ajax（）
jQuery对象上面还定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求

ajax原理分析

我们自己定义触发事件，在触发事件里面编写ajax代码
当事件触发时，游览器将会发送ajax异步请求，本质还是http请求
服务器返回数据，我们通过回调函数来对返回数据进行处理
将数据展示到页面上，实现局部更新
使用步骤
1.创建XmlHttpRequest对象
2.调用open方法设置基本请求信息
3.设置发送的数据，发送请求
4.注册监听的回调函数
5.拿到返回值，对页面进行更新

fetch 基本使用

Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的XMLHttpRequest的，在 JavaScript 脚本里面发出 HTTP 请求
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。 它的优点很多，包括链式调用的语法、返回promise等

fetch与ajax的区别

fetch:
1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2）fetch默认不会带cookie，需要添加配置项
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以从fetch()返回的

ajax与fetch都是前端开发过程中常用到的数据请求方式。fetch是一种http数据请求的方式，是XMLHttpRequest的一种替代方案；ajax使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。
fetch采用了Promise的异步处理机制，使用起来比ajax较为简单

Fetch 和 Axios/Ajax 的关系

Ajax 是一种代表异步 JavaScript + XML 的模型（技术合集），所以 Fetch 也是 Ajax 的一个子集
在之前，我们常说的 Ajax 默认是指以 XHR 为核心的技术合集，而在有了 Fetch 之后，Ajax 不再单单指 XHR 了，我们将以 XHR 为核心的 Ajax 技术称作传统 Ajax。
Axios 属于传统 Ajax（XHR）的子集，因为它是基于 XHR 进行的封装

图文来自SCDN