zoukankan      html  css  js  c++  java
  • 用原生JavaScript实现jQuery的$.getJSON

      今天在写一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
    });

      欢迎评论拍砖:)

    版权

    作者:Artwl

    出处:http://artwl.cnblogs.com

    本文首发博客园,版权归作者跟博客园共有。转载必须保留本段声明,并在页面显著位置给出本文链接,否则保留追究法律责任的权利。

  • 相关阅读:
    我的第一个JAVA程序
    根据分辨率改变宽度 demo
    CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
    学习lofter 让图片适应各个分辨率的方法
    浮点数剖析
    day03<Java语言基础+>
    ASCII码表完整版
    day02<Java语言基础+>
    day01<计算机基础知识&Java语言基础>
    Java集合----概述、Collection接口、Iterator接口
  • 原文地址:https://www.cnblogs.com/artwl/p/3043629.html
Copyright © 2011-2022 走看看