Ajax

AJAX

一、什么是AJAX

定义：AJAX是异步的Javascript和XML，简单来说就是使用XMLHttpRequest对象与服务器通信。

概念：AJAX是浏览器与服务器进行数据通信的技术。

二、什么是URL

定义：统一资源定位符，俗称网页地址，简称网址。用于访问网络上的资源。

http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式。

域名：标记浏览器在服务网中的方位。

资源路径：标记资源在服务器下的具体路径。

URL查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。

语法：https://xxx.com/xxx/xxx?参数名1&值1参数名2&值2

浏览器发给服务器的内容叫做请求报文

请求报文的组成部分：

1.请求行：请求方法，URL，协议

2.请求头：以键值对的格式携带的附加信息，比如：Content-type

3.空行：分隔请求头，空行之后的是发送给服务器的资源

4.请求体:发送的资源

响应报文：服务器按照HTTP要求的格式，返回给浏览器的内容

1.响应行（状态行）：协议、HTTP响应状态码、状态信息

2.响应头：以键值对的格式携带的附加信息，比如：Content-type

3.空行：分隔请求头，空行之后的是服务器响应的资源

4.响应体:返回的资源

HTTP响应状态码：用来表明响应是否成功完成

比如：404（服务器找不到资源）

接口文档：描述接口的文章

接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数

三、AJAX原理-XMLHttpRequest

1、XMLHttpRequest（XHR）用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。

关系：axios内部采用XMLHttpRequest与服务器交互

使用XMLHttpRequest

步骤

1.创建XMLHttpRequest对象

2.配置请求方法和请求URL地址

3.监听loadend事件，接收响应结果
4.发起请求

四、Promise

promise对象用于完成一个异步的最终完成（或失败）及其结果

promise三种状态：

待定（pending）:初始状态，既没有被兑现，也没有被拒绝

已兑现（resolved）：操作成功完成

已拒绝（rejected）：操作失败

注意：promise对象一旦被兑现/拒绝就是已经敲定了，状态无法再被该改变

同步代码和异步代码

同步代码：逐行执行，需原地等待结果后，才能继续向下执行。

异步代码：调用后耗时，不阻塞代码继续执行(不必原地等待)，在将来完成后触发一个回调函数

回调函数地狱

需求：展示默认第一个省，第一个市，第一个地区在下拉菜单中

概念：在回调函数中嵌套回调函数，一直嵌套辖区就形成了回调函数地狱

缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

Promise-链式调用

概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束

细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果

好处：通过链式调用，解决回调函数嵌套问题

五、事件循环

1.什么是事件循环

执行代码和收集异步代码，在调用栈空闲时，反复调用任务队列里回调函数执行机制

2.为什么有事件循环

Javascript是单线程的，为了不阻塞JS引擎，设计执行代码的模型

3.Javascript内代码如何执行

执行同步代码，遇到异步代码交给宿主浏览器环境执行

异步有了结果后，把回调函数放入任务队列排队

当调用栈空闲后，反复调用任务队列里的回调函数

宏任务和微任务

1.什么是宏任务

浏览器执行的异步代码（例如：JS执行脚本事件，AJAX请求完成事件，用户交互事件等）

2.什么是微任务

JS引擎执行的异步代码（例如：Promise对象.then的回调）

3.Javascript内代码如何执行

执行第一个script脚本事件宏任务，里面同步代码

遇到宏任务/微任务交给宿主环境，有结果回调函数进入对应队列

4. 宏任务、微任务 怎么执行的
先执行同步代码
遇到 异步宏任务 则将 异步宏任务 放入 宏任务队列中
遇到 异步微任务 则将 异步微任务 放入 微任务队列中
当所有同步代码执行完毕后
再将 异步微任务 从队列中调入 主线程执行
微任务执行完毕后
再将 异步宏任务 从队列中调入 主线程执行
一直循环 直至 所有任务执行完毕