一、使用xhr发起GET请求
①创建 xhr 实例对象
var 对象名 = new XMLHttpRequest( )
②调用 xhr.open() 函数
对象名.open( "GET" ，"请求的URL地址" )
③调用 xhr.send( ) 函数
对象名.send( )
④监听 xhr.onreadystatechange 事件
对象名.onreadystatechange = function () {
//监听xhr对象的请求状态：readyState; 服务器的响应状态status
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取服务器响应的数据
console.log(xhr.responseText)
}
}
// 1.创建xhr对象
var xhr = new XMLHttpRequest();
// 2.调用open函数
xhr.open('GET',"http://www.liulongbin.top:3006/api/getbooks?id=1")
// 3.调用send函数
xhr.send();
// 4.监听函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}
}
二、带有参数的GET请求
1.用xhr对象发起GEt请求时，参数的位置写到open( ）方法里的URL地址后面。
对象名.open( "GET" ，" http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记 " )
2.查询字符串
定义：在URL地址后面拼接的参数字符串，叫做查询字符串
格式：将英文的? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用& 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。
对象名.open( "GET" ，" http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记 " )
3.GET请求携带参数的本质
无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。
4.URL编码
定义：URL地址中，只允许出现英文相关的字母、标点符号、数字
编码原则：使用安全的字符（没有特殊用途或特殊意义的可打印字符）表示不安全的字符。
URL编码原则的通俗理解：使用英文字符去表示非英文字符
5.URL的编码与解码
编码：var str = encodeURI( 字符串 ）
解码：var str = decodeURI( 字符串 ）
返回值就是编码或者解码后的字符串，可以用str变量接收。
6.XMLHttpResponse对象的readyState属性（面试题）
三、使用xhr对象发起post请求
①创建 xhr实例 对象
var 对象名 = new XMLHttpRequest( )
②调用 xhr.open() 函数
对象名.open( "POST" ，"请求的URL地址" )
③设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type' ， 'application/x-www-form-urlencoded')
注意：如果传输文件类型的数据，需要修改Content-Type的值。
④调用 xhr.send() 函数，要发送的数据以查询字符串的形式作为参数传入。
对象名.send( " id=1&bookname=红楼梦&author=曹雪芹" ）
⑤监听 xhr.onreadystatechange 事件
对象名.onreadystatechange = function () {
//监听xhr对象的请求状态：readyState; 服务器的响应状态status
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取服务器响应的数据
console.log(xhr.responseText)
}
}
// 1.创建xhr对象
var xhr = new XMLHttpRequest();
// 2.调用xhr.open()函数
xhr.open('Post', 'http://www.liulongbin.top:3006/api/addbook')
// 3.设置Content-Type属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4.调用xhr.send()函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5.监听函数
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
}
四、数据交换格式
1.数据交换格式
数据交换格式就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，常用的两种数据交换格式分别是 XML 和 JSON（重点）。
2.XML
（1）XML与HTML类似，都是标记语言，但是两者没有任何关系。
（2）XML与HTML对比：
- HTML 被设计用来描述网页上的内容，是网页内容的载体
- XML 被设计用来传输和存储数据，是数据的载体
（3）XML的缺点：
- XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
- 在 Javascript 中解析 XML 比较麻烦
3.JSON
3.1 什么是JSON
JSON 就是 Javascript 对象和数组的字符串表示法。JSON 的本质是字符串。
3.2 JSON的两种数据结构
JSON 就是用字符串来表示 Javascript 的对象和数组。
3.3 对象结构
{ "key1" ：value1 ， "key2" ： value2, … }
①数据结构为{ "key1" ：value1 ， "key2" ： value2, … }的键值对结构。
②key 必须是使用英文的双引号包裹的字符串，
③value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
3.4 数组结构
[ "java", "javascript", 30, true … ]
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
3.5 JSON语法注意事项
① 对象中属性名必须使用双引号包裹
② 字符串类型的值必须使用双引号包裹
③ JSON 中不允许使用单引号表示字符串
④ JSON 中不能写注释
⑤ JSON 的最外层必须是对象或数组格式
⑥ 不能使用 undefined 或函数作为 JSON 的值
3.6 JSON字符串与js对象（数组）的转换
（1）把js对象（数组）换成JSON字符串
JSON.stringify（"数据"）
（2）把JSON字符串转换成js对象（数组）
JSON.parse（"字符串"）
// 1.将JSON字符串转换成js对象（数组）
var jsonStr = '{"name": "吴磊","age":22,"hobby":["打篮球","刺激战场"]}';
console.log(jsonStr);
var result = JSON.parse(jsonStr);
console.log(result);
// 2.将js对象（数组）转换成JSON字符串
var arr = ['你好', 22, null, { name: '吴磊' }];
console.log(arr);
var result2 = JSON.stringify(arr);
console.log(result2);
3.7 序列号与反序列化
①把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
②把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
五、封装自定义Ajax函数--myAjax( )
1.封装一个函数，将调用myAjax( )时提交的参数转换成查询字符串
2.在myAjax( )函数中：
①创建XMLHttpRequest对象
②判断查询类型是GET还是POST，执行不同操作
③创建监听事件onreadystatechange
// 1.准备工作：封装函数，将对象形式的data数据转换成查询字符串
function resolveData(data) {
var arr = [];
for (let k in data) {
arr.push(k + '=' + data[k]);
}
return arr.join('&');
}
// var obj = { name: '吴磊', age: 22 };
// console.log(resolveData(obj));
// 2.封装自己的Ajax函数
// ①创建 xhr 对象
// ②将参数转换成查询字符串
// ③判断查询类型，进行不同操作
// ④监听 onreadystatechange 事件
function myAjax(options) {
var xhr = new XMLHttpRequest();
var addressStr = resolveData(options.data);
if (options.method.toUpperCase() === 'GET') {
xhr.open(options.method, options.url + '?' + addressStr);
xhr.send();
} else if (options.method.toUpperCase() === 'POST') {
xhr.open(options.method, options.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(addressStr);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText); //将返回的数据转换为js对象
options.success(result); //调用用户的success方法，将返回的数据当做实参传入
}
};
}
// 3.测试自定义Ajax函数
myAjax({
method: "get",
url: "http://www.liulongbin.top:3006/api/getbooks",
data: {id:1},
success: function(res){
console.log(res);
}
});
六、XMLHttpRequest Level2的新特性
1. 旧版XMLHttpRequest的缺点
- 只支持文本数据的传输，无法用来读取和上传文件
- 传送和接收数据时，没有进度信息，只能提示有没有完成
2.XMLHttpRequest Level2的新功能
①可以设置 HTTP 请求的时限
②可以使用 FormData 对象管理表单数据
③可以上传文件
④可以获得数据传输的进度信息
3.设置HTTP请求时限
新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：
xhr对象.timeout = 3000 （单位是毫秒）
上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。
与之配套的还有一个timeout 事件，用来指定回调函数：
xhr对象.ontimeout = function() { }
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
// 设置请求时限
xhr.timeout = 30;
// 请求超时后的回调函数
xhr.ontimeout = function () {
alert('请求超时!');
};
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
4.FormData对象
- Ajax在提交表单数据时，需要通过JQuery提供的serialize( )方法快速获取表单信息。
- 为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作。
（1）手动给FormData对象添加数据
①创建FormData实例
②使用append("属性名" ，"属性值" )方法为FormData实例添加数据
③在xhr对象调用send()方法时，直接将FormData实例传入。
// 1.创建FormData实例对象
var fd = new FormData();
// 2.为实例对象添加数据
fd.append('username', '吴磊');
fd.append('password', '980903');
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));
}
};
/* Object
data: {username: "吴磊", password: "980903"}
message: "测试FormData表单提交成功！"
__proto__: Object */
（2）用FormData对象获取form表单的数据 （重点！！！）
var fd = new FormData (form表单对象 )；
①在创建FormData实例时，直接将form表单的原生DOM对象传入，表单数据会自动填充到 FormData 对象中。(注意！！！）
②fd接收到的就是查询字符串。
③替代了JQuery提供的serialize( )方法。
④FormData对象获取的表单值必须有name属性。
⑤FormData对象只支持POST请求，不支持GET请求。
⑥使用FormData对象发送POST请求时，没有第三步！！！千万不能写！！！。
$('#f').on('submit', function (e) {
e.preventDefault();
// 创建FormData实例，自动获取form表单的数据
var fd = new FormData(this);
// 发起POST请求，提交数据
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));
}
};
});
5.利用FormData对象上传文件 （重点！！！）
① 定义 UI 结构
一个文件选择框、一个上传按钮、一张图片
② 验证是否选择了文件
文件选择框有一个files属性，是一个数组，存储了我们选择待上传的文件。
③ 向 FormData 中追加文件
FormData对象.append( "属性名" ，"文件选择框数组[ 0 ]"
④ 使用 xhr 发起上传文件的POST请求
使用FormData对象发送POST请求时，没有第三步。。
![]()
6.显示文件上传进度
（1）新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。
（2）事件对象e有三个重要属性：
①e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
②e.loaded 已传输的字节
③e.total 需传输的总字节
（3）在创建xhr对象之后，发送POST请求之前，监听上传进度。
// 5.监听上传进度
xhr.upload.onprogress = function (e) {
// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100);
console.log(percentComplete);
}
};
7.使用BootStrap渲染进度条
①复制一个BootStrap的进度条HTML结构
②在监听文件上传的事件中，将上传进度赋值给进度条。
③POST请求完成后，使用xhr.upload.onload事件可以添加文件上传成功后的回调函数。
七、jQuery实现文件上传（与进度监听）
还是借助FormData对象上传文件。
与上面的区别：
（1）上面使用XMLHttpRequest对象发送POST请求；jQuery必须使用ajax( )方法。
（2）Ajax请求中必须添加以下属性
contentType: false,
processData: false,
（3）
使用原生js获取数组：
var filesArr = document.querySelector('input').files；
使用jQuery：
var filesArr = $('input')[0].files
（4）可以监听Ajax请求开始与结束的函数。
$(document).ajaxStart( callback( ) )
$(document).ajaxStop( callback( ) )
八、axios
axios是一个只专注于数据请求的库。
1.使用axios发起GET请求 （$.get( )）
①引入axios.js文件
②
axios.get ( " url " ， { params：{参数} } ）.then ( callback() )
2.使用axios发起POST请求 ( $.post( ) )
①引入axios.js文件
②
axios.post ( " url " ， {参数} ）.then ( callback() )
// 2.使用axios发起get请求
axios.get('http://www.liulongbin.top:3006/api/get',{params: {id:1}}).then(function(res){
console.log(res.data);
})
// 3.使用axios发起POST请求
axios.post('http://www.liulongbin.top:3006/api/post',{ location: '北京', address: '顺义' }).
then(function(res){
console.log(res.data);
})
3.直接使用axios发起请求 （ $.ajax( ) ）
axios( {
method："请求类型"，
url: "URL地址"，
data: { POST数据 } 或者
params: { GET参数 }
} ).then(callback)
// 1.发起GET请求
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/get',
params: { id: 1 },
}).then(function (res) {
console.log(res.data);
});
// 2.发起POST请求
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: { bookname: '列夫托尔斯泰', author: '阴间出版社' },
}).then(function (res) {
console.log(res.data);
});