用原生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 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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
做一个有下拉功能的留言版
2006/10/09 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
python动态加载包的方法小结
2016/04/18 Python
Python3 Random模块代码详解
2017/12/04 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python如何读写字节数据
2020/08/05 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
大学生上课迟到检讨书
2014/10/15 职场文书
2014年学生会工作总结
2014/11/07 职场文书
环保证明
2015/06/23 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
MySQL多表查询机制
2022/03/17 MySQL