getJSON原理展示 模拟getJSON

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://dev.uuu9.com/js/jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
    <script>
        jQuery(document).ready(function () {
            function getData(data) {
               alert(data);
            }
            function newGetJSON(url, callback, callbackname) {
                this.callFuntion = callbackname || 'urlcallback';
                try {
                    eval(this.callFuntion + "=function(data){callback(data);delete " + this.callFuntion + ";}");
                }
                catch (e) {
                    return;
                }
                jQuery.getScript(url);
            }
            var getUrl="";
            newGetJSON(getUrl+"&callback=newfun",function(data){alert(data)});//调用方式1
            newGetJSON(getUrl+"&callback=newfun",function(data){alert(data)},"newfun");//调用方式2
    });
    </script>
    <div id="content">
    
    </div>
</body>
</html>

看原来过程:

1.定义客户端函数newfun,

2.callback=newfun,传入服务器端,产生数据newfun(data);

3.构造客户端的newfun函数,

newfun=function(data){
callback(data);
delete newfun;}

这里用到的js的回调函数的传递参数。

其中callback为回调函数,保存匿名函数(function(data){alert(data)})或getData的函数地址。

参数船只顺序为getData-->function newGetJSON(...,callback,...)-->callback(...)。传递的是getData函数的地址。

4.eval(newfun=function(){});加载newfun函数。

4.getScript(url);构造script 调用远程js.

5.执行newfun(data)函数。

data传递顺序为-->newfun(data)(远程发送到客户端的函数体)-->callback(data)(保存回调函数的函数)-->getData(data)(回调函数).

好处:因为JQuery的callback=?一直处于变化的状态,所有用这种方法可以保证getJSON的callback一直不变,使用浏览器缓存,减少调用次数。

 

下面是一固定返回值的异步远程调用方法。

        jQuery(document).ready(function () {
            function getData(data) {
                alert(data);
            }
            function newGetJSON(url, callback) {
                newfun = function (data) {//这里可以扩展为多个参数
                    callback(data);//3
                }
                jQuery.getScript(url);//2
            }
            newGetJSON("http://...&callback=newfun", getData);//1
        });

 可以从中看出 使用通过过script方式利用js的回调用函数巧妙的取到了梦寐以求的data值。

 

 

posted @ 2011-12-01 17:56  skykang  阅读(2070)  评论(0编辑  收藏  举报