专栏首页张培跃原生js模仿jQuery实现对Ajax的封装

原生js模仿jQuery实现对Ajax的封装

老铁们,还记得如何对原生ajax进行封装吗?注释较少,看看是否还能看的明白?

封装如下:
function ajax(obj){
    //指定提交方式的默认值
    obj.type = obj.type || "get";
    //设置是否异步,默认为true(异步)
    obj.async = obj.async || true;
    //设置数据的默认值
    obj.data = obj.data || null;
    var params=_params(obj.data);
    //在路径后面添加时间戳加随机数防止浏览器缓存。
    obj.url+=(obj.url.indexOf("?")>-1?"&":"?")+"t="+((new Date()).getTime()+Math.random());
    if(obj.type.toLowerCase()=="get" && params.length>0){//将转换后的data.与url进行拼接。
        obj.url+="&"+params;
    }
    var xhr=new XMLHttpRequest();
    xhr.open(obj.type,obj.url,obj.async);
    if(obj.type.toLowerCase()=="post"){
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params)
    }else
        xhr.send(null);
    if(obj.async){//异步调用
        //监听响应状态。
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4)//响应状态为4,数据加载完毕。
                callback();
        }
    }else//同步
        callback();
    function callback(){
        if(xhr.status==200){
            obj.success(xhr.responseText);
        }else{
            obj.error(xhr.status);
        }
    }
    //将对象序列化,将对象拼接成url字符串
    function _params(data){
        if(obj==null)
            return obj;
        var arr=[];
        for(var i in data){
            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
        }
        return arr.join("&");
    }
}
调用如下:
ajax({
    type:"get",
    data:{
        name:"laoliu"
    },
    url:"getUserByName.php",
    async:false,
    success:function(res){
          //成功
    },
    error:function(error){
        //失败
    }
})

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 强大的JS方法Object.defineProperty详解及VUE.JS双向绑定原理

    我们知道对象是由多个键/值对组成的无序集合。对象当中的属性可以是任意类型的值。我们可以通过构造函数以及字面量的形式来定义对象。

    用户1272076
  • JavaScript当中的this究竟是个啥?

    与其它语言当中的this不同的是,我们JS当中的this总是指向一个对象。而具体是指向哪一个对象,则要看其运行时是基于哪一个函数的执行环境所动态绑定的。

    用户1272076
  • JavaScript的变量及作用域(清晰版)

    JS是一门弱类型(松散型)的语言,这也就是说其天生就与众不同,独领风骚! 在讲解变量作用域之前,我们先来了解一下JS中的变量。JS中的变量与其它语言有很大的不同...

    用户1272076
  • 原生JS的Ajax

          非IE6浏览器:var obj = new XMLHttpReuqest();

    莫问今朝
  • GC算法-标记压缩算法

    还记得标记清除和复制算法的问题么? 堆使用效率低和碎片化问题. 那么有没有能够利用整个堆, 有没有内存碎片化问题的算法呢? 这就是标记压缩算法了.

    烟草的香味
  • JavaScript 对象

    JavaScript 中的所有事物都是对象:字符串、数值、数组、函数… 对象创建 var obj = Object.create({x:1}); 属性 obj....

    康怀帅
  • [探索]怎样让 JS - API 具有更好的实用性

    在上家公司开发后台管理系统的时候,频繁要处理各种数据显示的问题,一开始是实现就好。后来写多了,自己看得也难受了。就想着怎么优化代码和复用了。下面就通过一个简单的...

    守候i
  • javascript第3讲:数据类型(ES5中)

    小海怪的互联网
  • 32.Django form组件

    Form组件  Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面...

    zhang_derek
  • 再说深拷贝对象的研坑

    浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。 深拷贝:会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会...

    张炳

扫码关注云+社区

领取腾讯云代金券