Ajax加强
一、XMLHttpRequest的基本使用
1.1 简介
XMLHttpRequest(简称xhr)市浏览器提供的js对象,通过它,可以请求服务器上的数据资源
1.2 使用xhr发起get 请求
第一步创建 xhr对象
第二步调用xhr.open()函数
第三步调用xhr.send()函数
第四步监听xhr.onreadystatechange事件
//步骤一 创建一个xhr对象
let xhr = new XMLHttpRequest();
//步骤二 调用open函数
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks")
//步骤三 调用send函数
xhr.send();
//步骤四 监听onreadystatechange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('获取成功了');
}
}
1.3 xhr对象的readyState属性
1.4 使用xhr发起带参数的GET请求
在url地址后边拼接参数(查询字符串)
1.5 查询字符串
查询字符串(URL参数)是指在URL的末尾加上用于服务器发送信息的字符串(变量)
GET请求写单参数的本质(直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器
1.6 URL编码与解码
1.6.1 简介
url地址中,只允许出现英文相关的字母,标点符号,数字 不允许出现中文字符,需要对中文进行编码(转义)
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印的字符)去表示哪些不安全的字符
使用英文字符去表示非英文字符
1.6.2 编码与解码
encodeURL() 编码的函数
decodeURL() 解码的函数
1.7 使用xhr发起POST请求
第一步 创建xhr对象
第二步 调用xhr.open()函数
第三步 设置Content-Type属性(固定写法)
第四步 调用xhr.send()函数 同时指定要发送的数据
第五步 监听xhr.onreadystatechange事件
//创建一个xhr 对象
let xhr = new XMLHttpRequest();
//调用open方法
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=施耐庵&出版社=上海出版社')
//监听事件
xhr.onreadystatechange = function () {
if (readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
二、 数据交换格式
2.1 定义
数据交换格式 就是服务器端与客户端之间进行数据传输与交换的格式
两种数据交换格式XML 和JSON
2.2 XML
2.2.1 什么是XML
全称EXtensible Markup Language(可扩展标记语言)
2.2.2 XML和HTML的区别
HTML被设计用来描述网页上的内容,是网页内容的载体
XML被设计用来传输和存储数据 是数据的载体
2.2.3 XML的缺点
XML格式臃肿,和数据无关,体积大,传输效率低
js中解析XML比较麻烦
2.3 JSON
2.3.1 定义
JSON就是js对象和数组的字符串表示法(json的本质就是字符串)
又称作 js对象表示法
作用:json是一种轻量级的文本数据交换格式 json比XML更小 更快 更易解析
2.3.2 JSON的两种结构
对象结构
数据结构{key:value,key:value}的键值对结构
key必须是使用英文的双引号包裹的字符串
value的数据类型可以是数字,字符串,布尔值,null,数组,对象
数组结构
用[]括起来的内容
数组中数据的类型可以是 数字 字符串 布尔值 null 数组 对象
2.3.3 JSON语法的注意事项
2.3.4 JSON和JS对象的关系
JSON是js杜祥的字符串表示法,使用文本表示一个JS对象的信息,本质是一个字符串
2.3.5 JSON和JS对象的互转
JSON转Js对象
JS转JSON字符串
2.3.6 序列化和反序列化
序列化
把数据对象转换为字符串的过程
调用JSON.stringify()函数
反序列换
把字符串转换为数据对象的过程
调用JSON.parse()函数
三、封装自己的Ajax函数
3.1 实现的效果
导入自定义的ajax函数库,调用自定义的函数,发起ajax数据请求
3.2 定义options参数选项
method 请求的类型
url 请求的URL地址
data 请求携带的数据
success 请求成功之后的回调函数
3.3 处理data参数
把data对象 转换成查询字符串的格式 从而提交给服务器
function resolve(data) {
let arr = []
for (let i in data) {
let str = i + '=' + data[i];
arr.push(str)
}
console.log('arr', arr)
console.log('2222', arr.join('&'))
return arr.join('&')
}
3.4 定义调用函数
需要创建xhr对象 并监听onreadystatechange事件
function itheima(options) {
let xhr = new XMLHttpRequest();
//把外界传递来的参数对象 转换为 查询字符串
let qs = resolve(options.data)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText)
option.success(res)
}
}
}
3.5 判断请求的类型
不同的请求类型(get或post) 进行if…else…判断
function itheima(options) {
let xhr = new XMLHttpRequest();
//把外界传递来的参数对象 转换为 查询字符串
let qs = resolve(options.data)
if (options.method.toUpperCase() === "GET") {
console.log("发起get请求")
//传的第一个是类型 第二个使接口地址 拼接数据
xhr.open('GET', options.url + '?' + qs)
xhr.send()
} else if (options.method.toUpperCase() === "POST") {
console.log("发起post请求")
xhr.open('POST', options.url)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(qs)
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText)
option.success(res)
}
}
}
调用方法
itheima({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: '水浒传',
author: '施耐庵',
publisher: '北京'
},
success: function (res) {
console.log('打印res', res);
}
})
四、XMLHttpRequest Level2的新特性
4.1 简介
4.1.1 旧版XMLHttpRequest的缺点
只支持文本数据的传输,无法用来读取和上传文件
传送和接收数据时,没有进度信息,只能提示没有完成
4.1.2 level2的新功能
可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息
4.2 设置HTTP请求时限
xhr.timeout=3000
xhr.ontimeout=funciton(e){alert(‘请求超时了’)}
4.3 FormData对象管理表单数据
html5新增formData属性 可以模拟表单操作
// 1. 新建 FormData 对象
var fd = new FormData()
// 2. 为 FormData 添加表单项
fd.append('uname', 'zs')
fd.append('upwd', '123456')
// 3. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与URL地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData 对象,这与提交网页表单的效果,完全一样
xhr.send(fd)
FormData也可以用来获取网页表单的值
// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault()
// 根据 form 表单创建 FormData 对象,会自动将表单数据填充到 FormData 对象中
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() {}
})
4.4 上传文件
4.4.1 定义UI结构
<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3. 显示上传到服务器上的图片 -->
<img src="" alt="" id="img" width="800" />
4.4.2 验证是否选择了文件
// 1. 获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮添加 click 事件监听
btnUpload.addEventListener('click', function() {
// 3. 获取到选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件!')
}
// ...后续业务逻辑
})
4.4.3 向FormData中追加文件
// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])
4.4.4 使用xhr发起了上传文件的请求
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数,指定请求类型与URL地址。其中,请求类型必须为 POST
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)
4.4.5 监听onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) { // 上传文件成功
// 将服务器返回的图片地址,设置为 <img> 标签的 src 属性
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else { // 上传文件失败
console.log(data.message)
}
}
}
4.5 显示文件上传的进度
4.5.1导入需要的库
JQuery库 bootstrap
4.5.2 基于Bootstrap渲染进度条
<!-- 进度条 -->
<div class="progress" style="width: 500px; margin: 10px 0;">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
0%
</div>
</div>
4.5.3 监听上传进度的事件
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
// 1. 计算出当前上传进度的百分比
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
$('#percent')
// 2. 设置进度条的宽度
.attr('style', 'width:' + percentComplete + '%')
// 3. 显示当前的上传进度百分比
.html(percentComplete + '%')
}
}
4.5.4 监听上传完成的事件
xhr.upload.onload = function() {
$('#percent')
// 移除上传中的类样式
.removeClass()
// 添加上传完成的类样式
.addClass('progress-bar progress-bar-success')
}
完整代码
<!-- 1.文件选择框 -->
<input type="file" id="filel">
<!-- 2.上传文件的按钮 -->
<button id="btn">上传文件</button>
<!-- 进度条 -->
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="precent" style="width: 0%">
45%
</div>
</div>
<br>
<!-- 3.图片文件标签 用来显示上传成功 -->
<img src="" alt="" id="img" width="800">
//绑定上传按钮点击事件
let btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
//获取选择的文件列表 files是个数组
let files = document.querySelector('#filel').files
console.log('files', files);
if (files.length <= 0) {
return alert('请上传文件')
}
console.log('用户选择了待上传的文件');
//向formData中追加文件
let fd = new FormData()
fd.append('avatar', files[0])
//创建xhr实例化对象
let xhr = new XMLHttpRequest()
//监听文件的上传进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
//当前文件的进度 除以 文件的大小
let pro = Math.ceil((e.loaded / e.total) * 100)
console.log('上传的进度', pro);
$('#precent').attr('style', 'width:' + pro + '%').html(pro + '%')
}
}
xhr.upload.onloadend = function () {
$('#precent').removeClass().addClass('progress-bar progress-bar-success');
}
xhr.open("POST", 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('上传成功了', JSON.parse(xhr.responseText));
let data = JSON.parse(xhr.responseText)
if (data.status === 200) {
let img = document.querySelector('#img')
img.src = 'http://www.liulongbin.top:3006' + data.url
} else {
alert('上传服务器失败')
}
}
}
})
五、JQuery高级用法
5.1 JQuery实现文件上传
1.定义UI结构
2.验证是否选择了文件
3.向FormData中追加文件
4.使用JQuery发起文件上传的请求
<input type="file" id="file1">
<button id="btn">上传文件</button>
<img src="../code/images/loading.gif" alt="" style="display: none;">
let btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
let files = $('#file1')[0].files
if (files.length <= 0) {
return alert('请选择文件上传')
}
let fd = new FormData()
fd.append('avater', files[0])
//发起jq的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', res);
}
})
})
5.2 JQuery实现loading效果
5.2.1 ajaxStart(callback)
5.2.2 ajaxStop(callback)
六、 axios
6.1 什么是axios
Axios专注于网络数据请求的库,更加简单易用
比起JQuery axios更加轻量化,只专注于网络数据请求
6.2 axios发起GET请求
document.querySelector("#btn").addEventListener('click', function () {
let url = 'http://www.liulongbin.top:3006/api/get'
let obj = { name: 'zs', age: 21 }
axios.get(url, { params: obj }).then(function (res) {
console.log('res', res.data);
})
})
6.3 axios发起POST请求
document.querySelector('#btn2').addEventListener("click", function () {
let url = 'http://www.liulongbin.top:3006/api/post'
let obj = { name: 'zs', age: 21 }
axios.post(url, obj).then(function (res) {
console.log('res', res.data);
})
})
6.4 直接使用axios发起请求
使用axios发起get请求
document.querySelector('#btn3').addEventListener("click", function () {
let url = 'http://www.liulongbin.top:3006/api/get'
let obj = { name: 'zs', age: 21 }
axios({
method: "GET",
url: url,
params: obj,
}).then(function (res) {
console.log('res', res.data);
})
})
使用axios发起post请求
document.querySelector('#btn4').addEventListener("click", function () {
let url = 'http://www.liulongbin.top:3006/api/post'
let obj = { name: 'zs', age: 21 }
axios({
method: 'POST',
url: url,
data: obj,
}).then(function (res) {
console.log('res', res.data);
})
})