用原生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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
Jquery获取radio选中的值
May 05 jQuery
vue.js语法及常用指令
Oct 29 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 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 数组的一个悲剧?
2011/05/11 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
js实现全选和全不选
2020/07/28 Javascript
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
个人课题方案
2014/05/08 职场文书
银行先进个人总结
2015/02/15 职场文书
防暑降温通知书
2015/04/27 职场文书
催款律师函范文
2015/05/27 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python