XMLHttpRequest简称xhr，是浏览器提供的Javascript对象。之前我们使用的都是jQuery中的Ajax，现在我们使用原生JS的Ajax

目录

1  GET请求

1.1  不带参数请求

1.2  带参数请求

2  URL的编码与解码

2.1  编码 encodeURI()

2.2  解码 decodeURI()

3  POST请求

4  模拟jQuery中的Ajax函数

5  XMLHttpRequest Level2

5.1  设置HTTP的请求时限

5.2  Formdata对象

5.2.1  简单使用

5.2.2  Formdata直接获取表单数据

5.2.3  上传文件

5.2.4  上传文件的进度

1  GET请求

1.1  不带参数请求

先看服务

前端请求

• xhr.open()中可以写大写的GET，也可以写小写的GET
• xhr.readyState与xhr.status写死就行，如果请求成功就需要这两个条件

xhr.readyState代表请求的状态，4代表请求已经完成了，除了4之外还有下面这几种状态

1.2  带参数请求

先看服务，当你传入data1和data2后，服务会将两个值变成整数然后加和，之后返回给你

get请求直接将要传递的东西放在查询字符串中就可以了，无论什么框架带参数的get请求数据实质上都是以查询字符串的形式传递的

2  URL的编码与解码

url地址中只允许出现字母，标点符号，数字，想是中文这种字符会被自动编码

比如说你在百度上搜索 我 这个汉字，实质上就会编码为%E6%88%91，一般来讲一个汉字就对应着三个百分号值

2.1  编码 encodeURI()

2.2  解码 decodeURI()

3  POST请求

服务

请求

post请求需要使用setRequestHeader()设置请求头，这个是固定写法，setRequestHeader()必须放在open()的后面，send()的前面

post要发送的数据要写在send()中

4  模拟jQuery中的Ajax函数

我们只考虑get与post的情况，需要处理的地方就是将传入的data对象转变为查询字符串的形式，判断是get还是post，除此之外简单弄一弄就行了

搞一个服务测一下，get是两个数相加,post是两个数相乘

get

post

5  XMLHttpRequest Level2

上面我们用的都是旧版的XMLHttpRequest，旧版有两个缺点

• 无法上传文件
• 没有传送数据的进度信息

XMLHttpRequest Level2 是 XMLHttpRequest 的升级版(随着HTML5一起更新，在2014年10月28日完成更新，如果浏览器支持HTML5大概率也支持XMLHttpRequest的Level2)，继承了老版本的所有用法且使用方式相同，有下面这些新的功能

• 设置HTTP请求的时限
• 使用FormData对象管理表单数据
• 可以上传文件
• 可以获得数据传输的进度信息

5.1  设置HTTP的请求时限

请求时限的属性名称是timeout,过了这个时间还没有请求完毕就中断这次请求

• 单位为毫秒

可以配套使用timeout事件，可以设置中止之后干一点儿什么

我们给一个极短的时间测试一下，比如给3ms

3ms内没有完成请求，请求就中断了自然也没有之后的响应结果。中断后触发了timeout事件，执行了timeout中的函数

在服务端虽然请求中断了，但状态码依然是200

5.2  Formdata对象

5.2.1  简单使用

Formdata对象可以更便捷的传输数据，我们简单用一下

上面这个例子中，如果使用FormData发送就不要再使用setRequestHeader()加请求头了，不然会报错

5.2.2  Formdata直接获取表单数据

• e.preventDefault()是取消默认提交行为

点击提交后得到结果

5.2.3  上传文件

后端

上传后会保存在代码同级目录下的upload_file，目前我还没上传，文件夹是空的

前端

使用input.files就可以接到选择的文件，files是一个数组一会儿我们打印出来看一下

如果数组元素<=0就是没选择文件，会提示你选择要上传的文件并中止函数

使用files[0]拿到文件加入的FormData对象中

之后直接把FormData对象传上去就行

打开后选择AJAX.jpg

上传之后在文件夹中得到了这张图

5.2.4  上传文件的进度

上传文件
0%

xhr.upload.onprogress的书写位置在创建xhr对象后，xhr.open()前

使用xhr.upload.onprogress事件获取文件的上传进度，该事件的事件对象中我们用到三个属性

• e.lengthComputable 这个值是一个布尔值，如果长度可以计算就返回true，不可计算就返回false
• e.loaded 加载的字节大小
• e.total 文件的总字节大小

我们上传一个看一下，我这里有一个较大的数据集

点击上传文件时进度条会涨，底下的数值也会涨

直到最后100%

这里我将上传进度-1，因为在我的后端上传后还有保存，在其他的后端中上传后肯定也会有其他的操作，所以我等上传有响应后再将其置为100%，这样看起来比较舒服

bootstrap中有样式还不错的进度条，开发的时候可以使用一下 进度条（Progress） · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网