前端框架前置学习（1） AJAX axios初体验

一. 什么是Ajax

 定义：ajax是异步的JavaScript和xml。简单点说，就是使用xmlhttprequest对象与服务器通信。他可以使用json，xml，html和text文本等格式发送和接收数据。ajax最吸引人的就是它的“异步”特性，也就是说它可以摘不重复刷新页面的情况下余服务器通信，交换数据，或更新页面。

概念：AJAX是浏览器与服务器进行数据通信的技术,动态数据交互

二.怎么学习Ajax

        先掌握axios使用

        再了解XMLHttoReques原理

2.1 axios体验步骤

       引入axios库

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

        使用axios语法

 axios({

        url: 'http://hmajax.itheima.net/api/province'

        // 目标资源地址

    }).then(result => {

        console.log(result.data.list)

         // 对服务器返回数据做后续处理

    })

2.2 什么是url

定义：统一资源定位符（Uniform Resource Locator，缩写：URL，或称为统一资源定位符，定位地址，url地址等），俗称网址，是因特网上标准的资源的地址（Address），如同在网络上的门牌号。

概念：URL就是统一资源定位符，简称网址，用于访问网络上的资源

URL组成：

       

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

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

        域名：标记服务器在互联网中的方位

2.3 查询参数

axios-查询参数

语法：使用axios提供的params选项

注意：axios在运行时把参数名和值，会拼接到url？参数名=值

2.4 常用的请求方法

请求方法：对服务器资源要执行的操作

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

2.5 axios请求配置

url：请求的URL网址

method：请求的方法，GET可以省略（不区分大小写）

data：提交数据

axios（{

        url:'目标资源地址',

        method:' 请求方法',

        data:{

               参数名：值

        }

}).then((reslut)=>{

        // 对服务器返回的数据做后续处理

}）

2.6 axios的核心配置项

• url：请求URL网址
• method：请求方式，GET可以忽略
• params：查询参数
• data：提交数据

2.7 错误处理

axios错误处理

场景：再次注册相同的账号是，会遇到报错信息

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

axios（{

        url:'目标资源地址',

       method:' 请求方法',

        //从服务器中查询值

        params:{

                参数：值

        }

        //向服务器中提交元素

        

        data:{

               参数名：值

        }

}).then((reslut)=>{

        // 对服务器返回的数据做后续处理

}).catch(error =>{

        console.log('1',error)

})

2.8 HTTP协议-请求报文

        Http协议：规定了浏览器发送及服务器返回内容的格式

        请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

        请求报文的组成部分有：

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

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

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

        4.请求体：发送的资源

可以通过请求报文对代码进行错误排查

2.9 HTTP协议-响应报文

HTTP协议：规定了浏览器发送及服务器返回内容的格式

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

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

3.0 接口文档

接口文档：描述接口的文章（后端）

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

3.1form-serilize插件

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

   <!-- 

    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值

    1. 把插件引入到自己网页中

-->

  <script src="./lib/form-serialize.js"></script>

  <script>

    document.querySelector('.btn').addEventListener('click', () => {

      /**

       * 2. 使用serialize函数，快速收集表单元素的值

       * 参数1：要获取哪个表单的数据

       *  表单元素设置name属性，值会作为对象的属性名

       *  建议name属性的值，最好和接口文档参数名一致

       * 参数2：配置对象

       *  hash 设置获取数据结构

       *    - true：JS对象（推荐）一般请求体里提交给服务器

       *    - false: 查询字符串

       *  empty 设置是否获取空值

       *    - true: 获取空值（推荐）数据结构和标签结构一致

       *    - false：不获取空值

      */

      const form = document.querySelector('.example-form')

      const data = serialize(form, { hash: true, empty: true })

       //{username:' ',password:' '}

      // const data = serialize(form, { hash: false, empty: true })

      // const data = serialize(form, { hash: true, empty: false })

      console.log(data)

       // 可以使用解构赋值

       const {username,password} = data