用原生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 相关文章推荐
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
JS图片预加载插件详解
Jun 21 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue使用element-ui按需引入
May 20 Vue.js
基于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实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP会话控制实例分析
2016/12/24 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python中的index()方法使用教程
2015/05/18 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
自荐信格式简述
2014/01/25 职场文书
幼儿教师研修感言
2014/02/12 职场文书
小学开学典礼主持词
2014/03/19 职场文书
经济管理专业求职信
2014/06/09 职场文书
大专生自荐书范文
2014/06/22 职场文书
医院标语大全
2014/06/23 职场文书
党员自评材料范文
2014/12/17 职场文书
北京英文导游词
2015/02/12 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
Elasticsearch 聚合查询和排序
2022/04/19 Python
Python四款GUI图形界面库介绍
2022/06/05 Python