ajax学习笔记

AJAX

一、ajax用处

浏览器和服务器之间通信，动态数据交互

二、axios使用语法

• 引入axios.js:http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

• 使用axios函数：

  • 传入配置对象
  • 使用.then回调函数接受结果，并作后续处理
    

三、认识url

1、定义

统一资源定位符，简称网址

2、url组成

3、url查询参数

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

• 语法：

  • 使用axios提供的param选项

  

四、常用请求方法

1、axios请求配置

• url
• method：请求的方法，get可以省略
• data：提交数据

五、HTTP响应状态码

六、HTTP响应报文的组成

• 响应行：协议、HTTP响应状态码、状态信息
• 响应头：以键值对的格式携带的附加信息，比如Content-Type
• 空行：分隔响应头，空行之后的是返回给浏览器的资源
• 响应体：返回的资源

七、form-serialize插件

• 作用：快速收集表单元素的值

• 语法：

1、注意事项

• 参数一：要收集哪个表单的数据
  • 表单元素设置name属性，值会作为对象的属性名
  • 建议name属性的值，最好和接口文档参数名一致
• 参数二：配置对象
  • hash 设置获取数据结构
    • true：JS对象 一般请求体里提交给服务器
    • false：查询字符串
  • empty：设置是否获取空值 推荐获取空值

八、bootstrap弹框使用

1、弹框使用步骤

• 引入css和js库，且初始不可见
• 通过自定义属性，控制弹框的显示和隐藏：

九、图书管理

1、渲染列表

自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查

• 方法：

axios({
    url:'……'
    params: {
    creator: '....'
}
})

十、图片上传

• 获取图片文件对象
• 使用FormData携带图片文件

• 提交表单数据到服务器，使用图片url地址

十一、Promise

1、定义：用于表示异步操作的最终完成（或失败）及其结果值

2、好处：

• 逻辑更清晰
• 了解axios函数内部运作
• 能解决回调函数地狱的问题

3、语法

4、promise对象三种状态

十二、同步和异步

1、同步：逐行执行，需原地等待结果后，才继续向下运行

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

十三、回调函数地狱

1、概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

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

十四、Promise - 链式调用（可有效解决回调地狱问题）

• 概念： 依靠then方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束
• 细节： then（）回调函数中的返回值，会影响新生成的Promise对象最终状态和结果
• 做法： 每个Promise对象中管理一个异步任务，用then返回Promise对象，串联起来

十五、async函数和await

可以让我们用一种更为简洁的方式写出基于Promise的异步行为而无需可以地链式调用Promise

• 概念：在async函数内使用await关键字取代then函数，等待获取Promise对象成功状态返回值

1、捕获错误

try…catch使用

十六、事件循环

1、概念：JS有一个基于事件循环地并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。

2、原因：JS是单线程的，为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

3、执行过程

• 执行同步代码，遇到异步代码交给宿主浏览器环境执行
• 异步有结果后，把回调函数放入任务队列排队
• 当调用栈空闲后，反复调用任务队列里的回调函数