【Ajax】GET封装
本帖最后由 Dexlux 于 2021-3-24 18:01 编辑function obj2str(data) {
data.t = new Date().getTime();
var res = [];
for (k in data) {
//保证URL中不为中文，若有中文需要转码 可以使用encodeURIComponent（）
//URL中只能出现字母、数字、下划线、ASCII码
res.push(encodeURIComponent(k) + '=' + encodeURIComponent(data));
}
return res.join('&');
}
// function ajax(type, url, obj, timeout, success, error) {
function ajax(option) {
// 0.将对象转换为字符串
var str = obj2str(option.data);
// 1.创建异步对象
// var xmlhttp = new XMLHttpRequest();
var xmlhttp, timer;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
// 保证每次请求地址不同 url + '?t=' + (new Date().getTime())
// xmlhttp.open('GET', url + '?t=' + (new Date().getTime()), true);
if (option.type.toLowerCase() === 'get') {
xmlhttp.open(type, option.url + '?' + str, true);
// 3.发送GET请求
xmlhttp.send();
} else {
xmlhttp.open(option.type, option.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3.发送POST请求
xmlhttp.send(str);//参数赋值不留空格
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
clearInterval(timer);
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
// console.log('接收到服务器返回的数据');
option.success(xmlhttp);
} else {
// console.log('未接收到服务器返回的数据');
option.error(xmlhttp);
}
}
};
//判断外界是否传入超时时间
if (option.timeout) {
timer = setInterval(function () {
console.log('中断请求');
xmlhttp.abort();//结束发送请求
clearInterval(timer);
}, option.timeout)
}
} 哇哦!来了 good good study,day day up! function obj2str(data) {
data.t = new Date().getTime();
var res = [];
for (k in data) {
//保证URL中不为中文，若有中文需要转码 可以使用encodeURIComponent（）
//URL中只能出现字母、数字、下划线、ASCII码
res.push(encodeURIComponent(k) + '=' + encodeURIComponent(data));
}
return res.join('&');
}
// function ajax(type, url, obj, timeout, success, error) {
function ajax(option) {
// 0.将对象转换为字符串
var str = obj2str(option.data);
// 1.创建异步对象
// var xmlhttp = new XMLHttpRequest();
var xmlhttp, timer;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
// 保证每次请求地址不同 url + '?t=' + (new Date().getTime())
// xmlhttp.open('GET', url + '?t=' + (new Date().getTime()), true);
if (option.type.toLowerCase() === 'get') {
xmlhttp.open(type, option.url + '?' + str, true);
// 3.发送GET请求
xmlhttp.send();
} else {
xmlhttp.open(option.type, option.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3.发送POST请求
xmlhttp.send(str);//参数赋值不留空格
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
clearInterval(timer);
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
// console.log('接收到服务器返回的数据');
option.success(xmlhttp);
} else {
// console.log('未接收到服务器返回的数据');
option.error(xmlhttp);
}
}
};
//判断外界是否传入超时时间
if (option.timeout) {
timer = setInterval(function () {
console.log('中断请求');
xmlhttp.abort();//结束发送请求
clearInterval(timer);
}, option.timeout)
}
}
是jqurey它不香了吗 tgq15946867790 发表于 2021-3-20 08:51
是jqurey它不香了吗
哈哈 在学习AJAX{:1_908:} 发现用jquery用多了，这个竟然看不懂了{:1_923:} lelexiaotian 发表于 2021-3-22 16:43
发现用jquery用多了，这个竟然看不懂了
https://www.bilibili.com/video/BV17W41137jn?p=149
我跟着敲得:Dweeqw
页:
[1]