一、初始ajax
1、含义:就是前端向后端获取数据 , 后端给出响应的一个过程,是前端使用的一种技术,通过这个技术来向后端获取数据
2、全称:
-
a : async 异步的意思
-
j : JavaScript
-
a : and
-
x : xml(就是严格意义上的html)
3、书写步骤:
(1) 创建一个ajax对象 , 也可以说是实例化一个ajax对象
语法: const 变量名(xhr) = new XMLHttpRequest()
(2) 配置我们的请求信息
语法: xhr.open(请求方式,请求地址,是否异步)
(3)发送请求
语法: xhr.send()
(4)注册一个响应函数
xhr.onload = function () {
在这里获取到后端给到我们的信息
语法: xhr.responseText
}
注意: 一个ajax实例只能发送一个ajax请求
二、ajax的异步问题
1、ajax 默认是一个异步的请求,但是不是每一个步骤都是异步的
-
第一步 实例化对象也就是创建对象是同步操作
-
-> const xhr = new XMLHttpRequest()
-
-
第二步 配置请求信息是同步操作
-
-> xhr.open('GET', 'http://localhost:8888/test/first')
-
-
第三步 发送请求 这里有两个方面
-
xhr.send()
-
发送请求 是同步操作
-
响应结果 是异步操作
-
-
第四步 注册响应事件是同步操作
-
xhr.onload = function () { }
-
该事件的触发是在拿到相应的结果后触发
-
综上可得:不管同步还是异步, 都按照 1 2 4 3 的步骤书写
// 解决我们同步和异步的问题
const xhr = new XMLHttpRequest()
// 2. 配置我们的请求信息
xhr.open('GET', 'http://localhost:8888/test/first',false)
// 4. 注册一个响应函数
xhr.onload = function () {
// 在这里获取到我们要的后端的数据
let res = xhr.responseText
console.log(res);
}
// 3. 就是发送请求
xhr.send()
三、认识ajax请求的状态码
1、含义:就是一个数字 , 表示的是我们这个请求进行到了哪一步(那一个环节)
2、语法: ajax对象(xhr).readyState
3、返回值: 就是一个数字
-
0 : 创建ajax请求成功了
-
1 : 配置请求信息成功
-
2 : 本次请求已经成功了(响应的信息已经回到了浏览器)
-
3 : 浏览器正在解析你的响应体 , 但是还没有完成
-
4 : 浏览器正在解析你的响应体 , 但是这是时候已经完全解析完毕了 你可以正常使用了
4、需要一个事件:readystatechange
=>触发时机: 状态码发生改变的时候触发,请求发送以后
四、http传输协议
1、含义:就是我们约定好的 , 或者说的是一个规则
-
http和https 都是我们的传输协议
-
https 加密后的一个传输协议
-
该协议规定了 , 只能由我们前端发起请求
-
并且在传输过程中只能传递 字符串
2、协议的过程
(1)建立协议:浏览器和服务器建立连接,基于TCP/IP协议的三次握手,三次握手就是建立协议的一个过程
-
你好 , 你在吗
-
我在的
-
好的
(2)发送请求:就是要求我们前端必须以 请求报文 的形式发送
-
请求报文是 由浏览器组装 , 我们只需要提供信息即可
-
请求报文需要包含哪些内容:
=>请求报文行:请求方式 , 请求地址 , 传输协议
=>请求报文头
-
里面有一个叫做 : userAgent 请求方终端的一些信息
-
content-type: 就是请求携带的信息的数据格式
-
cookie: 只要 cookie 的空间中有内容 , 就会自动携带 和我们关系
-
accept: 期望后期后端给我返回的数据类型
=>请求报文空白行:就是用来分开请求报文头和请求报文体
-
就是我们的请求头是键值对的形式
-
请求体也是键值对的形式
=>请求报文体:就是我们请求携带的信息(参数)
- 注意: 不是所有的请求都需要
(3)接收响应:要求后端必须以 响应报文 的形式返回,响应报文是由服务器组装
=>响应报文包含哪些
-
响应报文行:响应的状态码 , 简单的来描述响应的一个状态
->响应状态码:
+100 - 199 表示的是连接成功
+200 - 299 表示的是各种各样的成功
+300 - 399 表示的是重定向
+400 - 499 表示的是各种客户端的问题
+500 - 599 表示的是各种服务端的问题
-
响应报文头(就是对本次响应的一些说明信息)
+server: 哪一个服务器给你返回的信息
+date: 时间,服务器的时间都是按照世界标准时间来的
+content-length: 响应的长度
+content-type: 响应体的数据类型
-
响应报文体:后端返回给前端的信息
(4)断开连接:浏览器和服务器断开连接,基于TCP/IP协议的四次挥手
五、请求方式
1、含义:就是和服务器说话的一种语气,不同的请求方式携带的参数的位置不一样
2、常见的请求方式:
- GET:一种偏向于获取的语义
-
POST : 一种偏向于提交的语义
-
PUT : 一种偏向于提交的语义(提交并保存)
-
PATCH: 一种偏向于提交的语义(提交并修改)
-
DELETE: 一种偏向于删除的语义
-
HEAD : 一种偏向于获取的语义(获取的是响应头的信息)
-
OPTIONS: 一种偏向于获取的语义(为了获取服务器的信息 , 服务器要允许才可以)
-
CONNECT: 一种保留的请求方式
3、GET 和 POST 的区别 (重要 , 重要 , 重要)
(1)携带参数的位置
-
GET: 直接书写在我们的地址后面
-
POST: 书写在请求体中
(2)携带参数的大小不同
-
GET: 2KB左右
-
POST: 理论上不限制大小 , 但是服务器会做出限制
(3)携带参数的格式不同
-
GET: 只能携带查询字符串 key=value&key1=value1&
-
POST: 原则上是不限制格式的 , 但是需要在请求报文上content-type做出说明
(4)安全性
-
GET: 明文传输 相对来说不安全
-
POST: 暗文传输 相对来说比较安全
(5)语义化
-
GET: 偏向于获取的语义
-
POST: 偏向于提交的语义
4、post请求携带参数
-
如果说是post请求 , 携带了参数
-
还需要一个请求头: setRequestHeader()
-
请求头中需要如何书写:
=>键: content-type
=>值:
->查询字符串: 'application/x-www-form-urlencoded'
->json 格式: 'application/json'
->二进制流: 'multipart/form-data'
const xhr = new XMLHttpRequest()
xhr.open('post','http://localhost:8888/test/fourth')
xhr.onload = function () {
// 这里拿到我们的结果
let res = JSON.parse(xhr.responseText)
console.log(res);
}
// 添加一个请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// xhr.setRequestHeader('content-type', 'application/json')
// xhr.setRequestHeader('content-type', 'multipart/form-data')
// send里面就是请求体
xhr.send('name=Tom&age=25')