第三十一章初始ajax

最新推荐文章于 2023-06-19 14:49:13 发布

Girasoless

最新推荐文章于 2023-06-19 14:49:13 发布

阅读量549

点赞数

本文链接：https://blog.csdn.net/Girasoles/article/details/128350471

版权

Ajax 异步 HTTP协议请求状态码请求方式

关键词由CSDN通过智能技术生成

一、初始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')