/*
* ajax() 作用 向服务器发送请求
参一 url
参二 请求参数
参三 请求方法
参四 请求成功的响应处理函数
参五 请求失败的处理函数
*/
var parms = {
page: 1,
num: 1000
}
ajax('http://musicapi.leanapp.cn/artist/list', parms, 'GET', true, success, error);
function ajax(url, parm, method, async, success, error) {
// 实例化请求对象
var xhr = new XMLHttpRequest();
var url = url; // 接受请求地址
if (method === "GET") { // 如果是 get
// 1: 处理请求参数,将请求参数拼接到url地址上
url += "?";
for (var x in parm) { // 拼接字符串
url += x + "=" + parm[x] + "&";
}
url = url.slice(0, url.length - 1); // 去掉最后一个&
// 2:准备发送请求
xhr.open(method, url, async);
//3:发送请求
xhr.send();
} else if (method === "POST") {
// 1:对post 请求的请求参数处理
var str = '' // 初始化请求参数
xhr.open(method, url, async); // 准备发送请求
// 设置请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 请求参数处理
for (var x in parm) {
str += x + '=' + parm[x] + '&'
}
str = str.slice(0, str.length - 1);
// 将请求参数传给 send 发送post 请求
xhr.send(str);
}
// 4:监听服务器响应事件
xhr.onreadystatechange = function () {
// 接受服务器响应的数据
var data = xhr.responseText;
// console.log(data);
if (xhr.status === 200 & xhr.readyState === 4) {
// 请求成功了
// 将请求成功后数传入给success 回调函数
success(data); // 请求成功的处理的函数
} else if (xhr.status === 404 || xhr.status === 500) {
// 请求失败的处理函数
error(data)
}
}
}
function success(data) {
console.log('请求成功了');
console.log('这里是请求成功的业务处理函数');
}
function error(data) {
console.log('请求失败了');
console.log('这里是请求失败的业务处理函数');
}
/**
* ajax() 发送请求
* @param {*} url 接口地址
* @param {*} parm 请求参数
* @param {*} method 请求方式 GET POST
* @param {*} async 异步true 同步 false
* @param {*} success 请求成功的回调函数处理
* @param {*} error 请求失败的回调函数处理
*/
ajax 简单方法封装
最新推荐文章于 2020-03-10 22:27:14 发布