【Ajax】XMLHttpRequest和Level2
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、XMLHttpRequest
- 什么是XMLHttpRequest
XMLHttpRequest简称 xhr是浏览器提供的 Javascript 对象通过它可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数就是基于 xhr 对象封装出来的。
二、了解xhr对象的readyState属性
XMLHttpRequest 对象的 readyState 属性用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个
值 | 状态 | 描述 |
0 | SENT | XMLHttpRequest 对象已被创建但尚未调用 open方法。 |
1 | OPENED | open() 方法已经被调用。 |
2 | HEADERS_RECEIVED | send() 方法已经被调用响应头也已经被接收。 |
3 | LOADING | 数据接收中此时 response 属性中已经包含部分数据。 |
4 | DONE | Ajax 请求完成这意味着数据传输已经彻底完成或失败。 |
三、使用xhr发起GET请求
- 使用xhr发起不带参数的GET请求
步骤
①创建 xhr 对象
②调用 xhr.open() 函数指定 请求方式 与 URL地址创建Ajax 请求
③调用 xhr.send() 函数发起 Ajax 请求
④监听 xhr.onreadystatechange 事件拿到服务器响应的数据
<script>
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数:指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数:发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
// 4.1 监听 xhr 对象的请求状态 readyState 与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) { // 固定写法
// 4.2 获取服务器响应的数据
console.log(xhr.responseText)
}
}
</script>
注意代码中的xhr.status === 200和服务器响应回来的数据中的"status":200不是同一个status。
xhr.status === 200是HTTP请求状态的一部分
"status":200是服务器响应回来的一个属性是数据里面的一部分。
2. 使用xhr发起带参数的GET请求
使用 xhr 对象发起带参数的 GET 请求时只需在调用 xhr.open 期间为 URL 地址指定参数即可
xhr.open('GET', ' http://www.liulongbin.top:3006/api/getbooks?id=1'
<script>
var xhr = new XMLHttpRequest()
// 在调用 xhr.open 期间为 URL 地址指定参数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1') // 这种在 URL 地址后面拼接的参数叫做查询字符串
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>
这种在 URL 地址后面拼接的参数叫做查询字符串。
四、查询字符串
1. 什么是查询字符串
查询字符串URL 参数是指在 URL 的末尾加上用于向服务器发送信息的字符串变量。
将英文的 ? 放在URL 的末尾然后再加上 参数＝值 想加上多个参数的话使用 & 符号进行分隔。以这个形式可以将想要发送给服务器的数据添加到 URL 中。
// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= 西游记
2. GET请求携带参数的本质
无论使用 $.ajax()还是使用 $.get()又或者直接使用 xhr 对象发起 GET 请求当需要携带参数的时候本质上都是直接将参数以查询字符串的形式追加到 URL 地址的后面发送到服务器的。
$.get('url', {name: 'zs', age: 20}, function() {})
// 等价于
$.get('url?name=zs&age=20', function() {})
$.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20}, success: function() {} })
// 等价于
$.ajax({ method: 'GET', url: 'url?name=zs&age=20', success: function() {} })
2.1 $.get()
<script>
// $.GET():
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1, bookname: '西游记' }, function (res) {
console.log(res)
})
</script>
2.2 $/ajax()
<script>
// $/ajax():
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
id: 1,
bookname: '西游记'
},
success: function (res) {
console.log(res)
}
})
</script>
五、URL编码与解码
1. 什么是URL编码
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%A5%BF %E6%B8%B8 %E8%AE%B0 // 三组%表示一个中文字字符
2. 如何对URL进行编码与解码
浏览器提供了 URL 编码与解码的 API分别是
encodeURI() // 编码的函数
decodeURI() // 解码的函数
<script>
// 编码
var str = '早睡早起长头发'
var str2 = encodeURI(str)
console.log(str2)
// 解码
console.log('----------')
var str3 = decodeURI('%E9%95%BF%E5%A4%B4%E5%8F%91')
console.log(str3)
</script>
3. URL编码的注意事项
由于浏览器会自动对 URL 地址进行编码操作因此大多数情况下程序员不需要关心 URL 地址的编码与解码操作。
更多关于 URL 编码的知识请参考如下博客
https://blog.csdn.net/Lxd_0111/article/details/78028889
六、使用xhr发起POST请求
步骤
①创建 xhr 对象
②调用 xhr.open() 函数指定 请求方式 与 URL地址创建Ajax 请求
③设置 Content-Type 属性固定写法
④调用 xhr.send() 函数同时指定要发送的数据发起Ajax 请求
⑤监听 xhr.onreadystatechange 事件获取服务器响应的数据
<script>
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数指定 请求方式 与 URL地址创建Ajax 请求
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性固定写法
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数同时指定要发送的数据发起Ajax 请求
xhr.send('bookname=史记&author=司马迁&publisher=上海图书出版社')
// 5. 监听事件获取服务器响应的数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>
二、 XMLHttpRequest Level2的新特性
- 认识XMLHttpRequest Level2
1.1 旧版XMLHttpRequest的缺点
只支持文本数据的传输无法用来读取和上传文件
传送和接收数据时没有进度信息只能提示有没有完成。
1.2 XMLHttpRequest Level2的新功能
可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息。
2. 设置HTTP请求时限
有时Ajax 操作很耗时而且无法预知要花多少时间。如果网速很慢用户可能要等很久。新版本的 XMLHttpRequest 对象增加了 timeout 属性可以设置 HTTP 请求的时限
xhr.timeout = 3000
上面的语句将最长等待时间设为 3000 毫秒。过了这个时限就自动停止HTTP请求。与之配套的还有一个 timeout 事件用来指定回调函数
xhr.ontimeout = function(event){
alert('请求超时')
}
<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>
3. FormData对象管理表单数据
Ajax 操作往往用来提交表单数据。为了方便表单处理HTML5 新增了一个 FormData 对象。
3.1 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)
<script>
// 1. 创建 FormData 实例
var fd = new FormData()
// 2. 调用 append 函数向 fd 中追加数据
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)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText))
}
}
</script>
3.2 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() {}
})
<form id="form1">
<input type="text" name="uname" autocomplete="off" />
<input type="password" name="upwd" />
<button type="submit">提交</button>
</form>
<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. 上传文件
新版 XMLHttpRequest 对象不仅可以发送文本信息还可以上传文件。
实现步骤
①定义 UI 结构
②验证是否选择了文件
③向 FormData 中追加文件
④使用 xhr 发起上传文件的请求
⑤监听 onreadystatechange 事件
4.1 定义UI结构
<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3. 显示上传到服务器上的图片 -->
<img src="" alt="" id="img" width="800" />
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.3 向FormData中追加文件
// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])
4.4 使用 xhr 发起上传文件的请求
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数指定请求类型与URL地址。其中请求类型必须为 POST上传文件必须用POST提交文件
xhr.open('POST', ' http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)
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)
}
}
}
<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3. img 标签来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
<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])
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 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>
5. 显示文件上传进度
新版本的 XMLHttpRequest 对象中可以通过监听 xhr.upload.onprogress 事件来获取到文件的上传进度。语法格式如下
// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
// e.lengthComputable 是一个布尔值表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
}
}
5.1 导入需要的库
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
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>
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 + '%')
}
}
5.4 监听上传完成的事件
xhr.upload.onload = function() {
$('#percent')
// 移除上传中的类样式
.removeClass()
// 添加上传完成的类样式
.addClass('progress-bar progress-bar-success')
}
<!-- 1. 导入需要的库 -->
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>
<!-- 2. 基于Bootstrap渲染进度条 -->
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent"> // active能实现进度条运动效果
0%
</div>
</div>
<br />
<img src="" alt="" id="img" width="800" />
<script>
var btnUpload = document.querySelector('#btnUpload')
btnUpload.addEventListener('click', function () {
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件')
}
var fd = new FormData()
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
// 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 + '%')
}
}
// 4. 监听上传完成的事件
xhr.upload.onload = function () {
// 移除上传中的类样式添加上传完成的类样式
$('#percent').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) {
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>