初学Ajax

Ajax

• 概念：AJAX是异步的JavaScript 和 XML,就是使用XMLHttpRequest 对象与服务器通信。它可以使用JSON，XML，HTML，text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步特性”，也就是说它可以在不重新刷新页面的情况下与服务器进行通信，交换数据或更新页面

如何使用AJAX

1. 先使用axios库与服务器进行数据通信

• 基于XMLHttpRequest 封装,代码简单
• Vue,React 项目中都会用到axios

2. axios的使用

• 语法：

1. 引入axios.js:

• type='module’是解决普通js文件无法识别ES6语法的问题

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

axios({
    url:'目标资源地址'
}).then((result) =>{
    // 对服务器返回的数据做后续处理
})

3. 再学习XMLHttpRequest 对象的使用，了解AJAX地层原理

URL

• URL地址的中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置，浏览器只有提供URL地址才能正确定位资源的存放位置，从而成功访问到对应的资源

• URL地址通常由三部分组成— http://域名/路径

1. 客户端与服务器之间的通信协议----http
2. 存有该资源的服务器名称—域名
3. 资源在服务器上具体的存放位置—路径

接口文档

• 接口文档是接口的说明文档，它是我们调用接口的依据，好的接口文档包含了对接口URL，参数以及输出内容的说明。
• 接口的组成部分：

1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等
2. 接口URL：接口的调用地址
3. 调用方式：接口的调用方式，如GET或POST
4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称，参数类型，是否必选，参数说明这四项内容
5. 响应格式：接口的返回值的详细描述，一般包含数据名称，数据类型，说明三项内容
6. 返回示例(可选)：通过对象的形式，例举服务器返回数据的结构

查询参数

• axios语法：

axios({
    url:'请求地址',
    method:'请求方式',
    params:{参数名：参数值}, // GET的参数
    data: {参数名：参数值}, // POST的参数
    // 路径参数：axios.方法名('url/参数值')
}).then(res =>{
    // 成功
    console.log(res)
}).catch(error=>{
    // 错误：error就是错误信息
})

HTTP协议

• 全称网络传输协议–规定前后端交互的数据格式

1. 请求报文：浏览器发送给服务器的数据格式
   (1)请求行：路径(url) + 方法(method)
   (2)请求头：浏览器的数据格式(Content-Type): json格式 和 文件格式
   (3)请求体：浏览器发送的参数

2. 响应报文：浏览器发送给服务器的数据格式
   (1)响应行: 状态码status + 服务器ip地址

• 状态码： 2xx:成功，3xx：重定向，4xx:前端问题，5xx:服务器问题
  (2)响应头：后端响应体格式Content-Type
  (3)响应体: 响应数据

3. 4xx–前端问题

• 400 参数错误
• 401 未认证
• 403 没有权限
• 404 路径错误
• 413 文件大小超过限制

axios的两种写法

1. axios().then()

axios.方法名('请求路径'，{params:{参数名:参数值}} ).then();---get请求
axios.方法名('请求路径'，{参数名:参数值}).then();---post请求

3. 五种请求方法

• get 查询数据
• post 提交数据
• put 全局更新
• patch 局部更新
• delete 删除数据

get和post的区别

1. 传参方式不同

• get在请求行传参
• post在请求体传参

2. 传输速度不同

• get速度比post块

3. 数据大小不同

• get大小有限制，一般为(2~4kb)
• post无上限

4. 安全性不同

• post安全性更高

serialize插件–用来获取表单数据

1. 引入插件库
2. 使用serialize函数，快速收集表单元素的值
   • 参数1：要获取哪个"表单form"的数据
   • 表单元素设置name属性，值会作为对象的属性名
   • 建议name属性的值，最好和接口文档参数名一致
   • 参数2：配置对象
   • hash 设置获取数据结构
   • • true：JS对象（推荐）一般请求体里提交给服务器
   • • false: 查询字符串
   • empty 设置是否获取空值
   • • true: 获取空值（推荐）数据结构和标签结构一致
   • • false：不获取空值

文件上传

文件上传流程

1. 准备一个file表单，给表单注册一个change事件
2. 使用FormData处理文件
3. 发送ajax请求，参数就是fd
4. 服务器响应成功，返回图片地址
5. 将返回的地址赋给img的src属性

FormData对象处理文件

• FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。如果表单enctype属性设为 multipart/form-data，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
• 使用FormData的原因：因为我们直接发送ajax请求时，上传的格式是文件，与请求头的默认格式JOSN不同，无法正确上传数据，因此需要使用FormData修改请求头格式为multipart/form-data,在将file对象里的二进制取出来传给服务器
• 使用方法:

1. 创建FormData对象
2. 获取文件数据—通过file表单的属性files获取文件的数据
3. 使用append(‘参数名’,‘参数值’)方法添加 —参数名由后台接口决定，参数值就是先前获取的文件数据
4. 若有多个参数，则多次调用append方法

自定义美化表单

1. 使用label标签的for属性

• label标签的作用：增加表单的触发面积。有一个for属性指向表单的id，点击label相当于点击表单

2. 任意标签注册点击事件，代码触发input的点击
   语法：

 document.querySeletor('.box').addEventListener('click',function(){
    // 模拟鼠标点击了这个file表单。click是file表单自带的，点击之后会自动启动电脑文件
    document.querySeletor('.upload').click()
 })