用原生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的逻辑运算符 ||
May 31 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
js获取url传值的方法
Dec 18 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Java多态性的定义以及类型
2014/09/16 面试题
小孩百日宴答谢词
2014/01/15 职场文书
出国签证在职证明
2014/01/16 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
企业宣传稿范文
2015/07/23 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers