Ajax加强
目录
1.XMLHttpRequest的基本使用
2.数据交换格式
3.封装自己的Ajax函数
4.XMLHttpRequest Level2的新特性
5.jQuery高级用法
6.axios
一、XMLHttpRequest的基本使用
1.1什么是XMLHttpRequest
XMLHttpReques(简称xhr) 是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装起来。
1.2使用xhr发起GET请求
步骤:
1.创建xhr对象
2.调用xhr.open()函数
3.调用xhr.send()函数
4.监听xhr.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></body> <script> // 1.创建 XHR 对象 var xhr = new XMLHttpRequest(); // 2.调用 open 函数 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks"); // 3.调用send函数 xhr.send(); // 4.监听 onreadystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 获取服务器响应的数据 console.log(xhr.responseText); } }; </script> </html>
1.3使用xhr发起带参数的GET请求
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
1.4了解xhr对象的readyState属性
XMLHttpRequest对象readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于下状态的一个:
值 | 状态 | 描述 |
0 | UNSENT | XMLHttpRequest对象已被创建,但尚未调用open方法 |
1 | OPENED | open()方法已经被调用 |
2 | HEADERS_RECEIVED | send()方法已经被调用,响应头也已经被接收 |
3 | LOADING | 数据接收中,此时response属性中已经包含部分数据 |
4 | DONE | Ajax请求完成,这意味着数据传输已经彻底完成或失败 |
1.5查询字符串
1.
定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)
格式:讲英文的 ? 放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&符号进行分隔。以这个形式,可以将想要发给服务器的数据添加到URL中。
// 不带参数的URL地址 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?"); // 带一个参数的URL地址 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1"); // 带两个参数的URL地址 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记");
2.GET请求携带参数的本质
无论使用$ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到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></body> <script src="/lib/jquery.min.js"></script> <script> $.get( "http://www.liulongbin.top:3006/api/getbooks", { id: 1, bookname: "西游记" }, function (res) { console.log(res); } ); $.ajax({ method: "GET", url: "http://www.liulongbin.top:3006/api/getbooks", data: { id: 1, bookname: "西游记", }, }); </script> </html>
1.6 URL编码与解码
1.什么是编码
URL地址,只允许出现在相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。
http://www.liulongbin.top:3006/api/getbooks?id:1&bookname:西游记 //经过URL编码之后,URL地址编程如下格式: http://www.liulongbin.top:3006/api/getbooks?id:1&bookname=
%E8%A5BF %E6%B8%B8 %E8%AE%B0
2.如何对URL进行编码与解码
浏览器提供了URL编码与解码的API,分别是:
encodeURL()编码的函数
decodeURL()解码的函数
<script> var str = "秦浩洋"; var str2 = encodeURI(str); console.log(str2); var str3 = decodeURI("%E6%B5%A9%E6%B4%8B"); console.log(str3); </script>
3.URL编码的注意事项
由于浏览器会自动对URL地址进行编码操作,因此,大多数情况下,程序员不关心URL地址的编码与解码操作.
1.7使用xhr发起POST请求
步骤:
1.创建xhr对象
2.调用xhr.open()函数
3.设置Content-Type属性(固定写法)
4.调用xhr.send()函数,同时指定要发送的数据
5.监听xhr.send()函数,同时指定发送的数据
<!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></body> <script> // 1.创建xhr对象 var xhr = new XMLHttpRequest(); // 2.调用open函数 xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook"); // 3.设置Contene-Type属性 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 4.调用send函数 xhr.send("bookname=水浒传&author=施耐庵&publisher=上海图书出版社"); // 5.监听事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; </script> </html>
2.数据交换格式
2.1什么是数据交换格式
数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域,经常提及的两种数据交换分别是XML和JSON。其中XML用的非常少,所以我们重点要学习的数据交换格式就是JSON。
2.2XML
1.什么是XML
XML的英文全称是EXtensible Markup Language,即可扩展标记语言。因此,XML和HTML类似,也是一种标记语言。
HTML:
XML:
2.XML和HTML的区别
XML和HTML虽然都是标记语言,但是,它们两者之间没有任何的关系
HTML被设计用来描述网页上的内容的载体
XML被设计用来传输和存储数据,是数据的载体
3.XML的缺点
1.XML格式臃肿,和数据无关的代码太多,体积大,传输效率低
2.在JavaScript中解析比较麻烦
2.3JSON
1.什么是JSON
概念:JSON的英文全称是JavaScriptObjectNotation,即“JavaScript 对象表示法”。简单来讲,
JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,
JSON的本质是字符串。
作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XMl,专门用于存储和传输数据,但是
JSON比XML更小、更快、更易解析。
现状:JSON是在2001年开始被推广和使用的数据格式,到现在位置JSON已经成为了主流的数据交换格式。
2.JSON的两种结构
JSON就是用字符串来表示JavaScript的对象和数组。所以,JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种的数据结构。
对象结构:对象结构在JSON中表示为{}括起来的内容。数据结构为{key: value, key: value, ...}]的键值对结构。其中,key必须是使用英文的双引保包裹的字符串,value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
数组结构:数组结构在JSON中表示为[ ]括起来的内容。数据结构为["java","JavaScript",30,true...]。
数组中数据的类型可以是数字字符串、布尔值、null、数组、对象6种类型
3.JSON语法注意事项
1.属性名必须使用双引号包裹
2.字符串类型的值必须使用双引号包裹
3.JSON中不允许使用单引号表示字符串
4.JSON中不能写注释
5.JSON的最外层必须是对象或数组格式
6.不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据。
JSON的本质:用字符串来表示JavaScript的对象数据或数组数据
4.JSON和JS对象的关系
JSON是JS对象的字符串表示一个JS对象的信息,本质是一个字符串。例如:
5.JSON和JS对象的互转
要实现从JSON字符串转换为JS对象,使用JSON.parse()方法:
<script> var jsonSTR = '{"a":"hello","b":"world"}'; var obj = JSON.parse(jsonSTR); console.log(obj); </script>
要实现从JS对象转换为JSON字符串,使用JSON.stringify()方法:
<script> var xhr = new XMLHttpRequest(); xhr, open("GET", "http://www.liulongbin.top:3006/api/getbooks"); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.dtstus === 200) { console.log(xhr.responseText); var result = JSON.parse(xhr.responseText); console.log(result); } }; </script>
6.序列化和反序列化
把数据对象转换为字符串的过程,叫做序列化,例如:调用JSON.strgify()函数操作,叫做JSON序列化。
把字符串转换为数据对象的过程,叫做反序列化,例如:调用JSON.parse()函数的操作,叫做JSON反序列化
3.封装自己的Ajax函数
3.1要实现的效果
3.2定义options参数选项
itheima()函数是我们自定义的Ajax函数,它接收一个配置对象作为参数,配置对象中可以配置如下属性:
method 请求的类型
url 请求的URL地址
data 请求携带的数据
success请求成功之后的回调函数
3.3处理data参数
需要把data对象,转化成查询字符串的格式,从而提交给服务器,因此提前定义resolveData函数如下:
ITheima.js: function resolveData(data) { var arr = []; for (var k in data) { var str = k + "=" + data[k]; arr.push(str); } return arr.join("&"); } var res = resolveData({ name: "zs", age: 20 }); console.log(res); 测试页面.html <script src="js/ITheima.js"></script>
3.4ITheima函数
在ITheima()函数中,需要创建xhr对象,并监听onreadystatechange事件:
3.5判断请求类型
不同的请求类型,对应xhr对象的不同操作,因此需要对请求类型进行if...else...的判断
3.6测试ITheima的可用性
<!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></body> <script src="js/ITheima.js"></script> <script> // ITheima({ // method: "GET", // url: "http://www.liulongbin.top:3006/api/getbooks", // data: { // di: 1, // }, // success: function (res) { // console.log(res); // }, // }); ITheima({ method: "post", url: "http://www.liulongbin.top:3006/api/addbook", data: { bookname: "水浒传", author: "施耐庵", publisher: "背景图书出版社", }, success: function (res) { console.log(res); }, }); </script> </html>
4.XMLHttpRequest Level2的新特性
1.旧版XMLHttpRequest的缺点
1.只支持文本数据的传输,无法用来读取和上传文件
2.传送和接收数据时,没有进度信息,只能提示有没有完成
2.XMLHttpRequest Level2的新功能
1.可以设置HTTP请求的时限
2.可以使用FormData对象管理表单数据
3.可以上传文件
4.可以获得数据传输的进度信息
4.2设置HTTP请求时限
有时,Ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本XMLHttpRequest对象,增加了timeout属性,可以设置HTTP请求的时限:
上面的语句,将最长等待时间设为3000毫秒。过来这个时限,就自动停止HTTP请求。与之配套的还有一个timeout事件,用来指定回调函数:
<script> var xhr = new XMLHttpRequest(); // 设置超时时间 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>
4.3FormData对象管理表单数据
Ajax操作往往用来提交数据。为了方便表单处理,HTML5新增了一个formData对象,可以模拟表单操作:
<script> // 1.创建FormData实例 var fd = new FormData(); // 2.调用append函数,向fd中追加数据 fd.append("uname", "秦浩洋"); fd.append("upwd", "666666"); 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>
FormData对象也可以用来获取网页表单的值,实例代码如下:
<body> <form id="form1"> <input type="text" name="uname" autocomplete="off" /> <input type="password" name="upwd" /> <button type="submit">提交</button> </form> </body> <script> // 1.通过DOM操作,获取到form表单元素 var form = document.querySelector("#form1"); form.addEventListener("submit", function (e) { // 阻止表单的默认提交行为 e.preventDefault(); // 创建FormData,快速获取到form表单中的数据 var fd = new FormData(form); 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>
4.4上传文件
新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件
实现步骤:
1.定义UL结构
2.验证是否选择了文件
3.向FormData中追加文件
4.使用xhr发起上传文件的请求
5.监听onreadystatechange事件
1.定义UI结构
<!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> <!-- 1.文件选择框 --> <input type="file" id="file1" /> <!-- 2.上传文件的按钮 --> <button id="btnUpload">上传文件</button> <br /> <!-- 3.img标签,来显示上传成功以后的图片 --> <img src="" alt="" id="img" width="800" /> </body> <script></script> </html>
2.验证是否选择了文件
<script> // 1.获取到文件上传按钮 var btnUpload = document.querySelector("#btnUpload"); // 2.为按钮绑定单击事件处理函数 btnUpload.addEventListener("click", function () { //3.获取用户选择的文件列表 var files = document.querySelector("#file1").files; if (files.length <= 0) { return alert("请选择要上传的文件!"); } console.log("用户选择了待上传的文件"); }); </script>
3.向FormData中追加文件
<script> // 1.获取到文件上传按钮 var btnUpload = document.querySelector("#btnUpload"); // 2.为按钮绑定单击事件处理函数 btnUpload.addEventListener("click", function () { //3.获取用户选择的文件列表 var files = document.querySelector("#file1").files; if (files.length <= 0) { return alert("请选择要上传的文件!"); } var fd = new FormData(); // 将用户选择的文件,添加到FormData中 fd.append("avatar", files[0]); }); </script>
4.使用xhr发起上传文件的请求
5.监听onreadystatechange事件
<script> // 1.获取到文件上传按钮 var btnUpload = document.querySelector("#btnUpload"); // 2.为按钮绑定单击事件处理函数 btnUpload.addEventListener("click", function () { //3.获取用户选择的文件列表 var files = document.querySelector("#file1").files; if (files.length <= 0) { return alert("请选择要上传的文件!"); } var fd = new FormData(); // 将用户选择的文件,添加到FormData中 fd.append("avatar", files[0]); //创建xhr对象 var xhr = new XMLHttpRequest(); // 调用open函数,指定请求类型与URL地址。其中,请求类型必须为POST xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar"); // 发起POST请求 xhr.send(fd); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); if (data.status === 200) { // 上传成功 document.querySelector("#img").src = "http://www.liulongbin.top:3006" + data.url; } else { // 上传失败 console.log("图片上传失败!" + data.message); } } }; }); </script>
4.5显示文件上传的进度
需要引入boostrap.css
需要引入jQuery.js
1.
新版本的XMLHttpRequest对象中,可以通过监听xhr.upload.ogress事件来获取文件的上传进度
基于上面代码添加
// 监听文件上传的进度 xhr.upload.onprogress = function (e) { if (e.lengthComputable) { // 计算出上传的进度 var procentComplete = Math.ceil((e.loaded / e.total) * 100); console.log(procentComplete); } };
2.
<!-- bootstrap 中的进度条 --> <div class="progress" style="width: 500px; margin: 15px 10px"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 80%" id="percent" > 80% </div> </div>
3.监听上传进度的事件 | 动态进度条
// 监听文件上传的进度 xhr.upload.onprogress = function (e) { if (e.lengthComputable) { // 计算出上传的进度 var procentComplete = Math.ceil((e.loaded / e.total) * 100); console.log(procentComplete); // 动态设置进度条 $("#percent") .attr("style", "width:" + procentComplete + "%") .html(procentComplete + "%") .html(procentComplete + "%"); } };
4.监听上传完成的事件
5.1jQuery实现文件上传
引入jQuery.js
1.定义UI结构
2.验证是否选择了文件
<script> $(function () { $("#btnUpload").on("click", function () { var files = $("#file1")[0].files; if (files.length <= 0) { return alert("请选择文件后再上传"); } console.log("ok"); }); }); </script>
3.向FormData中追加文件
4.使用jQuery发起上传文件的请求
<script> $(function () { $("#btnUpload").on("click", function () { var files = $("#file1")[0].files; if (files.length <= 0) { return alert("请选择文件后再上传"); } var fd = new FormData(); fd.append("avatar", files[0]); // 发起 jQuery的Ajax请求,上传文件 $.ajax({ method: "POST", url: "http://www.liulongbin.top:3006/api/upload/avatar", data: fd, processData: false, contentType: false, success: function (res) { console.log(res); }, }); }); }); </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性