用原生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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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文本数据库的搜索方法
2006/10/09 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python实现广度优先搜索过程解析
2019/10/19 Python
python关闭占用端口方式
2019/12/17 Python
Python中的整除和取模实例
2020/06/03 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
区分python中的进程与线程
2020/08/13 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
考试没考好检讨书
2014/01/31 职场文书
店长职务说明书
2014/02/04 职场文书
小学教师师德感言
2014/02/10 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
职业女性的职业规划
2014/03/04 职场文书
2014年元旦感言
2014/03/06 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
立春观后感
2015/06/18 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
浅谈python中的多态
2021/06/15 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL