AJAX概述+axios使用+URL+接口文档

一、简述

1. 是什么：
   • 是Asynchronous JavaScript And XML：使用XMLHttpRequest对象与服务器通信
   • 是浏览器与服务器进行数据通信的技术
2. 怎么用：
   • 先用axios库，与服务器进行数据通信
     • 使用axios原因
       • 其基于XMLHtttpRequest封装、代码简单、月下载量大
       • vue、react项目都会用到axios
   • 再学习XMLHttpRequest对象的使用，了解AJAX底层原理

二、axios使用

1. 引入axios.js：
   • cdn.jsdeliver.net/npm/axios/d…
2. 传入axios函数
   • 传入配置对象
   • 再用.then回调函数接收结果，并进行后续处理
3. 请求配置
   • url：请求的URL网址
   • params：查询参数
   • method：请求的方法（GET可省略）（不区分大小写）
   • data：请求数据
4. axios错误处理
   • 调用catch方法，传入回调函数并定义形参
     

我的实践：

三、URL

1. 是什么：
   • 统一资源定位符（Uniform Resource Locator）/网址
2. 组成（协议://域名/资源路径）：

   • 协议：传输数据的格式

     • 比如：http协议
       • 作用
         • 规定了浏览器发送及服务器返回内容的格式
       • 请求报文
         • 是什么：
           • 浏览器安装HTTP协议要求的格式，发送给服务器的内容
         • 组成
           • 请求行：请求方法、URL，协议
           • 请求头：以键值对的格式携带的附加信息
           • 空行：分隔请求头，空行之后的是发送给服务器的资源
           • 请求体：发送的资源
         • 查看方式
       • 响应报文：
         • 是什么：
           • 服务器按HTTP协议要求的格式，返回给浏览器的内容
         • 组成：
           • 响应行（状态行）：协议、HTTP响应状态码、状态信息
           • 响应头
           • 空行：分隔响应头，空行之后是服务器返回的资源
           • 响应体：返回的资源
         • 关于响应状态码

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

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

3. URL查询参数：
   • 是什么：
     • 浏览器提供给服务器的额外信息，让服务器返回给浏览器想要的数据
   • 语法：
     • xxxx.com/xxx/xxx?参数名…
   • axios的查询参数
     • 语法
       • 使用axios提供的params选项
     • 注意
       • axios在运行时会把参数名和值拼接到url?参数名=值
   • 我的实践
4. 请求方法：
   • 是什么：
     • 对服务器资源要执行的操作
   • 常用请求方法：

常见请求方法	作用	应用场景
GET	获取数据	获取服务器上的数据
POST	提交数据	当提交的数据需要在服务器上保存
PUT	修改全部的数据
DELETE	删除数据
PATCH	修改部分数据

我的实践(post)：

四、接口文档

1. 是什么：
   • 描述接口的文档
2. 接口：
   • 使用AJAX和服务器通讯时，使用的URL，请求方法以及参数