不如封装一个原生Ajax

清疚 2021-09-17 22:46 363阅读 0赞

**封装原生Ajax**

我们常常引用jq就是为了使用上面的ajax,方便又实用。但是jq文件一个高达几十kb,还有近几年jq的发展趋势不容乐观，jq中还迟迟没有改进。于是自己造轮子，下面封装了原生JS ajax 。你可以直接复制拿过来用。

function ajax(obj) { 
        // 对实参处理
        obj = obj || { };
        // 定义局部变量
        var xmlhttp, type, url, async, dataType, data;
        // 默认type为GET
        type = obj.type || 'GET';
        type = trim(type).toUpperCase();
        // 接口
        url = obj.url
        url = trim(url);
        // 默认为异步请求
        async = obj.async || true;
        // 设置跨域
        dataType = obj.dataType || 'HTML';
        dataType = trim(dataType).toUpperCase();
        // 发送参数
        data = obj.data || { };
        // 删除左右空格
        function trim(str) { 
            return str.replace(/^\s+|\s+$/g, "");
        };
        // 定义格式化参数函数
        var formatParams = function () { 
            if (typeof (data) == "object") { 
                var str = "";
                for (var pro in data) { 
                    str += pro + "=" + data[pro] + "&";
                }
                data = str.substr(0, str.length - 1);
            }
            if (type == 'GET' || dataType == 'JSONP') { 
                if (url.lastIndexOf('?') == -1) { 
                    url += '?' + data;
                } else { 
                    url += '&' + data;
                }
            }
        }
        // 第一步，创建xmlhttprequest对象用来和服务器交换数据。
        if (window.XMLHttpRequest) { 
            //Chrome || Firefox
            xmlhttp = new XMLHttpRequest();
        } else { 
            //IE
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 跨域请求
        if (dataType == 'JSONP') { 
            if (typeof (obj.beforeSend) == 'function') obj.beforeSend(xmlhttp);
            var callbackName = ('jsonp_' + Math.random()).replace(".", "");
            var oHead = document.getElementsByTagName('head')[0];
            data.callback = callbackName;
            var ele = document.createElement('script');
            ele.type = "text/javascript";
            ele.onerror = function () { 
                console.log('failed');
                obj.error && obj.error("failed");
            };
            oHead.appendChild(ele);
            window[callbackName] = function (json) { 
                oHead.removeChild(ele);
                window[callbackName] = null;
                obj.success && obj.success(json);
            };
            formatParams();
            ele.src = url;
            return;
        } else { 
            formatParams();
            // 第二步，打开链接
            xmlhttp.open(type, url, async);
            // 设置响应头
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
            if (typeof (obj.beforeSend) == 'function') obj.beforeSend(xmlhttp);
            // 第三步，发送请求
            xmlhttp.send(data);
            // 第四步，响应处理
            xmlhttp.onreadystatechange = function () { 
                if (xmlhttp.status != 200) { 
                    console.log(xmlhttp.status + 'failed');
                    obj.error && obj.error(xmlhttp.status + 'failed');
                    return;
                }
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                    if (dataType == 'JSON') { 
                        try { 
                            res = JSON.parse(xmlhttp.responseText);
                        } catch (e) { 
                            console.log('json格式错误');
                            obj.error('json格式错误');
                        }
                    } else if (dataType == 'XML') { 
                        res = xmlhttp.responseXML;
                    } else { 
                        res = xmlhttp.responseText;
                    }
                    obj.success && obj.success(res);
                }
            }
        }
    }

上面是封装Ajax的js代码。  
下面是一个示例代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>封装原生js_Ajax</title>
        <style> #btn{ font-size:20px; padding:10px; } </style>
    </head>
    <body>
        <button id="btn" onclick="myFunction()">请求数据</button>
    </body>
    <script src="./ajax.js"></script>
    <script> var btn=document.querySelector("#btn"); var url="https://free-api.heweather.com/v5/weather?city=qingdao&key=18c650b4fad546ac9d384e6858526267";//示例网址 var url1="http://192.168.2.62/test5.php/";//测试网址 function myFunction(){ ajax({ url: url, type: "get", dataType: "json", success: function(data) { var list = data; console.log(list);}, error: function(err) { alert('请求数据失败'); } }) } </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关 TypeScript 封装原生 Ajax

TypeScript 封装原生 Ajax，CRUD 对应post,delete,put,get 实列如下： 1.定义 ajax 请求所需的参数接口 interfac

系统管理员/ 2023年07月12日 06:23/ 0 赞/ 8 阅读

相关原生js封装ajax方法

jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会

绝地灬酷狼/ 2022年09月26日 00:26/ 0 赞/ 212 阅读

相关原生ajax封装

引入线上jquery： <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

梦里梦外;/ 2022年09月14日 02:25/ 0 赞/ 223 阅读

相关原生js封装Ajax函数

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。通过异步模式，提升了用户体验。优化了浏览器和服

￡神魔★判官ぃ/ 2022年05月23日 04:26/ 0 赞/ 277 阅读

相关原生ajax的封装

原生ajax的封装 get请求 post请求有参无参都可以实现返回数据类型，需要自己处理，返回字符串格式 <!DOCTYPE html> <html

青旅半醒/ 2022年01月23日 06:04/ 0 赞/ 281 阅读

相关原生js封装ajax请求

一个完整的ajax请求封装，适用场景： 1. get 请求 2. post请求 3. 表单提交方式 4. 表单上传文件 function ajax(opti

向右看齐/ 2021年12月14日 06:29/ 0 赞/ 414 阅读

相关不如封装一个原生Ajax

封装原生Ajax 我们常常引用jq就是为了使用上面的ajax,方便又实用。但是jq文件一个高达几十kb,还有近几年jq的发展趋势不容乐观，jq中还迟迟没有改进。于是自己造轮子

清疚/ 2021年09月17日 22:46/ 0 赞/ 364 阅读

相关原生ajax封装

//参数/ url :地址 obj: 参数 callback 回调 //没做容错有时间在写一

深藏阁楼爱情的钟/ 2021年09月16日 23:42/ 0 赞/ 386 阅读

相关原生js 封装ajax

这是自己封装的ajax ，分享一下：直接上代码文件夹 ![70][] index.html ![70 1][] ![70 2][]

不念不忘少年蓝@/ 2021年09月15日 07:50/ 0 赞/ 456 阅读

相关原生JS封装AJAX方法

原生JS封装AJAX方法 Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理 ...

红太狼/ 2020年06月06日 18:35/ 0 赞/ 902 阅读