初识Ajax

初识Ajax

浏览器&服务器

• 浏览器作用: 输入网址, 即可浏览相关内容
• 服务器作用: 为访问者提供各种资源 。资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等

1. 浏览器访问的资源在哪里存着?

• 在服务器上存储

2. 浏览器和服务器的作用分别是?

• 浏览器负责浏览资源, 服务器负责提供资源

url网址

• url网址组成
  

4个部分组成：

1. 协议
2. 主机名
3. 端口号（可省略）
4. 资源存放的路径

• url网址的作用是什么?
  用来标记资源的位置
• url网址的4个组成部分是什么?
  协议, 主机名, 端口号, 资源路径

请求和响应

浏览器和服务器之间的通信过程, 分为两个步骤： 请求和响应,

1. 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做 “请求”
2. 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"
   

请求是什么?

是浏览器通过url去获取资源的过程

响应是什么?

是服务器返回资源的过程

JSON

1. JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组
2. JSON 数据：用字符串的方式来表示的对象或数组类型的数据

• 对象格式JSON字符串

• • key必须用双引号包起来
  • value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）

JSON是什么?

以字符串的形式来表现对象/数组的数据格式

JSON字符串和JS数据类型如何互相转换?

• JSON.stringify() JS数据类型转JSON字符串
• JSON.parse() JSON字符串转成JS数据类型

axios

1. 先引入axios.js文件到自己的网页中

axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js

2. axios的使用语法

axios({
    url: '请求的URL网址',
    method: '请求的方法'
}).then((结果变量名) => {
    // .then 用来指定请求成功之后的回调函数
    // 形参中的 result 是请求成功之后的结果
})

1. axios是什么?

• axios是别人封装好的，用来发ajax请求的工具

2. axios的格式是?

• axios({url: 地址， method: 方式}).then()

接口相关

接口

接口是提供数据服务的url网址。

使用 Ajax 技术请求数据时，被请求的 URL 网址，就叫做数据接口（简称：接口或 API 接口）。

接口文档

是接口使用说明书

服务器会把一些接口地址罗列整理到一个文档上

接口文档格式

1. 接口是什么?

• 接口是提供数据服务的url网址

2. 什么是接口文档?

• 服务器端提供的接口url网址的一个文档, 是接口使用的说明书

axios请求携带查询参数

axios传参的语法

//一般是get请求传参
axios({
    url: '请求地址',
    method: '请求方式',
    params: {
        // 后端规定的参数名: 前端准备给后端的值
    }
}).then(result => {
    console.log(result)
})


//post请求传参
axios({
    url: '请求地址',
    method: 'POST',    // 一般来讲是POST
    data: {            // data: 对应要发给后端数据
        // 后端规定的参数名: 前端发给后端的值
    }
}).then(result => {
    console.log(result);
})

axios5种请求方式

浏览器在请求服务器上的数据时，根据操作性质的不同，理想状态下可以分为 5 种常见的请求方式：

工作时：后端规定什么请求方式，前端要按规定使用

请求报文

3. 请求报文组成

• • 请求行

• • • 请求方式: (GET / POST / DELETE / PUT / PATCH)
    • 请求url: 资源在服务器地址
    • 协议版本: 默认HTTP/1.1

• • 请求头部: 头部参数名: 值
  • 请求体: 携带给服务器的数据
    

响应报文

2. 响应报文组成

• • 响应行

• • • 协议版本: 默认HTTP/1.1
    • 响应状态码: 服务器返回的一个数字标识, 代表本次响应的状态
    • 响应状态描述: 服务器返回的一个文字标识, 代表本次响应的描述

• • 响应头部: 头部参数名: 值
  • 响应体: 服务器返回的响应数据
    

响应码

1. 各种响应状态码的查看

• • 200: 比如我们前面案例里的Ajax的请求, 正确的响应状态就为200
  • 302: 比如先打开Network, 再访问baidu.com, 会出现302重定向
  • 304: 比如先打开Network, 再访问https://image.baidu.com/, 有的css, js, 图片文件就会有缓存
  • 4xx: 可以在后续做案例/项目中遇到
  • 500: 比如先打开Network, 再访问http://pcapi-xiaotuxian-front-devtest.itheima.net/login, 会出现500

业务状态码