ajax学习第三天

文章目录

ajax学习第三天

1. XMLHttpRequest

1.1 xhr的概念

是浏览器提供的js对象，通过它，可以请求服务器上的数据资源，jQuery中的ajax函数，就是基于xhr对象封装出来的

1.2 使用xhr发起get请求

步骤
1. 创建xhr对象
2. 调用open函数
3. 调用send函数
4. 监听xhr状态

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // 创建xhr对象
        var xhr = new XMLHttpRequest();
        // 调用xhr对象的open函数，指定请求方式和url地址
 
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
 
        // 调用xhr的send函数
 
        xhr.send();
 
        //监听onreadystatechange
 
        xhr.onreadystatechange = function() {
            // 判断xhr的请求状态(readyState)和服务器的响应状态（status），
            // 固定写法，与返回信息里面的status不是同一个值
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 打印返回的信息
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

1.3 xhr对象的readyState属性

表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态的一个

值	状态	说明
0	UNSET	xhr对象已创建，open函数未调用
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已调用，响应头已被接收
3	LOADING	数据接收中，其中response属性已经包含部分数据
4	DONE	Ajax请求完成，数据已经彻底传输成功或者失败

1.4 使用xhr发起带参数的get请求

在调用open()函数期间，为url地址拼接参数字符串（查询字符串）

 xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks?id=1")

?id=1为url后面拼接的字符串，称为查询字符串

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        var xhr = new XMLHttpRequest();
        // 发起带参数的get请求
 
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

1.5 查询字符串

在url的末尾加上用于向服务器发送信息的字符串（变量）
格式：将英文？放在url的末尾，然后在加上参数=值，如果添加多个参数，参数之间使用&符号分隔
示例：多个参数的url地址

 "http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记"

1.6 get请求携带参数的本质

无论是使用jQuery封装的ajax函数，get函数，还是xhr对象的open函数，都是将参数放在url地址尾部（拼接字符串）
示例

 $.get("url",{name:'666',age:18},function(){})
//等价于
$.get("url?name:666&age:18",function(){})
$.ajax(method:"get",url:"url",data{name:'666',age:18},success:function(){})
//等价于
$.ajax(method:"get",url:"url?name:666&age:18",success:function(){})

1.7 URL 编码

场景：在url地址中，只允许出现英文相关的字母、标点符号、数字，不允许出现中午字符，如果出现，需要对中文字符进行编码
使用英文字符（安全的字符）表示非英文字符（不安全的字符）
编码前

 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记");

编码后

在这里插入图片描述

1.8 URL的编码和解码

编码函数：encodeURL()
解码函数：decodeURL()

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        var str = '我是编码函数';
        // 使用编码函数编码
 
        var result = encodeURI(str);
 
        console.log(result);
 
        // 使用解码函数解码
 
        var result2 = decodeURI(result.substr(9));
        console.log(result2);
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

1.9 使用xhr发起post请求

步骤
1. 创建xhr对象
2. 调用open()函数
3. 设置Content-Type属性（固定写法）
4. 调用send()函数，指定要传输的数据（已查询字符串的格式）
5. 监听onreadystatechange 事件
示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // 创建xhr对象
 
        var xhr = new XMLHttpRequest();
 
        // 调用open函数，设置方式为post
        xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
 
        // 设置Content-Type属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
        // 调用send函数，传递要提交的数据
 
        xhr.send('bookname=一念永恒&author=耳根&publisher=上海图书出版社');
 
        //监听 onreadystatechange事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

2. 数据交换格式

定义：服务器端与客户端之间**进行数据传输和交换的格式**
前端提及的交换格式
- xml
- json（常用）

2.1 XML

XML(EXtensible Markup Language)，可扩展标记语言，与html一样，也是页面标记语言

2.2 XML与HTML的区别

HTML用于描述网页上的内容，是网页内容的载体
XML被设计用于传输和存储数据，是数据的载体

2.3 XML的缺点

在这里插入图片描述

2.4 JSON

定义：JSON(JavaScript Object Notation),即JavaScript对象表示法，json就是JavaScript对象和数组的字符串表示法****，本质是字符串
作用：作用上类型XML，但比XML更小，更快，更容易解析

2.4.1 JSON的两种结构

对象结构
数组结构

2.4.2 JSON的对象结构

对象结构，json中用{}包裹起来的结构，形式为{key,value},其中==key必须使用""包裹，value的数据类型可以是数字，字符串（双引号包裹），布尔值，null，数组，对象==
示例

在这里插入图片描述

2.4.3 JSON的数组结构

数组结构：JSON中用[]包裹起来的内容，其中的内容可以是，数字，字符串，布尔值，null，数组，对象
示例

在这里插入图片描述

注意点

在这里插入图片描述

2.5 json和js对象

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // js对象
 
        var obj = {
            key: 100,
            value: 50
        }
 
        // json 字符串
 
        var json = '{"key":100,"value":50}';
    </script>
</body>
 
</html>

2.5.1 json和js对象的转换

将json对象转换成js对象(JSON.parse())

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // 一个json字符串
 
        var json = '{"a":"hello","b":"world"}';
 
        // 将json字符串转换成js对象
 
        var obj = JSON.parse(json);
 
        console.log(obj);
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

将 js对象转换成 JSON对象(JSON.stringify())

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // 一个js对象
 
        var obj = {
            a: 'world',
            b: 'hello'
        }
 
        // 转换成json字符串
 
        var json = JSON.stringify(obj);
 
        console.log(json);
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

发起get请求

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // 新建xhr对象
 
        var xhr = new XMLHttpRequest();
        // open
 
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
 
        // send
 
        xhr.send();
 
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                // 将json字符串转换成对象
 
                var obj = JSON.parse(xhr.responseText);
 
                console.log(obj);
            }
        }
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

