一、Ajax的核心:XMLHttpRequest
概念:XMLHttpRequest是浏览器中内置的一个构造函数(属于BOM和DOM范畴),用来创建对象的
作用:用来发起Ajax请求的,是Ajax的核心原理
1、使用XMLHttpRequest进行发送请求
分析ajax请求
axios({
url:'请求地址',
method:'请求方式',
//查询参数
//请求体
}).then(function(res){})
2、XMLHttpRequest中必须要有 请求地址 和 请求方式
// 1.创建一个XMLHttpRequset实例对象
let xhr = new XMLHttpRequest();
// 2.给实例对象设置请求方式和请求地址
// xhr.open('请求方式','请求地址');
xhr.open('get', 'http://www.liulongbin.top:3006/api/get');
// 3.发送请求
xhr.send();
// 4.获取请求的结果(返回的数据)
xhr.onload = function() {
console.log(xhr.response);
}
二、XMLHttpRequest实现get请求
// 1.创建一个XMLHttpRequset实例对象
let xhr = new XMLHttpRequest();
// 2.给实例对象设置请求方式和请求地址
// xhr.open('请求方式','请求地址');
xhr.open('get', 'http://www.liulongbin.top:3006/api/get?aa=11&&bb=22');
// 3.发送请求
xhr.send();
// 4.获取请求的结果(返回的数据)
xhr.onload = function() {
console.log(xhr.response);
}
注意实现总结
a)查看服务器返回结果xhr.onload可以不写,但是推荐加上
b)如果设置了onload,onload事件中的代码只会在服务器返回了数据才会执行
c)onload只要在实例对象之后写就可以
d)send方法必须在open()方法后边设置
e)原生JS发送get请求的时候也可以设置查询参数,查询参数直接拼接写在地址后边 ?aa=11&&bb=22
f)如果查询参数是对象格式,该如何拼接在url地址上?解决办法:遍历对象,可以拿到键和值
let params = {
uname: '张三',
age: '23',
myheight: '180'
}
// 目标格式: uname=张三&age=23&myheight=180
解决办法:遍历对象,可以拿到键和值:
let arr = [];
for (key in params) {
// 将每一个键值对保存在数组中
// console.log(key + '=' + params[key]);
arr.push(key + '=' + params[key])
};
let str = arr.join('&');
console.log(str);
// 将str加在url地址后边就行了 'url地址'+str
三、XMLHttpRequest实现post请求
// 1.创建一个XMLHttpRequset实例对象
let xhr = new XMLHttpRequest();
// 2.给实例对象设置请求方式和请求地址
// xhr.open('请求方式','请求地址');
xhr.open('post', 'http://www.liulongbin.top:3006/api/post');
//--------------------------------------------------------------------
//设置请求体类型post专属(一定要加),以设置allocation/x-www-form-urlencaded格式为例
xhr.setRequestHeader('content-type', 'allocation/x-www-form-urlencaded');
// 3.发送请求
xhr.send('uname=abc&pwd=123');
//--------------------------------------------------------------------
// 4.获取请求的结果(返回的数据)
xhr.onload = function() {
console.log(xhr.response);
}
注意实现总结:
--与get相同--
a)查看服务器返回结果xhr.onload可以不写,但是推荐加上
b)如果设置了onload,onload事件中的代码只会在服务器返回了数据才会执行
c)onload只要在实例对象之后写就可以
d)send()方法必须在open()方法后边设置
--与get不同--
e)加请求体就不是在url后边拼接了
f)如果需要请求体数据,要在send()方法里设置请求体数据(一定要设置请求体格式)
uname=abc&pwd=123 对应的请求体格式是allocation/x-www-form-urlencaded
带有分割线的 对应的请求体格式是multipart/form-data
uname=abc 换行 pwd=123 对应的格式是 text/plain
也可以像get一样遍历对象转换格式放入send中
let params = {
uname: '张三',
age: '23',
myheight: '180'
};
// 目标格式: uname=张三&age=23&myheight=180
解决办法:遍历对象,可以拿到键和值
let arr = [];
for (key in params) {
// 将每一个键值对保存在数组中
// console.log(key + '=' + params[key]);
arr.push(key + '=' + params[key])
};
let str = arr.join('&');
console.log(str);
// 将str加在send()中就行了 send(str)
四、封装自己的Ajax
function myAjax(opt) {
let xhr = new XMLHttpRequest();
// 查询参数构造部分---------------------------
// 将查询参数由对象转为字符串,拼接在地址上
if (opt.params) {
// 用户设置了查询参数
let obj = opt.params;
let ary = [];
for (key in obj) {
ary.push(key + '=' + obj[key])
}
let url_str = ary.join('&');
//查询类型和地址部分------------------------------
xhr.open(opt.method, opt.url + '?' + url_str);
} else {
// 用户没设置查询参数
// 查询类型和地址部分-- -- -- -- -- -- -- -- -- -- -- -- -- -- --
xhr.open(opt.method, opt.url);
}
//发送-------------------------------------------
// 判断用户是否设置了请求体
if (opt.data) {
// 有请求体,xhr.send(请求体数据);
// 根据请求体类型发送请求体数据xhr.send(请求体数据);
if (opt.data instanceof FormData) {
//如果是FormData格式数据
//编辑请求体格式
// xhr.setRequestHeader('content-type', 'multipart/form-data')
xhr.send(opt.data);
// 回调函数构造部分-------------------------------
xhr.onload = function() {
// console.log(this.response)
opt.success(JSON.parse(this.response));
};
return;
}
if (opt.data instanceof Object) {
//如果是Object格式数据
let obj = opt.data;
let ary = [];
for (key in obj) {
ary.push(key + '=' + obj[key])
}
let data_str = ary.join('&');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(data_str);
// 回调函数构造部分-------------------------------
xhr.onload = function() {
// console.log(this.response)
opt.success(JSON.parse(this.response));
};
return;
}
// console.log(opt.url)
} else {
// 没有请求体
//发送无请求体的ajax请求
xhr.send();
// console.log(opt.url)
// 回调函数构造部分-------------------------------
xhr.onload = function() {
// console.log(this.response)
opt.success(JSON.parse(this.response));
};
}
}