用原生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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
JQuery学习总结【一】
Dec 01 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
老生常谈的跨域处理
Jan 11 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python实现替换文件中指定内容的方法
2018/03/19 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python 串口通信的实现
2020/09/29 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
Linux文件系统类型
2012/09/16 面试题
加油口号大全
2014/06/13 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android