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值。