什么是XMLHttpRequest
XMLHttpRequest
(简称xhr)是浏览器提供JavaScript对象,通过他,可以请求服务器上的数据资源。之前所学的jQuery
中的Ajax函数,就是基于xhr对象封装出来的。
使用xhr发起GET请求
步骤:
xhr.open()
函数创建请求。xhr.send()
函数发起请求。xhr.onreadystatechange
事件。var xhr = new XMLHttpRequest();
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);
}
}
xhr对象的readyState属性
XMLHttpRequest
对象的readyState
属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个:
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | XMLHttpRequest对象已被创建,但尚未调用open方法 |
1 | OPENED | open()已经被调用 |
2 | HEADRS_RECEIVED | send()方法已经被调用,响应头也已经被接收 |
3 | LOADING | 数据接收中,此时response属性中已经包含部分数据 |
4 | DONE | Ajax请求完成,这意味着数据传输已经彻底完成或失败 |
查询字符串
定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。
格式:将英文?
放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&
符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中。
URL编码与解码
什么是URL编码
URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符,则必须对中文进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
通俗理解:使用英文字母去表示非英文字符。
如何对URL进行编码与解码
encodeURI()
:编码的函数decodeURI()
:解码的函数使用xhr发起POST请求
步骤:
xhr.open()
函数创建请求。Content-Type
属性(固定写法)。xhr.send()
函数发起请求。xhr.onreadystatechange
事件。var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
什么是数据交换格式
数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域,经常提及的两种数据交换格式分别是XML
和JSON
。其中XML
用的非常少,所以,我们重点要学习的数据交换格式就是JSON。
XML
什么是XML
XML的英文全称是EXtensible Markup Language
,即可扩展标记语言。因此,XML和HTML类似,也是一种表示语言。
XML和HTML的区别
XML和HTML虽然都是标记语言,但是,他们两种之间没有任何的关系。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5NA9Kih-1660369597682)(图片\11.png)]
XML的缺点
JSON
什么是JSON
概念:JSON的英文全称是JavaScript Object Notation
,即“javascript对象表示法”。简单来讲,JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质就是字符串。
作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小、更快、更易解析。
JSON的两种结构
JSON就是用字符串来表示JavaScript的对象和数组。所以,JSON中包含对象和数组两种结构,通过这个两种结构的相互嵌套,可以表示各种复杂的数据结构。
对象结构:对象结构在JSON中表示{}
括起来的内容。数据结构为{ key : value, key : value, .... }
的键值对结构。其中,key必须是使用英文的双引号包裹的字符串, value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
数组结构:数组结构在JSON中表示为[]
括起来的内容。数据结构为[ "java", "javascript", 30, true ... ]
。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
JSON语法注意事项
undefined
或函数作为JSON的值。JSON的作用:在计算机与网络之间存储和传输数据。
JSON和JS对象的互转
要实现从JSON字符串转换为JS对象,使用JSON.parse()
方法。
var jsonStr = '{"a": "Hello", "b": "world"}';
var obj = JSON.parse(jsonStr);
console.log(obj);
要实现从JS对象转换为JSON字符串,使用JSON.stringify()
方法。
var obj2 = { a: 'hello', b: 'world', c: false };
var str = JSON.stringify(obj2);
console.log(str);
序列化和反序列化
JSON.stringify()
函数的操作,叫做JSON序列化。JSON.parse()
函数的操作,叫做JSON反序列化。认识XMLHttpRequest Level2
XMLHttpRequest
的缺点
MLHttpRequest Level2
的新功能
设置HTTP请求时限
有时,Ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本的XMLHttpRequest对象,增加了timeout
属性,可以设置HTTP请求的时限。
xhr.timeout = 3000;
上面的语句,将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还要一个timeout
事件,用来指定回调函数。
xhr.ontimeout = function(event) {
alert('请求超时!');
}
FormData对象管理表单数据
Ajax
操作往往用来提交表单数据。为了方便表单处理,HTML5新增了一个FormData对象,可以模拟表单操作:
var fd = new FormData();
fd.append('uname', 'zs');
fd.append('upwd', '123456');
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));
}
}
上传文件
新版XMLHttpRequest
对象,不仅可以发送文本信息,还可以上传文件。
实现步骤:
定义UI结构。
<input type="file" id="file1">
<button id="btnUpload">上传文件button> <br>
<img src="" alt="" id="img" width="800">
验证是否选择了文件。
var btnUpload = document.querySelector('#btnUpload');
btnUpload.addEventListener('click', function () {
var files = document.querySelector('#file1').files;
if (files.length <= 0) {
return alert('请选择要上传的文件');
}
})
向FromData
中追加数据。
var fd = new FormData();
fd.append('avatar', files[0]);
使用xhr发起上传文件的请求。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
监听onreadystatechange
事件。
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);
}
}
}
显示文件上传进度:监听上传进度的事件
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 + '%');
}
}
什么是axios
Axios
是专注于网络数据请求的库。相比于原生的XMLHttpRequest
对象,axios
简单易用。相比于jQuery
,axios
更加轻量化,只关注与网络数据请求。
axios发起GET请求
axios
发起get请求的语法:
axios.get('url', { params: {/*参数*/} }).then(callback);
具体代码:
var url = 'http://www.liulongbin.top:3006/api/get';
var paramsObj = { name: 'zs', age: 20 };
axios.get(url, { params: paramsObj }).then(function (res) {
console.log(res.data);
})
axios发起POST请求
axios
发起POST请求的语法:
axios.post('url', { /*参数*/ } ).then(callback);
具体代码
var url = 'http://www.liulongbin.top:3006/api/post';
var dataObj = { address: '北京', location: '顺义区' };
axios.post(url, dataObj).then(function (res) {
console.log(res.data);
})
直接使用axios发起请求
axios
也提供了类似于jQuery
中的$.ajax()
的函数,语法如下:
axios ({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}).then(callback);