了解AJAX

• AJAX 概念和 axios 使用

什么是 AJAX？

AJAX是异步的JavaScript和XML（XMLHttpRequest）

作用：AJAX 是浏览器与服务器进行数据通信的技术

以下图片是ajax使用的对象

axios－查询参数

语法

    

        axios({

            url:'http://ajax-api.itheima.net/api/province'

        }).then((result)=>{

            console.log(result.data.data);

            document.querySelector('div').innerHTML=result.data.data.join('')

        })

• 认识 URL

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

 

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

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

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

• URL 查询参数

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

语法：XXXX

例如：

http://hmajax.itheima.net/api/city?pname=湖北省

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

  <script>

   axios({

    url:'http://hmajax.itheima.net/api/news',

    params:{

      pname:'湖北'

    }

   }).then(res=>{

    console.log(res.data.data);

   })

1. 地区查询

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

  <script>

  //  1.给按钮添加点击事件

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

      // 2.点击时获取省份名和城市名

      const pname=document.querySelector('[name=province]').value

      const cname=document.querySelector('[name=city]').value

       // 3.使用axios发送请求获取数据

       axios({

        url:'http://hmajax.itheima.net/api/area',

        params:{

          pname,

          cname

        }

       }).then(res=>{

        console.log(res.data.list);

        document.querySelector('.list-group').innerHTML=res.data.list.map(item=>

        `<p class="list-group-item">${item}</p>`)

       })

  })

• 常用请求方法和数据提交

1. 数据提交

GET	获取数据
POST	数据提交
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

当数据需要在服务器上保存

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

数据提交－注册账号案例

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

  <script>

      注册用户: http://hmajax.itheima.net/api/register

      请求方法: POST

      参数名:

        username: 用户名 (中英文和数字组成, 最少8位)

        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册

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

    axios({

      url:'http://hmajax.itheima.net/api/register',

      parent:{

        username:'ziyang123456',

        password:'123456'

      }

    }).then(res=>{

      console.log(res);

    })

   })

  </script>

1. axios 错误处理

场景：注册案例，重复注册时通过弹框提示用户错误原因

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

把错误捕获到回调函数error身上

axios({

    // 请求选项

}).then(result => {

    // 处理数据

}).catch(error => {

    // 处理错误

})

案例：

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

  <script>

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

    axios({

      url: 'http://hmajax.itheima.net/api/register',

      // 指定请求方法

      method: 'post',

      data: {

        username: 'itheima007',

        password: '7654321'

      }

    }).then(result => {

      console.log(result)

    }).catch(error=>{

      console.log(error.response.data.message);

      alert(error.response.data.message)

    })

   })

  </script>

• HTTP协议-报文

1. HTTP 协议－请求报文

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

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

给服务器发请求写的代码

axios里的XHR帮我们把以上代码转换为以下请求报文格式（也可以说是浏览器帮忙转的）

请求报文的格式

Ps：请求体是JSON格式，因为用的双引号；content-type告诉服务器传的内容是JSON格式的数据      

通过 Chrome 的网络面板查看请求报文

1. 请求报文－错误排查

需求：通过请求报文排查错误原因，并修复

输入正确的用户名和密码无法登录

排查步骤：看函数体，查看返回结果

1. HTTP 协议－响应报文

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

HTTP 响应状态码

 

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

 

 

• 接口文档

接口文档：描述接口的文章（后端工程师写好发给前端工程师）

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

Ajax阶段的接口文档网址：https://apifox.com/apidoc/project-1937884/doc-1695440

• form-serialize 插件

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