吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1287|回复: 8
收起左侧

[其他转载] 【Ajax】GET封装

[复制链接]
Dexlux 发表于 2021-3-18 17:58
本帖最后由 Dexlux 于 2021-3-24 18:01 编辑

[JavaScript] 纯文本查看 复制代码
function obj2str(data) {
    data.t = new Date().getTime();
    var res = [];
    for (k in data) {
        //保证URL中不为中文,若有中文需要转码 可以使用encodeURIComponent()
        //URL中只能出现字母、数字、下划线、ASCII码
        res.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]));
    }
    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)
    }
}

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

qilinZhu 发表于 2021-3-20 09:45
哇哦!来了
loveni 发表于 2021-3-19 14:49
 楼主| Dexlux 发表于 2021-3-19 13:53
[JavaScript] 纯文本查看 复制代码
function obj2str(data) {
    data.t = new Date().getTime();
    var res = [];
    for (k in data) {
        //保证URL中不为中文,若有中文需要转码 可以使用encodeURIComponent()
        //URL中只能出现字母、数字、下划线、ASCII码
        res.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]));
    }
    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)
    }
}

tgq15946867790 发表于 2021-3-20 08:51
是jqurey它不香了吗
 楼主| Dexlux 发表于 2021-3-22 13:43

哈哈 在学习AJAX
lelexiaotian 发表于 2021-3-22 16:43
发现用jquery用多了,这个竟然看不懂了
 楼主| Dexlux 发表于 2021-3-22 19:03
lelexiaotian 发表于 2021-3-22 16:43
发现用jquery用多了,这个竟然看不懂了

https://www.bilibili.com/video/BV17W41137jn?p=149
我跟着敲得
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 18:24

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表