[ 造轮子 ] 手动封装 AJAX （一） —— 基础版

cc17 发布于2019-08-26 13:27 / 2423人阅读

关于 AJAX 相信都用过，自己动手封装的也肯定有不少，但应该都只是简单的可以请求，不能设置同步异步以及返回的数据格式

兼容低版本 IE5、IE6

可以使用 get 和 post 请求数据

可以设置请求头需要的思路以及语法都有了，需要小伙伴自己拓展哦

可以设置返回数据格式，不设置为默认

get 请求的数据拼接我没写，有需要的可以自己加

之后会有 ES6 语法的封装敬请期待

注：代码使用 ES5 语法，我写的这个版本的传参只能按照顺序来

直接上代码

//1.用 ES5 写 ajax
var ajax = function (url,method,data,async,success,error,resType) {
    
    //设置变量默认值
    method = method || "GET";
    async = async || true;
    data = data || "";
    resType = resType || "";
    //数据校验
    if(!url || url === ""){
        throw new Error("url不能为空");//throw 用来抛出异常 
    }
    if(method==="GET" && data != ""){
        throw new Error("请将get请求参数写在url里");//由于时间不太够不再写参数拼接，有兴趣的小伙伴可以自己加参数拼接功能
    }
    //将小写全部转换为大写
    method = method.toUpperCase();
    //判断是否是低版本 IE
    if (window.XMLHttpRequest) { //是否支持XMLHttpRequsest
        var xhr = new XMLHttpRequest();
    } else { //低版本 IE 
        var xhr = new ActiveXObject("Microsft.XMLHTTP");
    }
    //xmlhttp.open(method,url,async) 请求类型 请求地址 是否异步
    xhr.open(method, url, async);
    //设置请求头
    //判断是否设置
    //循环 headers 设置请求头
    // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //设置返回数据格式
    if(async){//如果设置了同步就不能设置返回数据格式
        xhr.responseType = resType; // 在不设置responseType的时候默认为 text
    }
    //send(data) 将请求发送到服务器。 data仅用于post
    xhr.send(data);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {

            var res = xhr.response;
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                success && success(res);
            } else {
                error && error(res);
            }
        }
    }
}
//url,method,data,async,success,error,resType
ajax("1.json","GET","",true,function(res){console.log(res);},function(error){console.log(error);},"json");

请求的 json 文件内容

{
    "name": "yhtx1997",
    "text": "恭喜你测试成功！！！"
}

调用效果图

云服务器 GPU云服务器造轮子一个封装的Ajax类原生js封装ajax js ajax 请求数据封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108842.html

[ 造轮子 ] 手动封装 AJAX （二） —— ES6 版

摘要：相比前一版本除了使用与法外还有以下改动现在不需要按顺序输入参数会针对和做不同的数据处理可以自定义设置请求头增加了参数数据类型的判断调用代码示例调用效果图核心代码没有多少变化，因为只有这一种使用方法不支持低版本浏览器错误判断为必填项请求地址不相比前一版本除了使用 ES6 与法外还有以下改动现在不需要按顺序输入参数会针对 GET 和 POST 做不同的数据处理可以自定义设置请求头...

jhhfft 2019-08-23 14:20 评论0 收藏0
js速记

摘要：相关最大的特性就在于直接操纵网页上的节点，从而实现网页的局部刷新而非全局刷新。该回调函数会在送回响应的时候被调用。当然了，如果浏览器不支持对象，会返回，在这时需要进行额外的处理。前言马上就要参加一个团队项目进行React的前端开发了。最近正在着手熟练React语法，然后发现本质上还是建立在对javascript的深刻理解上。市面上在js基础上封装出了非常多优秀的车轮，其中最被新手广...

MageekChiu 2019-08-21 16:52 评论0 收藏0
精读《怎么用 React Hooks 造轮子》

摘要：可以看到，这样不仅没有占用组件自己的，也不需要手写回调函数进行处理，这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时，因此直接把回调函数抛出来即可。 1 引言上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是...

Shihira 2019-08-26 13:22 评论0 收藏0
手摸手，带你封装一个vue component

摘要：灵活性和针对性。所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。动手开干接下来我们一起手摸手教改造包装一个插件，只要几分钟就可以封装一个专属于你的。项目地址：vue-countTo配套完整后台demo地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带...

pkhope 2019-08-20 15:48 评论0 收藏0
换个眼界看IE，它真的有那么可恶吗？

摘要：随之，网景公司也提出了自己的解决方式，正好与大相反有可能这哥俩谁都不服，专门对着干，它提出了事件捕获的理论，也就是从外向内直至触发元素，依次触发事件。一说到IE我想很多web小伙伴都避之不及，对于IE经验不足的同学可以说更是恨之入骨，撕心裂肺般的烦恼与气愤?，被折磨的不要不要的。我感同身受，去年的我的生日愿望就是，我希望IE浏览器在这世界上没有一个用户。这篇文章是一个追溯历史并收集...

Keagan 2019-08-22 15:31 评论0 收藏0