凯的个人博客

Ajax 网络请求

5/1/2024 js

# Ajax 网络请求

  • 前后端的通信 使用的是什么？ --作用
  • 前端具体代码
  • 后端接口以及文档
  • ajax请求的网络状态码【记忆特殊的状态码】
  • JSON数据的转化 - 数据通信过程
  • 请求头设置【前后端约定】
  • ajax 的封装
  • axios 的使用 promise+ajax

# 1.前端和后端 数据通信的方式

ajax

websocket 实时通信

  • axios 通过ajax +promise 封装实现
  • fetch 代替ajax的 ，自身就有promise

# 2.前端具体代码

  • 发送get请求 --- 核心4句代码

  • 发送post请求 --- 核心5句代码

  • 上传文件的请求 --- 核心4句代码

# 1.发送get请求

服务器地址： http://8.137.157.16:8099

接口文档：https://www.showdoc.com.cn/2477324017799042/11000557529828970`

//1.实例化ajax 对象
let xhr = new XMLHttpRequest();

//2.设置请求方式 请求的地址 + 数据(get刚发要数据，其余不要)
xhr.open('请求方式'，'请求的地址?key=val&key1=val1&key2=val2')

//3.发送
xhr.send();

//4.监听步骤 获取后端的返回数据
xhr.onreadystatechange = function(){
	//判断：步骤 == 4   同时  网络畅通：200    
    if(xhr.readyState == 4 && xhr.status == 200){
        //打印后端返回数据
        console.log（xhr.responseTest）
    }
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2.发送post请求

  • 请求头：以form表单格式 发送数据
//1.实例化ajax 对象
let xhr = new XMLHttpRequest();

//2.设置请求方式 请求的地址
xhr.open('请求方式'，'请求的地址')

//3.设置请求头 限制前后端 数据格式
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

//4.发送+数据
xhr.send('key=val&key1=val1&key2=val2');

//5.监听步骤 获取后端的返回数据
xhr.onreadystatechange = function(){
	//判断：步骤 == 4   同时  网络畅通：200    
    if(xhr.readyState == 4 && xhr.status == 200){
        //打印后端返回数据
        console.log(xhr.responseText)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  • 以json格式发送
//1.实例化ajax 对象
let xhr = new XMLHttpRequest();

//2.设置请求方式 请求的地址
xhr.open('请求方式'，'请求的地址')

//3.设置请求头 限制前后端 数据格式
xhr.setRequestHeader('Content-type','application/json')

//4.发送+数据
let data = {key:'xxxx',key1:'xxxx'};
xhr.send(JSON.stringify(data))

//5.监听步骤 获取后端的返回数据
xhr.onreadystatechange = function(){
	//判断：步骤 == 4   同时  网络畅通：200    
    if(xhr.readyState == 4 && xhr.status == 200){
        //打印后端返回数据
        console.log(xhr.responseText)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 3.文件上传

文件： 0 和 1 组成的很长很大的 一段数字

# 在js中如何获取二进制文件流

在js中只能够获得file对象:

在页面 <input type="file" />

监听input 的值改变change 事件

inp.files[0] 获取上传的第0个文件 file对象

{
    filename:'xxxx.png',
    size:18180,    //18k   18180/1024(单位k)
    type：'image/docx'
}
1
2
3
4
5

在file对象放到一个formData 表单里面 就可自动转化为二进制文件流 blob file

//已经有 file==file文件对象
//1.创建formData 表单
let formData = new FormData();
//2.将file对象 放到这个表单中  append:给表单追加一个 表单项 
formData.append('key',file对象)
1
2
3
4
5
//1.实例化ajax 对象
let xhr = new XMLHttpRequest();


//2.设置 请求方式 请求的地址
xhr.open('请求方式','请求的地址')

//组装二进制文件流 blob file 
let formData = new FormData()
formData.append('key'，file对象)

//3.发送 +数据（要按照请求头的格式进行对应）
xhr.send(formData);


//4.监听后端的返回状态和 数据获取:请求步骤改变
xhr.onreadystatechange = function(){
    //如果步骤到了第4步 同时  网络是畅通的 ===证明：请求是成功的
    if(xhr.readyState == 4 && xhr.status ==200){
     	  	 //获取后端返回前端的数据:  xhr.responseText  json字符串
     }
   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

案例

<body>
    <input type="file">
    <img src="" alt="">
    <script>
        //获取到file对象
        //1.获取dom
        let inp = document.querySelector('input')
        let img = document.querySelector('img')
        // 监听input 的change事件 
        inp.addEventListener('change', function () {
            // 获取上传的所有文件对象列表
            console.log(inp.files);
			// 获取文件列表 第0个file对象
            let file = inp.files[0]
            // 开始ajax 传输数据
            //1.实例化ajax 对象
            let xhr = new XMLHttpRequest()
            //2.设置 请求方式 请求的地址
            xhr.open('post', 'http://8.137.157.16:8099/test/upload')
            // 组装formData数据
            let formData = new FormData()
            // 给formData表单追加一个 文件
            formData.append('file', file)
            //3.发送 +数据（要按照请求头的格式进行对应）
            xhr.send(formData)

            //4.监听步骤 获取后端的返回数据
            xhr.onreadystatechange = function () {
                //判断：步骤 == 4   同时  网络畅通：200    
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 获取后端返回数据--转换为对象
                    let res = JSON.parse(xhr.responseText)
                    console.log(res);
                    // 图片的回显：将后端返回的在线图片地址 显示到页面上
                    img.src = 'http://8.137.157.16:8099'+res.imgUrl
                }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 3.网络状态码

网络状态码：在前后端 通信过程中 如果出现了异常情况，报对应异常情况编号

100 ~ 199 预请求【三次握手 四次挥手】

200 ~ 299 接口请求成功

300 ~ 399 静态资源重定向 成功

400 ~ 499 失败

500 ~ 599 失败【后端代码】

记忆：

200

101 预请求 【三次握手 四次挥手】

304 资源重定向 重定向成功

400---406

415：权限错误

500

ajax 封装与应用