Ajax入门

Ajax

• 使用浏览器的 XMLHttpRequest 对象 与服务器通信

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器

axios

Axios 对原生的AJAX进行封装，简化书写

 基本语法：

首先axios引入

 axios({
            url: '目标资源地址'
            params:{
             参数名：值
             }
        }).then(res =>{
           // 数据处理
        })

发送 get 请求

axios({
    method:"请求方法",
    url:"目标资源地址"
     params:{
             参数名：值
             }

}).then(function (resp){
    //数据处理
})

发送 post 请求

axios({
    method:"请求方法",
    url:"目标资源地址"
     data:{
             参数名：值
             }

}).then(function (resp){
    //数据处理
})

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

• method 属性：用来设置请求方式的。取值为 get 或者 post。
• url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
• data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

axios 错误处理

语法：在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({
    //请求

}).then(function (resp){
    //数据处理
}).catch(e =>{
  //错误处理

})

HTTP协议 - 请求报文

1. 首先，HTTP 协议规定了浏览器和服务器返回内容的格式

2. 请求报文：是浏览器按照协议规定发送给服务器的内容

3. 这里的格式包含：

   • 请求行：请求方法，URL，协议
   • 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
   • 空行：分割请求头，空行之后的是发送给服务器的资源
   • 请求体：发送的资源

HTTP 协议-响应报文

响应报文：是服务器按照协议固定的格式，返回给浏览器的内容

1. 响应报文的组成：

   • 响应行（状态行）：协议，HTTP响应状态码，状态信息
   • 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
   • 空行：分割响应头，控制之后的是服务器返回的资源
   • 响应体：返回的资源

2. HTTP 响应状态码：

   • 用来表明请求是否成功完成

接口文档

1. 由后端提供的描述接口的文章
2. 请求的 URL 网址，请求方法，请求参数和说明

form-serialize 插件

作用 ：快速收集目标表单范围内表单元素的值 

语法：

• 引入 form-serialize 

• 使用 serialize 函数
  • 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
  • 参数2：配置对象
    • hash：
      • true - 收集出来的是一个 JS 对象结构
      • false - 收集出来的是一个查询字符串格式
    • empty：
      • true - 收集空值
      • false - 不收集空值

Bootstrap 

Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网

Bootstrap 弹框_属性控制 

• 先引入 bootstrap.css 和 bootstrap.js 到自己网页中

• 准备弹框标签，确认结构（可以从文档的 Modal 里复制基础例子）

• 通过自定义属性，通知弹框的显示和隐藏，语法如下

Bootstrap 弹框_JS控制

JS 方式 控制 Bootstrap 弹框显示和隐藏

语法如下：

AJAX原理

开始使用 - Web 开发者指南 | MDN (mozilla.org)

XMLHttpRequest - 基础使用

语法：

// 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()
    // 2. 配置请求方法和请求 url 地址
    xhr.open('get', '请求 url 地址')
    // 3. 监听 loadend 事件，接收响应结果
    xhr.addEventListener('loadend', () => {
      const res = JSON.parse(xhr.response)
      console.log(res)
      document.querySelector('p').innerHTML = res.list.join('
')
    })
    // 4. 发起请求
    xhr.send()

AJAX 原理是 

• window 提供的 XMLHttpRequest

XMLHttpRequest - 查询参数

• 在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值
• 多对查询参数，如果自己拼接很麻烦，这里用 URLSearchParams 把参数对象转成“参数名=值&参数名=值“格式的字符串，语法如下：
• 

 

XMLHttpRequest - 数据提交

• 在 send 中携带请求体数据，要按照后端要求的内容类型携带

认识_Promise

• Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值

语法：

认识_Promise 的状态

 三种状态：

1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
2. 已兑现（fulfilled）：操作成功完成
3. 已拒绝（rejected）：操作失败

• 状态改变后，关联处理函数

Promise-链式调用

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

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

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

async 函数和 await

• await 的作用是替代 then 方法来提取 Promise 对象成功状态的结果

事件循环

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