ajax的level2 xhr新特性，包括json处理，有哪些具体内容？

2026-05-17 06:492阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计2291个文字，预计阅读时间需要10分钟。

1. 今天的内容实际上挺多的，我们慢慢来说。首先，一个是xhr的基本使用，什么是xhr？

xhr是XMLHTTPRequest的简称，是浏览器提供的JS对象，可以请求服务器上的数据资源。包括我们前面直接用的jq中的$.ajax()等。

今天的内容其实挺多的，我们慢慢来说。首先第一个是xhr的基本使用，什么是xhr？

XMLHTTPRequest是浏览器提供的js对象，可以请求服务器上的数据资源，包括我们前面一直用的jq里面的三个请求资源的方法都是基于xhr来封装的。

那么首先我们看到xhr的get请求怎么来实现

首先要创建xhr实例通过new来实现

然后调用open函数，里面值为请求方式以及url

第三步调用send函数

第四步监听onreadyStateChange事件在这个事件里面要注意一下请求状态和服务器响应状态的固定写法，还有服务器响应回的数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/getbooks') // 3.调用send函数 xhr.send() // 4.监听事件 xhr.onreadystatechange = function() { // 4.1注意请求状态和服务器响应状态固定写法 if (xhr.readyState ==4 && xhr.status == 200) { // 4.2获取相应的数据 console.log(xhr.response); } } </script> </body> </html>0.2 1

我们看到在监听请求状态变化事件里有一个readystate的属性这个属性表示ajax当前请求所处的状态，其中0表示xhr对象以创建，但请求未调用open。1表示已调用open函数。2表示已调用send函数。3表示数据接收中。最后4表示一切请求完成

那么xhr带参的get请求怎么来实现的呢？只需要在open函数的url里面接一个查询字符串即可

xhr.open('get', 'www.ssfddaf.com/api?name=%df%fd%gf')

那么什么是查询字符串？

在url末尾加上？参数=值多个参数间用&来连接这就是查询字符串，无论是jQuery的三个请求方式还是xhr指定的参数其本质都是在url后带查询字符串

这里还要了解一个点url编码与解码

url中只允许出线英文不允许中文等其他语种，所以他就会把除英文外其他语种转换为%开头带两个字符的样式来代替

编码encodeURI('中文;) 解码decodeURI（%的字符）三组%表示一个中文

接下来我们看到xhr怎么发起post请求

第一步创建对象

第二部open函数把请求方式改为post

第三步设置content-type 这是一个固定写法

xhr.setRequestHeader（‘content-type’， ‘application/x-www-form-urlencoded’）

第四步调用send函数 post的参数在这里添加以查询字符串的方式添加进来

第五步监听事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/addbook') // 3.设置cententtype xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') // 4.调用send函数 xhr.send('bookname=水府传&author=我') // 5.监听事件 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } </script> </body> </html>

数据交换格式

即服务器与客户端之间进行数据传输与交换的格式，XML和JSON这两种

XML我们用的比较少，它是可扩展标记语言，跟html很相似

JSON

什么事json，就是js对象和数组的字符串表示法，其中本质还是一个字符串它是轻量级文本数据交换格式

它的结构为有两种对象结构和数组结构

对象结构

‘｛key：value｝’咋一看跟对象很相似，但是首先外面会有引号，其次键值是字符类型必须加双引号

数组结构

要注意的是键值的双引号，json中不能写注释，不能使用undefined和函数作为值

json和对象互转

obj = JSON.parse（json）（反序列化）

json = JSON.stringify（obj）（序列化）

封装自己的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) } }

验证

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/getbooks', data : { id : 2 }, success : function(res) { console.log(res); } }) */ ajaxMine({ method : 'post', url : 'www.liulongbin.top:3006/api/addbook', data : { bookname : '收首饰', author : '东风似旧', publisher : '身法' }, success : function(res) { console.log(res); } }) </script> </body> </html>

xhr level2新特性

在我们旧版的xhr缺点就是不支持文件上传而且没有进度信息只有完没完成

在我们新版xhr

支持文件上传，有进度信息，还可以设置www.liulongbin.top:3006/api/getbooks') xhr.send() xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } </script> </body> </html>

5..2

formdata管理表单

因为我们ajax主要是用来提交表单数据的嘛，所以H5就新增了一个FormData对象用来模拟表单操作

①新建formdata对象

②为formdata添加表单项

③创建xhr

④用xhr完成请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/formdata') // 5.直接提交，formdata对象，这与提交网页表单的效果完全一样 xhr.send(fd) // 6.验证 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responsete); } } </script> </body> </html>

formdata还有一个用法，就是可以用来获取表单的值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/formdata') xhr.send(fd) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } } </script> </body> </html>

5.3

上传文件

①定义UI结构

②验证是否选择了文件

③像formdata追加文件

④用xhr发起上传请求

⑤监听事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/upload/avatar') xhr.send(fd) // 5.监听事件 xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { // console.log(xhr.responseText); let imgData = JSON.parse(xhr.responseText) if (imgData.status == 200) { document.querySelector('img').src = 'www.liulongbin.top:3006' + imgData.url } else { console.log('上传文件失败'); } } } } else { return alert('请上传文件') } }) </script> </body> </html>

5.4

显示上传进度

通过xhr.upload.onprogress事件来监听这里面有三个属性值得注意一下

知道了上传进度我们就可以通过bootstrap来一个进度条板的上传进度

最后完善上传成功的进度条

jQuery高级用法

用jq来实现文件上传

①定义ui结构和前面一样

②验证是否选择文件

③向formdata追加文件

④使用jq发起上传请求

⑤jq实现loading效果两个方法一检测到任何ajax开始或失败就会调用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/upload/avatar', data: fd, processData: false, contentType: false, success: function (res) { console.log(res) } }) } }) </script> </body> </html>

axios

今天的最后一个内容，什么事axios，专注于网络数据请求的库，相比于原生xhr更简单易用，相比于jq更轻量化

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/get' var obj = {name : '张三', age : 29} axios.get(url, {params: obj}).then(function(res) { console.log(res); }) } */ btn.onclick = () => { axios({ method : 'get', url : 'www.liulongbin.top:3006/api/get', params : {name : '张三', age : 29} }).then(res => console.log(res)) } </script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta www.liulongbin.top:3006/api/post' var obj = {location : '重庆', address : '江北'} axios.post(url, {obj}).then(res => console.log(res)) } */ document.querySelector('button').onclick = () => { axios({ method : 'post', url : 'www.liulongbin.top:3006/api/post', data : {name : '张三', age : 29} }).then(res => console.log(res)) } </script> </body> </html>

标签：Ajax XHR level2 新特性新