2.6 序列化和反序列化

将数据对象转换成字符串的过程，**称为序列化，**JSON.stringify()叫做JSON的序列化
将字符串类型转换成数据对象的过程，**叫做反序列化，**JSON.parse()叫做JSON的反序列化

2.7 封装一个自己的Ajax函数

myajax.js

 // 转换data对象 为拼接字符串
 
function switchDate(data) {
    var arr = [];
    for (k in data) {
        var str = k + '=' + data[k];
        arr.push(str);
    }
 
    return arr.join("&");
 
}
 
// 实现ajax函数的作用
 
function myajax(obj) {
 
 
 
    // 拼接字符串
    var qs = switchDate(obj.data);
    var xhr = new XMLHttpRequest();
    if (obj.method.toUpperCase() === 'GET') {
        xhr.open("GET", obj.url + '?' + qs);
        xhr.send();
    } else if (obj.method.toUpperCase() === 'POST') {
        xhr.open("POST", obj.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(qs);
    }
 
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var jsonstr = xhr.responseText;
            var jsobj = JSON.parse(jsonstr);
            obj.success(jsobj);
        }
    }
 
 
}

测试的html

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/MyAjax.js"></script>
</head>
 
<body>
    <script>
        myajax({
            method: "GET",
            url: "http://www.liulongbin.top:3006/api/getbooks",
            data: {
                id: 1
            },
            success: function(res) {
                console.log(res);
            }
        })
 
        myajax({
            method: "post",
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '一念永hen',
                author: '耳根',
                publisher: '上海图书出版社'
            },
            success: function(res) {
                console.log(res);
            }
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

3. XMLHttpRequest Level2的新特性

3.1 旧版xhr的缺点

只支持文本数据的传输，无法用来读取和上传文件
传输和接收数据时，没有进度信息，只能提示有没有完成

3.2 xhr 2的新功能

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

3.3 设置HTTP请求时限

设置xhr的timeout属性

 xhr.timeout=300   //单位是毫秒

超时后的回调函数

 xhr.ontimeout=function(){}

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        var xhr = new XMLHttpRequest();
        // 设置http请求时限
 
        xhr.timeout = 30;
 
        // 超时处理函数
 
        xhr.ontimeout = function() {
            console.log("请求超时");
        }
 
        xhr.open("get", "http://www.liulongbin.top:3006/api/getbooks");
        xhr.send();
 
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

3.4 xhr2的FormData对象

用于实现表单的数据收集

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // 创建FormData 对象
 
        var fd = new FormData();
 
        // 向FormData对象中添加数据
 
        fd.append("id", "2");
 
        // 创建xhr对象
 
        var xhr = new XMLHttpRequest();
 
        xhr.open("post", "http://www.liulongbin.top:3006/api/formdata");
 
        // 发送formdate对象
        xhr.send(fd);
 
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText));
            }
        }
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

