一、XMLHttpRequest的基本使用
XMLHttpRequest(简称xhr)市浏览器提供的js对象,通过它,可以请求服务器上的数据资源
1.2 使用xhr发起get 请求
第一步创建 xhr对象
第二步调用xhr.open()函数
第三步调用xhr.send()函数
第四步监听xhr.onreadystatechange事件
<script>
// 1.创建一个XHR对象
let xhr = new XMLHttpRequest()
// 2.调用open函数
xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks')
// 3.调用send函数
xhr.send()
// 4.监听onreadystaechange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取服务器响应的数据
console.log(xhr.responseText);
}
}
</script>
1.3 xhr对象的readyState属性
1.4 使用xhr发起带参数的GET请求
在url地址后边拼接参数(查询字符串)
1.5 查询字符串
查询字符串(URL参数)是指在URL的末尾加上用于服务器发送信息的字符串(变量)
GET请求写单参数的本质(直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器
1.6 URL编码与解码
1.6.1 简介
url地址中,只允许出现英文相关的字母,标点符号,数字 不允许出现中文字符,需要对中文进行编码(转义)
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印的字符)去表示哪些不安全的字符
使用英文字符去表示非英文字符
<script>
$.get('https://ajax-base-api-t.itheima.net/api/getbooks', { id: 1, bookanme: '西游记' }, function (res) {
console.log(res);
})
</script>
1.6.2 编码与解码
encodeURL() 编码的函数
decodeURL() 解码的函数
<script>
let arr = '参数'
let arr1 = encodeURI(arr)
console.log(arr1);
let arr2 = decodeURI('%E5%8F%82%E6%95%B0')
console.log(arr2);
</script>
1.7 使用xhr发起POST请求
第一步 创建xhr对象
第二步 调用xhr.open()函数
第三步 设置Content-Type属性(固定写法)
第四步 调用xhr.send()函数 同时指定要发送的数据
第五步 监听xhr.onreadystatechange事件
<script>
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/addbook')
// 3. 设置 Content-Type 属性(固定写法)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send(),同时将数据以查询字符串的形式,提交给服务器
xhr.send('bookname=456&author=111&publisher=123')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>
二、 数据交换格式
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语法的注意事项
- ①属性名必须使用双引号包裹
- ②字符串类型的值必须使用双引号包裹
- ③JSON 中不允许使用单引号表示字符串
- ④JSON 中不能写注释
- ⑤JSON 的最外层必须是对象或数组格式
- ⑥不能使用 undefined 或函数作为 JSON 的值
- JSON 的作用:在计算机与网络之间存储和传输数据。
- JSON 的本质:用字符串来表示 Javascript 对象数据或数组数据
2.3.4 JSON和JS对象的关系
JSON是js杜祥的字符串表示法,使用文本表示一个JS对象的信息,本质是一个字符串
2.3.5 JSON和JS对象的互转
要实现从 JSON 字符串转换为 JS 对象,使用 JSON.parse () 方法:
要实现从 JS 对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
![]()
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 resorData(data){
let arr=[]
for(let k in data){
let str=k+'='+data[k]
arr.push(str)
}
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 itcs(option){
let xhr=new XMLHttpRequest()
// 把外界传递过来的参数对象,转换为查询字符串
let qs= resorData(option.data)
if(option.method.toUpperCase()=='GET'){
// 发起GET请求
xhr.open(option.method,option.url+'?'+qs)
xhr.send()
}
else if(option.method.toUpperCase()=='POST'){
// 发起post请求
xhr.open(option.method,option.url)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(qs)
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
let result=JSON.parse(xhr.responseText)
option.success(result)
}
}
}
调用方法:
<script>
// itcs({
// method: 'GET',
// url: 'https://ajax-base-api-t.itheima.net/api/getbooks',
// data: {
// id: 1
// },
// success: function (res) {
// console.log(res);
// }
// })
itcs({
method: 'POST',
url: 'https://ajax-base-api-t.itheima.net/api/addbook',
data: {
bookname: 'zsk',
author: '筛子',
publisher: 'kkk'
},
success: function (res) {
console.log(res);
}
})
</script>
四、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.创建fromdata实例
let fd = new FormData
// 2.调用append函数,向fd追加数据
fd.append('uname', 'zs')
fd.append('upwd', '123456')
let xhr = new XMLHttpRequest()
xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
}
FormData也可以用来获取网页表单的值
// 通过dom操作,获取form表单元素
let form = document.querySelector('#form1')
form.addEventListener('submit', function (e) {
// 阻止表单的默认提交行为
e.preventDefault()
// 创建fromdata快速获取fron表单的数据
let fd = new FormData(form)
let xhr = new XMLHttpRequest()
xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
}
})
4.4 上传文件
4.4.1 定义UI结构
<!-- 文件选择器 -->
<input type="file" id="flie1">
<!-- 上传文件的按钮 -->
<button id="button">上传文件</button>
<!-- img标签,来显示上传成功以后的图片 -->
<img src="" id="img" width="800">
4.4.2 js结构
<script>
// 1.获取到文件上传按钮
let button = document.querySelector('#button')
//2.为按钮绑定单机事件处理函数
button.addEventListener('click', function () {
// 3.获取用户选择的文件列表
let files = document.querySelector('#flie1').files
if (files.length <= 0) {
return alert('请选择上传的文件')
}
console.log('用户选择了将上传的文件');
let fd = new FormData()
// 将用户选择的文件添加到Fromdata
fd.append('avatar', files[0])
let xhr = new XMLHttpRequest()
// 监听文件的上传进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// e.loaded已上传的字节
// e.total需传输的总字节
let procentComp = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComp);
// 动态设置进度条
$('#percent').attr('style', 'width:' + procentComp + '%').html(procentComp + '%')
}
}
xhr.upload.onload = function () {
$('#percent').removeClass().addClass('progress-bar progress-bar-success')
}
xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/upload/avatar')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse(xhr.responseText)
// console.log(data);
if (data.status === 200) {
// 上传成功
document.querySelector('#img').src = 'https://ajax-base-api-t.itheima.net' + data.url
}
else {
// 上传失败
console.log('图片上传失败' + data.message);
}
}
}
})
</script>
4.4.1导入需要的库
JQuery库 bootstrap
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./lib/jquery.js"></script>
五、JQuery高级用法
5.1 JQuery实现文件上传
1.定义UI结构
2.验证是否选择了文件
3.向FormData中追加文件
4.使用JQuery发起文件上传的请求
<input type="file" id="file1" />
<button id="btnUp">上传文件</button>
<br>
<img src="./images/loading.gif" alt="" style="display: none;" id="loadimg" />
<script>
$(function () {
// 监听到ajax请求发起
$(document).ajaxStart(function () {
$('#loadimg').show()
})
// 监听到ajax完成
$(document).ajaxStop(function () {
$('#loadimg').hide()
})
$('#btnUp').on('click', function () {
let files = $('#file1')[0].files
if (files.length <= 0) {
return alert('请选择文件之后在上传')
}
let fd = new FormData()
fd.append('avatar', files[0])
// 发起jquery中的Ajax请求,上传文件
$.ajax({
method: 'POST',
url: 'https://ajax-base-api-t.itheima.net/api/upload/avatar',
data: fd,
processData: false,
contentType: false,
success: function (res) {
console.log(res);
}
})
})
})
</script>
六、 axios
6.1 什么是axios
Axios专注于网络数据请求的库,更加简单易用
比起JQuery axios更加轻量化,只专注于网络数据请求
6.2 axios发起GET请求
document.querySelector('#btn1').addEventListener('click', function () {
let url = 'https://ajax-base-api-t.itheima.net/api/get'
let parname = { name: 'zs', age: 20 }
axios.get(url, { params: parname }).then(function (res) {
console.log(res);
})
})
6.3 axios发起POST请求
document.querySelector('#btn2').addEventListener('click', function () {
let url = 'https://ajax-base-api-t.itheima.net/api/post'
let parname = { address: '很棒', location: '啦啦啦' }
axios.post(url, parname).then(function (res) {
// console.log(res);
let data = res.data
console.log(data);
})
})
6.4 直接使用axios发起请求
使用axios发起get请求
document.querySelector('#btn3').addEventListener('click', function () {
let url = 'https://ajax-base-api-t.itheima.net/api/get'
let parname = { name: 'gtx', age: 35 }
axios({
method: 'GET',
url: url,
params: parname
}).then(function (res) {
console.log(res.data);
})
})
使用axios发起post请求
document.querySelector('#btn4').addEventListener('click', function () {
axios({
method: 'POST',
url: 'https://ajax-base-api-t.itheima.net/api/post',
data: {
name: '哈哈哈',
age: 18,
gender: '女'
}
}).then(function (res) {
console.log(res.data);
})
})