Ajax第一天

白昼苏打
145 阅读3分钟

1.前端访问服务器几种方式

    1. 直接在地址栏输入url
    2. HTML:  a标签的href属性
    3. JS :  window.location.href = ''
     document.querySelector('.box').addEventListener('click',function(){
        window.location.href = 'http://www.itheima.com'
    })  
    4. ajax技术 :  在网页不跳转的情况下，向服务器发送请求
        作用 : 局部刷新

2.Ajax相关的基础概念

 ajax技术 :  可以在页面不刷新的情况下 向服务器请求数据
 ajax技术作用 : 局部刷新

3.Ajax 请求数据的 5 种方式

image.png

4.axios 的基础语法

image.png

5.GET 请求的查询参数

查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过 params 选项来指定查询的参数：

image.png

案例:ajax发送get请求

<body>
  <button>按钮</button>
  <!-- 导入 axios.js 文件 -->
<script src="./lib/axios.min.js"></script>
<script>
//获取元素，绑定事件
document.querySelector('button').addEventListener('click', function () {
  // 发送ajax请求
  // console.log(axios); // 导入 axios.js 文件就会得到一个 axios 方法
  axios({ // axios()就是发送请求
      method: 'get', // 请求方式
      url: 'http://www.liulongbin.top:3009/api/getbooks', // 资源路径
    }) // then() 负责接收响应
    .then((res) => {
      console.log(res.data);
    })
})
 </script>
 </body>

image.png

6.在 GET 请求中携带多个查询参数

如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可

image.png

案例:# GET 请求中携带多个查询参数
<body>
      <button>按钮</button>
 <!-- 导入文件 -->
 <script src="./lib/axios.min.js"></script>
<script>
//获取元素,注册事件
document.querySelector('button').addEventListener('click', function () {
  // 发送带有参数的get请求
  axios({
      //查找前三项功能不能被删除
      method: 'get',
      url: 'http://www.liulongbin.top:3009/api/getbooks',
      params: {
        id: 1,
        bookname: "西游记"
      }
    })
    .then((res) => {
      console.log(res.data);
    })
})
</script>
</body>

image.png

案例:GET 请求中携带多个查询参数在 URL 地址的末尾查询参数之间使用 & 符号进行分隔
<body>
      <button>按钮</button>
 <!-- 导入文件 -->
 <script src="./lib/axios.min.js"></script>
 <script>
//获取元素,注册事件
document.querySelector('button').addEventListener('click', function () {
  // 发送带有参数的get请求
  axios({
      method: 'get',
       url: 'http://www.liulongbin.top:3009/api/getbooks?id=1&bookname=西游记',
    })
    .then((res) => {
      console.log(res.data);
    })
})
 </script>
</body>

7.编码和解码

浏览器内置了 encodeURIComponent() 和 decodeURIComponent() 两个方法，用来实现 URL 的编码和解码处理

image.png

 <script>
    //定义一个变量
     let str1 = '西游记'
    编码-浏览器会自动操作,不用程序员关系
     let str2 = encodeURIComponent(str1)
      console.log(str2)//%E8%A5%BF%E6%B8%B8%E8%AE%B0
    解码-浏览器会自动操作,不用程序员关系
      let str3 = decodeURIComponent('%E6%B8%B8')
       console.log(str3);//游
   </script>

image.png

8.响应数据解构

 <body>
     <script src="./lib/axios.min.js"></script>
 <script>
//对象类型，数据结构，把data属性重命名为 res
let {
  data: res
} = {
  config: 1,
  data: 2,
  headers: 3
}
console.log(res);
axios({
  method: 'get',
  url: 'http://www.liulongbin.top:3009/api/getbooks',
  params: {
    id: 1
  }
}).then(({
  data: res
}) => {
  console.log(res.data)
  console.log(res.code);
  console.log(res.msg);
})
 </script>
 </body>

image.png

9.axios 发起 POST 请求

image.png

使用 axios 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可
 <body>
   <button>按钮</button>

<script src="./lib/axios.js"></script>
<script>
    // 获取元素，绑定事件
    document.querySelector('button').onclick = function () {
        // 发送post请求
        axios({
            method: 'post',
            url: 'http://www.liulongbin.top:3009/api/addbook',
            // post请求，put请求，patch请求通常传递的都是请求体参数;
            // params属性传递查询参数，data属性传递请求体参数;
            data: {
                // 图书的名字只能是中英文，且最大长度为 7 个字符！！！
                // 不能重复添加
                bookname: '三体地球往事',
                author: '刘慈欣',
                publisher: '武汉人民出版社'
            }
        }).then(({ data: res }) => {
            console.log(res);
        });
    }
</script>
</body>

image.png

10.Ajax 的基础用法,在函数的形参中使用解构赋值

使用解构赋值，可以轻松地获取到 axios 请求回来的真实数据。示例代码如下:

image.png

11.接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）
接口文档的格式有很多，txt，word，excel，md等.... 现在最常用的是 html 格式文档

接口文档的格式

image.png

12.GET 和 POST 提交数据的区别

 GET 请求只能在 URL 中携带少量的数据
 POST 请求适合用来提交大量的数据
 POST 为了能够提交大量的数据，所以没有把数据拼接到 URL 的末尾；而是放到了独立的“请求体”中

13.请求报文和响应报文

请求报文规定了客户端以什么格式把数据发送给服务器
响应报文规定了服务器以什么格式把数据响应给客户端
请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成
响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成
注意：
在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。
在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体

14.http 响应状态码

概念：http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态
作用：客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了

image.png

http 响应状态码 Vs 业务状态码
1. 所处的位置不同：
在响应头的状态行中所包含的状态码，叫做“响应状态码”
在响应体的数据中所包含的状态码，叫做“业务状态码”

image.png

2. 表示的结果不同：
 响应状态码只能表示这次请求的成功与否（成功地失败了）
 业务状态码用来表示这次业务处理的成功与否

image.png

3. 通用性不同：
响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。
业务状态码是后端程序员自定义的，不具有通用性

image.png

image.png

同步和异步区别:
 Ajax是异步可以刷新一部分页面
avatar
文章
阅读
粉丝