示例：实现表单数据的收集（注意阻止表单的默认提交行为）

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <form id="form1">
        姓名：<input type="text" name="uname"> 密码：
        <input type="password" name="upwd">
        <button type="submit">提交</button>
 
    </form>
 
    <script>
        // 选择表单元素
 
 
        var form1 = document.querySelector("#form1");
        // 创建FormData对象
        form1.addEventListener("submit", function(e) {
 
            // 阻止表单默认提交
 
            e.preventDefault();
            // 把form1传入fd
            var fd = new FormData(form1);
 
            var xhr = new XMLHttpRequest();
 
            xhr.open("post", "http://www.liulongbin.top:3006/api/formdata");
 
            xhr.send(fd);
 
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

3.5 xhr实现文件上传

在这里插入图片描述

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <!-- 选择文件按钮 -->
    <input type="file" id="select">
 
    <!-- 上传文件到服务器的按钮 -->
    <button id="upload">上传文件</button>
 
    <!-- 显示上传给服务器的图片 -->
    <img src="" alt="">
 
    <script>
        // 获取上传按钮
 
        var upload = document.querySelector("#upload");
        var select = document.querySelector("#select");
 
        // 绑定点击事件
 
        upload.addEventListener("click", function() {
            // 判断是否选择了文件
            if (select.files.length > 0) {
 
                // 创建FormData对象
 
                var fd = new FormData();
                // 将文件加入fd中
                fd.append("avatar", select.files[0]);
 
                // 创建xhr对象
 
                var xhr = new XMLHttpRequest();
 
                xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');
 
                xhr.send(fd);
 
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var res = JSON.parse(xhr.responseText);
 
                        // 根据服务器的返回信息判断是否上传成功
                        if (res.status === 200) {
                            console.log(res);
                            // 将服务器返回的url地址获取
 
                            document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
                        } else {
                            alert("文件上传失败");
                        }
                    }
                }
 
            } else {
                return alert("请选择要上传的文件");
            }
 
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

3.6 显示上传的进度

 xhr.upload.onprogress = function(e) {
                    // 判断当前资源是否具有可计算的长度
                    if (e.lengthComputable) {
                        // e.loaded  已经上传的字节数
                        // e.total  上传的总字节数
 
                        console.log(Math.ceil(e.loaded / e.total * 100));
                    }
                }

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <!-- 选择文件按钮 -->
    <input type="file" id="select">
 
    <!-- 上传文件到服务器的按钮 -->
    <button id="upload">上传文件</button>
 
    <!-- 显示上传给服务器的图片 -->
    <img src="" alt="">
 
    <script>
        // 获取上传按钮
 
        var upload = document.querySelector("#upload");
        var select = document.querySelector("#select");
 
        // 绑定点击事件
 
        upload.addEventListener("click", function() {
            // 判断是否选择了文件
            if (select.files.length > 0) {
 
                // 创建FormData对象
 
                var fd = new FormData();
                // 将文件加入fd中
                fd.append("avatar", select.files[0]);
 
                // 创建xhr对象
 
                var xhr = new XMLHttpRequest();
 
                // 监听文件上传的进度
 
                xhr.upload.onprogress = function(e) {
                    // 判断当前资源是否具有可计算的长度
                    if (e.lengthComputable) {
                        // e.loaded  已经上传的字节数
                        // e.total  上传的总字节数
 
                        console.log(Math.ceil(e.loaded / e.total * 100));
                    }
                }
 
                xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');
 
                xhr.send(fd);
 
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var res = JSON.parse(xhr.responseText);
 
                        // 根据服务器的返回信息判断是否上传成功
                        if (res.status === 200) {
                            console.log(res);
                            // 将服务器返回的url地址获取
 
                            document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
                        } else {
                            alert("文件上传失败");
                        }
                    }
                }
 
            } else {
                return alert("请选择要上传的文件");
            }
 
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

3.7 进度条ui(使用了bs3框架)

 <link rel="stylesheet" href="./lib/bootstrap.css">
 
<!-- 进度条效果 -->
 
    <div class="progress" style="width:300px">
        <div class="progress-bar progress-bar-striped active" style="width: 0">
            0%
        </div>
    </div>

js部分

 xhr.upload.onprogress = function(e) {
                    // 判断当前资源是否具有可计算的长度
                    if (e.lengthComputable) {
                        // e.loaded  已经上传的字节数
                        // e.total  上传的总字节数
 
                        console.log(Math.ceil(e.loaded / e.total * 100));
 
                        // 修改进度条的样式
                        $(".progress .progress-bar").css({
                            width: Math.ceil(e.loaded / e.total * 100) + '%'
                        }).html(Math.ceil(e.loaded / e.total * 100) + '%');
                    }
                }

总的

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>
 
<body>
    <!-- 选择文件按钮 -->
    <input type="file" id="select">
 
    <!-- 上传文件到服务器的按钮 -->
    <button id="upload">上传文件</button>
 
    <!-- 显示上传给服务器的图片 -->
    <img src="" alt="">
 
 
    <!-- 进度条效果 -->
 
    <div class="progress" style="width:300px">
        <div class="progress-bar progress-bar-striped active" style="width: 0">
            0%
        </div>
    </div>
 
    <script>
        // 获取上传按钮
 
        var upload = document.querySelector("#upload");
        var select = document.querySelector("#select");
 
        // 绑定点击事件
 
        upload.addEventListener("click", function() {
            // 判断是否选择了文件
            if (select.files.length > 0) {
 
                // 创建FormData对象
 
                var fd = new FormData();
                // 将文件加入fd中
                fd.append("avatar", select.files[0]);
 
                // 创建xhr对象
 
                var xhr = new XMLHttpRequest();
 
                // 监听文件上传的进度
 
                xhr.upload.onprogress = function(e) {
                    // 判断当前资源是否具有可计算的长度
                    if (e.lengthComputable) {
                        // e.loaded  已经上传的字节数
                        // e.total  上传的总字节数
 
                        console.log(Math.ceil(e.loaded / e.total * 100));
 
                        // 修改进度条的样式
                        $(".progress .progress-bar").css({
                            width: Math.ceil(e.loaded / e.total * 100) + '%'
                        }).html(Math.ceil(e.loaded / e.total * 100) + '%');
                    }
                }
 
                xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');
 
                xhr.send(fd);
 
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var res = JSON.parse(xhr.responseText);
 
                        // 根据服务器的返回信息判断是否上传成功
                        if (res.status === 200) {
                            console.log(res);
                            // 将服务器返回的url地址获取
 
                            document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
                        } else {
                            alert("文件上传失败");
                        }
                    }
                }
 
            } else {
                return alert("请选择要上传的文件");
            }
 
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

3.8 监听文件上传成功

 // 文件上传成功的回调函数
xhr.upload.onload = function() {
                    $(".progress .progress-bar").removeClass().addClass("progress-bar progress-bar-success");
                }

效果图

在这里插入图片描述

4. jQuery实现文件上传

ajaxStart和ajaxComplete函数

 // 监听 ajax请求发起时的函数
 
                    $(document).ajaxStart(function() {
                        // 回调函数中显示加载的图片
                        $("#loading").show();
                    })
 
                    // 监听 ajax请求结束的函数 ajax
 
                    $(document).ajaxComplete(function() {
                        $("#loading").hide();
 
                    })

上传文件时的设置

 // 不修改content-Type的值，使用FormData默认的content-Type的值
                        contentType: false,
                        // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
                        processData: false,

html

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
    <script src="./lib/jquery.js"></script>
</head>
 
<body>
    <!-- 选择文件按钮 -->
    <input type="file" id="select">
 
    <!-- 上传文件到服务器的按钮 -->
    <button id="upload">上传文件</button>
 
    <img src="./loading.gif" alt="" style="display: none;" id="loading">
 
    <!-- 显示上传给服务器的图片 -->
    <br>
    <img src="" alt="" id="pic">
 
 
 
 
    <script>
        // 判断是否有文件选中
 
        $(function() {
            $("#upload").on("click", function() {
                // 转换成dom对象判断是否有文件
                if ($("#select")[0].files.length > 0) {
                    var fd = new FormData();
                    fd.append("avatar", $("#select")[0].files[0]);
 
                    // 监听 ajax请求发起时的函数
 
                    $(document).ajaxStart(function() {
                        // 回调函数中显示加载的图片
                        $("#loading").show();
                    })
 
                    // 监听 ajax请求结束的函数 ajax
 
                    $(document).ajaxComplete(function() {
                        $("#loading").hide();
 
                    })
 
                    $.ajax({
                        method: "post",
                        url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                        data: fd,
                        // 不修改content-Type的值，使用FormData默认的content-Type的值
                        contentType: false,
                        // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
                        processData: false,
                        success: function(res) {
                            console.log(res);
                            $("#pic").attr("src", 'http://www.liulongbin.top:3006' + res.url)
                        }
                    })
 
 
                } else {
                    return alert("请先选择文件");
                }
            })
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

5. axios

专注于网络数据请求的库
相当于xhr，axios简单易用
相对于jQuery，更加轻量化

5.1 使用axios发起get请求

语法

 axios.get('url',{params:{参数}}).then(回调函数)

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios 文件 -->
    <script src="./lib/axios.js"></script>
</head>
 
<body>
 
    <button id="btn">get请求</button>
 
 
    <script>
        document.querySelector("#btn").addEventListener("click", function() {
 
            // 发起get请求
            var url = "http://www.liulongbin.top:3006/api/get";
            var data = {
                name: "zs",
                age: 18,
            }
            axios.get(url, {
                params: data
            }).then(function(res) {
                console.log(res);
                // res是axios封装的数据
                // res.data才是服务器返回的数据
                console.log(res.data);
            })
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

5.2 使用axios发起post请求

语法

 axios.post('url',{参数}).then(回调函数)

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/axios.js"></script>
</head>
 
<body>
    <button id="btn">post请求</button>
 
    <script>
        document.querySelector("#btn").addEventListener("click", function() {
            // 发起post请求
 
            var url = 'http://www.liulongbin.top:3006/api/post';
            var data = {
                id: 1,
                name: "k"
            }
 
            axios.post(url, data).then(function(res) {
                console.log(res.data);
            })
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

5.3 直接使用axios发起get和post请求

语法

 axios({
    method:'请求类型',
    url:'请求地址',
    data:{
        post请求的参数
    },
    params:{
        get请求参数
    }
}).then(回调函数)

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/axios.js"></script>
</head>
 
<body>
    <button id="btn1">get请求</button>
    <button id="btn2">post请求</button>
 
    <script>
        // get请求
        document.querySelector("#btn1").addEventListener("click", function() {
            axios({
                method: 'get',
                url: 'http://www.liulongbin.top:3006/api/get',
                params: {
                    name: "k",
                    age: 18
                }
            }).then(function(res) {
                console.log(res.data);
            })
        })
 
        // post请求
 
        document.querySelector("#btn2").addEventListener("click", function() {
            axios({
                method: 'post',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    id: 1,
                    name: "666"
                }
            }).then(function(res) {
                console.log(res.data);
            })
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

posted @ 2022-03-09 19:51 凌歆阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· ajax复习

· ajax学习第二天

· ajax笔记

· Ajax加强

· Ajax day03

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<script>
	// 创建xhr对象
	var xhr = new XMLHttpRequest();
	// 调用xhr对象的open函数，指定请求方式和url地址

	xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");

	// 调用xhr的send函数

	xhr.send();

	//监听onreadystatechange

	xhr.onreadystatechange = function() {
	// 判断xhr的请求状态(readyState)和服务器的响应状态（status），
	// 固定写法，与返回信息里面的status不是同一个值
	if (xhr.readyState === 4 && xhr.status === 200) {
	// 打印返回的信息
	console.log(xhr.responseText);
	}
	}
	</script>
	</body>

	</html>

	$.get("url",{name:'666',age:18},function(){})
	//等价于
	$.get("url?name:666&age:18",function(){})
	$.ajax(method:"get",url:"url",data{name:'666',age:18},success:function(){})
	//等价于
	$.ajax(method:"get",url:"url?name:666&age:18",success:function(){})

	// 转换data对象为拼接字符串

	function switchDate(data) {
	var arr = [];
	for (k in data) {
	var str = k + '=' + data[k];
	arr.push(str);
	}

	return arr.join("&");

	}

	// 实现ajax函数的作用

	function myajax(obj) {



	// 拼接字符串
	var qs = switchDate(obj.data);
	var xhr = new XMLHttpRequest();
	if (obj.method.toUpperCase() === 'GET') {
	xhr.open("GET", obj.url + '?' + qs);
	xhr.send();
	} else if (obj.method.toUpperCase() === 'POST') {
	xhr.open("POST", obj.url);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send(qs);
	}

	xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
	var jsonstr = xhr.responseText;
	var jsobj = JSON.parse(jsonstr);
	obj.success(jsobj);
	}
	}


	}

	xhr.upload.onprogress = function(e) {
	// 判断当前资源是否具有可计算的长度
	if (e.lengthComputable) {
	// e.loaded 已经上传的字节数
	// e.total 上传的总字节数

	console.log(Math.ceil(e.loaded / e.total * 100));
	}
	}

	<link rel="stylesheet" href="./lib/bootstrap.css">

	<!-- 进度条效果 -->

	<div class="progress" style="width:300px">
	<div class="progress-bar progress-bar-striped active" style="width: 0">
	0%
	</div>
	</div>

	// 文件上传成功的回调函数
	xhr.upload.onload = function() {
	$(".progress .progress-bar").removeClass().addClass("progress-bar progress-bar-success");
	}

	// 监听 ajax请求发起时的函数

	$(document).ajaxStart(function() {
	// 回调函数中显示加载的图片
	$("#loading").show();
	})

	// 监听 ajax请求结束的函数 ajax

	$(document).ajaxComplete(function() {
	$("#loading").hide();

	})

	// 不修改content-Type的值，使用FormData默认的content-Type的值
	contentType: false,
	// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
	processData: false,

	axios({
	method:'请求类型',
	url:'请求地址',
	data:{
	post请求的参数
	},
	params:{
	get请求参数
	}
	}).then(回调函数)

ajax学习第三天

ajax学习第三天

文章目录

1. XMLHttpRequest

1.1 xhr的概念

1.2 使用xhr发起get请求

示例

1.3 xhr对象的readyState属性

1.4 使用xhr发起带参数的get请求

示例

1.5 查询字符串

1.6 get请求携带参数的本质

1.7 URL 编码

1.8 URL的编码和解码

示例

1.9 使用xhr发起post请求

2. 数据交换格式

2.1 XML

2.2 XML与HTML的区别

2.3 XML的缺点

2.4 JSON

2.4.1 JSON的两种结构

2.4.2 JSON的对象结构

2.4.3 JSON的数组结构

注意点

2.5 json和js对象

2.5.1 json和js对象的转换

发起get请求

2.6 序列化和反序列化

2.7 封装一个自己的Ajax函数

3. XMLHttpRequest Level2的新特性

3.1 旧版xhr的缺点

3.2 xhr 2的新功能

3.3 设置HTTP请求时限

示例

3.4 xhr2的FormData对象

示例：实现表单数据的收集（注意阻止表单的默认提交行为）

3.5 xhr实现文件上传

示例

3.6 显示上传的进度

示例

3.7 进度条ui(使用了bs3框架)

3.8 监听文件上传成功

4. jQuery实现文件上传

5. axios

5.1 使用axios发起get请求

示例

5.2 使用axios发起post请求

示例

5.3 直接使用axios发起get和post请求

示例

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