Ajax（三）XMLHttpRequest的基本使用
Ajax（三）XMLHttpRequest的基本使用
一、XMLHttpRequest的基本使用
1、定义
浏览器为我们提供的一个内置对象(构造函数), 通过它我们可以向服务器发送请求, 并接受响应
$.ajax() 请求方法底层就是 jQuery 封装这个对象的一系列方法来实现的
2、使用xhr发起GET请求
- 步骤：
-
创建
xhr对象 -
调用
xhr.open()函数 -
调用
xhr.send()函数 -
监听
xhr.onreadystatechange事件
-
// 1. 构建 xhr 实例对象
var xhr = new XMLHttpRequest();
// 2. 初始化请求 open(请求方式，url地址)
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
// 3. 发送请求 send()
xhr.send();
// 4. 监听请求状态, 获取响应的数据
xhr.onreadystatechange = function() {
// 判断请求是否完成，HTTP请求状态码是否成功
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取响应数据
console.log(xhr.responseText);
}
};
// onload表示请求已经完成，和上面if判断作用相同
xhr.onload = function() {
// 获取响应数据
console.log(xhr.responseText);
}
**注意：**if判断代码中xhr.status不是返回数据中的status
3、了解xhr对象的readyState属性
- xhr 请求的所有状态码
- 0 (未初始化) ==> 请求还未初始化
- 1 (正在加载) ==> 已建立服务器链接
- 2 (加载成功) ==> 请求已接受
- 3 (交互) ==> 正在处理请求
- 4 (完成) ==> 请求已完成, 响应数据已传输
4、查询参数
-
定义：在 url 末尾添加的以 ? 开头的参数，叫做查询参数
比如： http://www.youxi.cn?hero=tank&money=99&skin=pink
-
参数特征
格式符合键值对的格式，多个键值对之间使用 & 符号进行连接
-
作用
-
多个页面之间传递数据(从首页跳转到首页，显示登录名（location.search）);
-
给服务器发送 get 请求的数据
5、get请求带参数的写法
把 参数 按键值对字符串的形式拼接到 url 后面
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.liulongbin.top:3006/api/get?name=ZhangSan&&age=12&&sex=man');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
};
};
6、URL编码
浏览器中的 URL 中只允许出现字母, 符号和数字, 不允许出现汉字, 如果出现需要对其进行编码
- 编码的规则：
使用字母，数字和特殊符号对其他字符(如汉字)进行编码
-
浏览器内置的 URL 编码和解码方法
encodeURI(参数) 对参数进行 URI 编码
decodeURI(参数) 对参数进行 URI 解码
var str = '2月6号放假'
var str2 = encodeURI(str);
console.log(str2);
var str3 = decodeURI('%E6%94%BE%E5%81%87');
console.log(str3);//反编译为 放假
7、post请求原生写法
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
// 设置post请求参数的编码方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 设置post请求时，要传递键值对字符串
xhr.send('bookname=熟虾&author=之颂&publisher=125');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText);
}
}
二、数据交换格式
1、数据交换格式
客户端和服务端之间进行数据传输时, 需要使用公共的数据格式.。
JSON 是前后端开发中最常用的一种轻量级数据交换格式,除此之外还有 XML 这种带有语义化的数据格式。
XML的英文全称是EXtensible Markup Language，即可扩展标记语言。- XML和HTML的区别：
HTML被设计用来描述网页上的内容，是网页内容的载体XML被设计用来传输和存储数据，是数据的载体- 客户端向服务器发送数据利用的是XML，服务器向客户端发送数据利用的是HTML
- XML的缺点
XML格式臃肿，和数据无关的代码多，体积大，传输效率低- 在
Javascript中解析XML比较麻烦
2、JSON（JavaScript Object Notation ）
JSON 可以理解为 js 中对象的字符串表示法, 本质上还是一个字符串。
-
概念：
JSON的英文全称是JavaScript Object Notation，即“JavaScript 对象表示法”。 -
作用：
JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是
JSON比XML更小、更快、更易解析。
3、JSON 数据格式的注意
-
普通对象最外层使用 { } 包裹, 数组的最外层使用 [ ] 包裹
-
属性名和字符串必须是双引号括起来的字符串, 最后一个属性后不能有逗号（必须严格遵守）
-
属性值或数组元素可以是 number, string, boolean, array, null, object 6种
但不能是 undefined 和 function
-
不能在 json 中填写注释
**JSON 的作用：**在计算机与网络之间存储和传输数据。
**JSON 的本质：**用字符串来表示 Javascript 对象数据或数组数据
4、JSON和JS对象的关系
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
5、JSON和JS对象的互转
- 要实现从
JSON字符串转换为JS对象，使用JSON.parse()方法：
var obj=JSON.parse('{"a":"Hello","b":"World"}');
//结果是：{a:'Hello',b:'World'}
- 要实现从
JS对象转换为JSON字符串，使用JSON.stringify()方法：
var json=JSON.stringify({a:'Hello',b:'World'});
//结果是：'{"a":"Hello","b":"World"}'
-
总结：
JSON.stringify()JSON.parse()-
todolist本地存储， 只能存储字符串格式的数据，JSON.stringify() -
JS高级 深拷贝： JSON.parse(JSON.stringify(obj)) //生成的是一个新对象
-
把服务器返回的json字符串解析成js对象格式 JSON.parse()
-
6、序列化和反序列化
把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
三、XMLHttpRequest Level2的新特性
1、老版本 XMLHttpRequest 问题
-
只支持文本数据的传送，无法用来读取和上传二进制文件
-
传送和接收数据时，没有进度信息，只能提示有没有完成
2、新版本 XMLHttpRequest 特性
-
可以设置 HTTP 请求的超时时限
-
可以使用 FormData 对象管理表单数据
-
可以上传文件
-
可以获取数据请求的进度信息
3、为 ajax 请求设置超时限制
-
设置超时时间（默认为毫秒）
xhr.timeout = 超时时间
-
xhr 实例的超时事件
xhr.ontimeout = fn
var xhr = new XMLHttpRequest();
xhr.timeout = 10;
xhr.addEventListener('timeout',function() { return alert('请求超时')});
xhr.open('get', 'http://www.liulongbin.top:3006/api/get');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
四、FormData对象管理表单数据
1、什么是FormData？
浏览器提供的一个内置对象(构造函数), 可以轻松管理表单数据的键值对 (key/value)
2、FormData 相关方法
-
添加一条数据 append()
-
查询一条数据 get()
-
设置一条数据 set()
-
遍历数据 forEach()
3、在 Ajax 中的使用
可以直接使用 send 方法发送 formData 格式的数据
// 1. 新建一个 FormData 对象
var fd = new FormData();
// 2. 添加一条数据: append()
fd.append('bookname', '儒林外史');
fd.append('author', '费瓦罗纳');
fd.append('publisher', '圣埃蒂安');
console.log(fd.get('author'));
// 3. 设置一条数据: set()
fd.set('publisher', '埃尔法');
fd.forEach(item => {
console.log(item);
});
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(xhr.responseText);
}
}
4、formData快速获取表单数据
使用 new FormData(原生form元素) 可以一次性获取表单中所有的数据
$('form').submit(function(e) {
e.preventDefault();
var fd = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
xhr.onload = function() {
return console.log(JSON.parse(xhr.responseText));
}
});
五、formData上传文件
1、案例：formData上传文件并显示文件上传进度(原生方法)
$('#upload-btn').click(function() {
// (原生文本选择框.files)
var files = $('#file')[0].files;
// 判断文件列表长度
if (files.length <= 0) {
return alert('请选择文件上传');
};
var fd = new FormData();
// 向fd中添加一个数据
fd.append('avatar', files[0]);
var xhr = new XMLHttpRequest();
// 绑定上传进度事件
xhr.upload.onprogress = function(e) {
// console.log(e.lengthComputable);
// 判断当前文件是否可计算
if (e.lengthComputable) {
console.log(parseInt(e.loaded / e.total * 100));
// 获取文件上传进度e.total表示总数据量， e.loaded表示已经上传的数据量
var percentage = parseInt(e.loaded / e.total * 100) + '%';
// 给进度条设置width样式属性和内容
$('#bar').css('width', percentage).text(percentage);
};
};
// 为xhr绑定文件获取成功事件
xhr.upload.onload = function() {
$('#bar').removeClass().addClass('progress-bar progress-bar-success')
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onload = function() {
var res = JSON.parse(xhr.responseText)
console.log(res);
// 将地址给img标签
$('img').prop('src', 'http://www.liulongbin.top:3006' + res.url);
}
})
2、jq版本文件上传
-
ajaxStart(callback)Ajax请求开始时，执行ajaxStart函数。- 注意：
$(document).ajaxStart()函数会监听当前文档内所有的 Ajax 请求。
- 注意：
-
ajaxStop(callback)Ajax请求结束时，执行ajaxStop函数。
$(document).ajaxStart(function() {
$('#loading').show()
});
$('#upload-btn').click(function() {
// (原生文本选择框.files)
var files = $('#file')[0].files;
// 判断文件列表长度
if (files.length <= 0) {
return alert('请选择文件上传');
};
var fd = new FormData();
// 向fd中添加一个数据
fd.append('avatar', files[0]);
$.ajax({
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
method: 'post',
data: fd,
// 使用formdata 默认参数编码 multipart/form-data
contentType: false,
// 不需要对请求体中内容进行额外处理
processData: false,
// 发送ajax请求前调用
beforeSend: function() {
// console.log(123);
$('#loading').show()
},
success: function(res) {
console.log(res);
$('#loading').prop('src', 'http://www.liulongbin.top:3006' + res.url);
}
})
})
六、什么是axios
1、定义：
Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象，axios 简单易用。
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。
2、axios发起GET请求
axios.get()
axios.get('http://www.liulongbin.top:3006/api/get', {
params: {
id: 10,
age: 20
}
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})
3、axios发起POST请求
axios.post()
axios.post('http://www.liulongbin.top:3006/api/post', {
name: '张三',
age: 10,
height: 170
}).then(function(res) {
console.log(res);
}).catch(function(err) {
console.log(err);
})
4、直接使用axios发起请求
//发起get请求
axios({
url: 'http://www.liulongbin.top:3006/api/getbooks',
method: 'get',
params: {
id: 1,
bookname: '西游记'
}
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})
//发起post请求
axios({
url: 'http://www.liulongbin.top:3006/api/addbook',
method: 'post',
data: {
bookname: '儒林外史',
author: '年份酒偶发',
publisher: '阿萨德刚'
}
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})