1.
今天的内容其实挺多的，我们慢慢来说。首先第一个是xhr的基本使用，什么是xhr？
XMLHTTPRequest是浏览器提供的js对象，可以请求服务器上的数据资源，包括我们前面一直用的jq里面的三个请求资源的方法都是基于xhr来封装的。
那么首先我们看到xhr的get请求怎么来实现
首先要创建xhr实例通过new来实现
然后调用open函数，里面值为请求方式以及url
第三步调用send函数
第四步监听onreadyStateChange事件在这个事件里面要注意一下请求状态和服务器响应状态的固定写法，还有服务器响应回的数据
Document
1
我们看到在监听请求状态变化事件里有一个readystate的属性这个属性表示ajax当前请求所处的状态，其中0表示xhr对象以创建，但请求未调用open。1表示已调用open函数。2表示已调用send函数。3表示数据接收中。最后4表示一切请求完成
那么xhr带参的get请求怎么来实现的呢？只需要在open函数的url里面接一个查询字符串即可
xhr.open('get', 'http://www.ssfddaf.com/api?na...')
那么什么是查询字符串？
在url末尾加上？参数=值多个参数间用&来连接这就是查询字符串，无论是jQuery的三个请求方式还是xhr指定的参数其本质都是在url后带查询字符串
这里还要了解一个点url编码与解码
url中只允许出线英文不允许中文等其他语种，所以他就会把除英文外其他语种转换为%开头带两个字符的样式来代替
编码encodeURI('中文;) 解码decodeURI（%的字符）三组%表示一个中文
2.
接下来我们看到xhr怎么发起post请求
第一步创建对象
第二部open函数把请求方式改为post
第三步设置content-type 这是一个固定写法
xhr.setRequestHeader（‘content-type’， ‘application/x-www-form-urlencoded’）
第四步调用send函数 post的参数在这里添加以查询字符串的方式添加进来
第五步监听事件
Document
3.
数据交换格式
即服务器与客户端之间进行数据传输与交换的格式，XML和JSON这两种
XML我们用的比较少，它是可扩展标记语言，跟html很相似
JSON
什么事json，就是js对象和数组的字符串表示法，其中本质还是一个字符串它是轻量级文本数据交换格式
它的结构为有两种对象结构和数组结构
对象结构
‘｛key：value｝’咋一看跟对象很相似，但是首先外面会有引号，其次键值是字符类型必须加双引号
数组结构
【a，a】
要注意的是键值的双引号，json中不能写注释，不能使用undefined和函数作为值
json和对象互转
obj = JSON.parse（json）（反序列化）
json = JSON.stringify（obj）（序列化）
4.
封装自己的ajax函数
①先封装一个处理data对象为查询字符串的函数
②封装函数xhr
③判断不同的请求类型达到不同的方式
这个总之记住一点就是xhr调用请求的总体步骤就没得问题
// 1.先封装函数处理传进来的参数为查询字符串
function revolveData(data) {
var arr = []
for (var k in data) {
arr[arr.length] = k + '=' + data[k]
}
var str = arr.join('&')
return str
}
// console.log(revolveData({name : '张三', age : 19}));
// 2。封装主体函数
function ajaxMine(obj) {
var xhr = new XMLHttpRequest()
var str = revolveData(obj.data)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.response)
obj.success(res)
}
}
// 3.判断不同的请求，做到不同的操作
if (obj.method.toUpperCase() == 'GET') {
xhr.open(obj.method, obj.url + '?' +str)
xhr.send()
} else if (obj.method.toUpperCase() == 'POST') {
xhr.open(obj.method, obj.url)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(str)
}
}验证
Document
5.
xhr level2新特性
在我们旧版的xhr缺点就是不支持文件上传而且没有进度信息只有完没完成
在我们新版xhr
支持文件上传，有进度信息，还可以设置http时限，还可使用formdata对象管理表单数据
接下来我会一一开始xhr这四个新特性
5.1
首先第一个设置Http时限，也就是在规定时间如果还没有完成请求任务那么这个请求就失败了
xhr.timeout = 2000
与之对应的还有一个ontimeout的事件在超时后会做些什么
Document
5..2
formdata管理表单
因为我们ajax主要是用来提交表单数据的嘛，所以H5就新增了一个FormData对象用来模拟表单操作
①新建formdata对象
②为formdata添加表单项
③创建xhr
④用xhr完成请求
Document
formdata还有一个用法，就是可以用来获取表单的值
Document
5.3
上传文件
①定义UI结构
②验证是否选择了文件
③像formdata追加文件
④用xhr发起上传请求
⑤监听事件
Document
![]()
5.4
显示上传进度
通过xhr.upload.onprogress事件来监听这里面有三个属性值得注意一下
Document
![]()
知道了上传进度我们就可以通过bootstrap来一个进度条板的上传进度
Document
![]()
最后完善上传成功的进度条
Document
![]()
6.
jQuery高级用法
用jq来实现文件上传
①定义ui结构和前面一样
②验证是否选择文件
③向formdata追加文件
④使用jq发起上传请求
⑤jq实现loading效果 两个方法一检测到任何ajax开始或失败就会调用
Document
7.
axios
今天的最后一个内容，什么事axios，专注于网络数据请求的库，相比于原生xhr更简单易用，相比于jq更轻量化
Document
Document
Document
![]()