用原生JavaScript实现jQuery的$.getJSON的解决方法


Posted in Javascript onMay 03, 2013

今天在写一DEMO,其中用到了jQuery的$.getJSON方法,写完后发现整个DEMO中用到jQuery中的就这一个地方,但要引入一个jQuery实在不划算,于是就自己实现了一个简单版的,基本可以满足需求,现分享出来:

var $ = {
    getJSON: function(url, params, callbackFuncName, callback){
        var paramsUrl ="",
            jsonp = this.getQueryString(url)[callbackFuncName];
        for(var key in params){
            paramsUrl+="&"+key+"="+encodeURIComponent(params[key]);
        }
        url+=paramsUrl;
        window[jsonp] = function(data) {
            window[jsonp] = undefined;
            try {
                delete window[jsonp];
            } catch(e) {}
            if (head) {
                head.removeChild(script);
            }
            callback(data);
        };
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.charset = "UTF-8";
        script.src = url;
        head.appendChild(script);
        return true;
    },
    getQueryString: function(url) {
        var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1),
            re = /([^&=]+)=([^&]*)/g, m;
        while (m = re.exec(queryString)) {
            result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
        }
        return result;
    }
};

调用DEMO如下:

var url = "http://xxx.xxx.xxx?callback=jsonp123";
var params = {
    a:1,
    b:2
};
$.getJSON(url, params, "callback", function(data){
    //todo
});

Javascript 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
JS 表单验证大全
Nov 23 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 #Javascript
JS动态获取当前时间,并写到特定的区域
May 03 #Javascript
JS实现商品倒计时实现代码
May 03 #Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 #Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 #Javascript
javascript两种function的定义介绍及区别说明
May 02 #Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 #Javascript
You might like
PHP中捕获超时事件的方法实例
2015/02/12 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
深入理解React高阶组件
2017/09/28 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
js+canvas绘制图形验证码
2020/09/21 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
python print 按逗号或空格分隔的方法
2018/05/02 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python获取时间戳代码实例
2019/09/24 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
django 取消csrf限制的实例
2020/03/13 Python
Python插件机制实现详解
2020/05/04 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
聊聊python中的异常嵌套
2020/09/01 Python
python Timer 类使用介绍
2020/12/28 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
RealTek面试题
2016/06/28 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
初二物理教学反思
2014/01/29 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
阅兵口号
2014/06/19 职场文书
2014年审计工作总结
2014/11/17 职场文书
工作后的感想
2015/08/07 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers