JsDebug={
maxAjaxLogNum:5,      //最多能显示多少条Ajax调试信息
maxJsLogNum:50,       //最多能显示多少条Javascript调试信息
ajaxLog:[],        
jsLog:[],
timeLog:{},
ajax:function(msg){
var self=JsDebug;
self.ajaxLog.unshift(msg)
if (self.ajaxLog.length>self.maxAjaxLogNum) self.ajaxLog.length=self.maxAjaxLogNum
},
debug:function(msg){JsDebug.logger(msg,"debug")},
info:function(msg){JsDebug.logger(msg,"info") },
msg:function(msg) {JsDebug.logger(msg,"info")},
warn:function(msg){JsDebug.logger(msg,"warn")},
error:function(msg){JsDebug.logger(msg,"error")},
timeStart:function(funcName){
var self=JsDebug;
if (typeof(self.timeLog[funcName])) delete self.timeLog[funcName]
self.timeLog[funcName]=new Object()
self.timeLog[funcName].startTimeObj=new Date()
return self.timeLog[funcName].startTimeObj
},
timeEnd:function(funcName){
var self=JsDebug;
if (typeof(self.timeLog[funcName])=='undefined' 
|| typeof(self.timeLog[funcName].startTimeObj)=='undefined')  return false
self.timeLog[funcName].endTimeObj=new Date()
self.timeLog[funcName].timeRun=self.timeLog[funcName].endTimeObj-self.timeLog[funcName].startTimeObj
return self.timeLog[funcName].endTimeObj
},
logger:function(msg,type){
var self=JsDebug;
self.jsLog.unshift(["<div class="+type+">【"+type+"】<xmp>"+msg+"</xmp><hr></div>",type])
if (self.jsLog.length>self.maxJsLogNum) self.jsLog.length=self.maxJsLogNum
},
output:function(type){
var self=JsDebug
var s="<tr><td class=f>$1</td><td class=s>$2</td><td class=e>$3</td><td class=t>$4</td></tr>"
    var arr=[]
if (!type) type=""
switch(type){
case "time":
case "":
var obj=self.timeLog
arr.push("<font><a href=javascript:void(0) onclick=t(this)>显示隐藏性能信息</a><table border width=60%>")
arr.push(s.replace("$1","模块名").replace("$2","开始时间").replace("$3","结束时间").replace("$4","时间(ms)"))
for(var key in obj){
var o=obj[key]
var d1=o.startTimeObj
var d2=o.endTimeObj
var t1=""+d1.toLocaleTimeString()+"."+d1.getMilliseconds()
var t2=""+d2.toLocaleTimeString()+"."+d2.getMilliseconds()
arr.push(s.replace("$1",key).replace("$2",t1).replace("$3",t2).replace("$4",formatNum(o.timeRun)))
}
arr.push("</table></font>")
if (type) break;
case "js":
case "":
arr.push("<font><a href=javascript:void(0) onclick=t(this)>显示隐藏调试信息</a><font>")
var jsDebugMsg=self.jsLog.inject([],function(ret,x){ret.push(x[0]);return ret}).join("")
if (jsDebugMsg){
    arr.push('<select onchange="f(this.value)"><option>请选择...</option><option value="debug">调试信息(debug)')
    arr.push('</option><option value="warn">警告信息(warn)</option><option value="error">错误信息(error)')
    arr.push('</option><option value="info">一般信息(info)</option></select><p>')
}
        arr.push(jsDebugMsg)  
    arr.push("</font></font>")
        if (type) break;
case "ajax":
case "":
    arr.push("<font><a href=javascript:void(0) onclick=t(this)>显示隐藏AJAX信息</a><font>")
arr.push(self.ajaxLog.join(""))
arr.push("</font></font>")
if (type) break;
  default:
break;
}
return arr.join("")
}
}//下面几行做一个快速连接,以后调试也不要打那么多字,辛苦啊$t1=JsDebug.timeStart
$t2=JsDebug.timeEnd
$ajax=JsDebug.ajax
$debug=JsDebug.debug
$info=JsDebug.msg
$msg=JsDebug.msg
$warn=JsDebug.warn
$error=JsDebug.error//绑定事件,兼容FF.  唉,又是FF,有Prototype.js的同学可以用 Event.observe(...)
function attachDebugEvent(element,name,func){
    if (element.addEventListener) element.addEventListener(name, func,"false");
    if (element.attachEvent)      element.attachEvent('on' + name, func)
}
/*
打开调试窗口,可以按F5查看最新的调试信息。
Bug: FF打开新窗口的时候,再次按F5的时候 能取到 opener,但是却取不到opener.JsDebug,
*/function openDebugWin(){
var html=[]
html.push('<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>')
html.push('调试窗口</title>\r\n\r\n\r<meta name="author" content="Go_Rush([email protected])">\r\n\r\n\r<style>')
html.push('*{font-size:14px}p{cursor:pointer}span.url{color:red}xmp{display:inline}hr{height:1px}')
html.push('td{text-align:center;font-size:14px}a{display:block;color:blue;margin:10px;width:120px}a.url{margin:0px}')
html.push('.debug{color:blue}.error{color:red}.info{color:green}.warn{color:saddlebrown}')
html.push('</style><script>function t(o){var e=o.nextSibling;e.style.display=e.style.display=="none"?"":"none"}')
html.push('function f(v){var ds=document.getElementsByTagName("div");for(var i=0;i<ds.length;i++){')
html.push('if (ds[i].className==v || !v){ds[i].style.display="block"}else{ds[i].style.display="none"}}}')
html.push('</'+'script></head><body><script>try{document.write(opener.JsDebug.output())}catch(x){')
  //html.push('alert(opener);alert(opener.JsDebug);')
html.push('alert("程序窗口已经关闭,无法获取调试信息");window.close()}</'+'script></body></html>') var s=html.join("")
var w=window.open("about:blank","_debugWin")
w.document.open()
w.document.write(s)
w.document.close()
}/*
按一下F12就呼出调试窗口 (注意:如果已经呼出过F12,就不会再弹出新窗口,而是更新原窗口内容) 
Bug:按多几下F12有时候会出错,不知道为什么,
其实我想可以用window.open("debug.html","_debugWin")的方式来修复这个Bug,不过这样又新
增加了一个debug.html文件,先这样吧,看看还有什么好的解决方法

*/
attachDebugEvent(document,"keyup",function(){if (getEvent().keyCode==123) openDebugWin()})/********************debug.js***************************************/
使用方法举例:  <script src="debug.js"></script>
<script>
var url=location.href
$debug(url)
</script>
<body onload="$msg('window onload产生的信息')">程序中按下面的方式加入代码,然后按F12键就可以看调试窗口的输出信息javascript调试
    在程序中需要输出调试信息的地方,加入代码  
$debug("一些调试信息")
$error("一些错误信息")    //我最喜欢这样用 try(){...}catch(x){$error(x.message)}
$msg("信息")     //$info和$msg其实是同一个函数
$warn("一些警告信息")javascript性能查看$t1("func1")  //开始统计
  func1() 
$t2("func1")  //结束统计$t1("my func") //开始统计
  .......   //这里是一些比较耗时间的代码
$t2("my func")  //结束统计

解决方案 »

  1.   

    对于  ajax 调试方法.因为我们用的是 prototype.js方法如下: 不用prototype.js 的同学也可以参照参照我的代码修改  prototype.js  700行左右为了方便大家找到位置./********* 这里是prototype.js本身的代码********/
    try {
    (this.options['on' + this.transport.status]
     || this.options['on' + (this.responseIsSuccess() ? 'Success' : 'Failure')]
     || Prototype.emptyFunction)(transport, json);
    } catch (e) {
    this.dispatchException(e);
    }
    /********* 这里是prototype.js本身的代码********/
    //下面是我的调试代码try{
     var formatUrl=function(url){return url.replace(/&/g,"<font color=red>&</font>")}
     var xml=this.transport.responseXML
     var ajaxInfo=[]
     ajaxInfo.push("<span class=url>AJAX请求:<a target=_blank class=url href="+this.url+">")
     ajaxInfo.push(formatUrl(this.url)+"</a></span>")
     ajaxInfo.push("<span class=xml><p onclick=t(this)><br>PHP返回:</p><xmp>"+xml.xml.replace(/></g,">\n<")+"</xmp></span>")
     ajaxInfo=ajaxInfo.join("<br/>\n")
     if (xml && xml.childNodes[1] && !/xsl\:/.test(xml.childNodes[1].tagName) ) $ajax(ajaxInfo)
    }catch(x){
     var s="<span class=url>AJAX请求:"+formatUrl(this.url)
     s+="<span class=xml><p onclick=t()><br>服务器返回:</p><xmp>服务器数据出错</xmp></span>"
     $ajax(s)
    }
    还要修改一个地方  608行左右Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
      initialize: function(url, options) {
        this.transport = Ajax.getTransport();
        this.setOptions(options);
        this.request(url);
        this.url=url;           //这句是我添加的       
      },
      

  2.   

    相信一定可以学到很多关于ajax的知识,
        好机会啊,可惜不在广州........
                    up 一下........
      

  3.   

    我常常想不明白,为什么一个ajax被炒成了这样。
    ajax就像是一把苹果刀,很不错的苹果刀,
    削苹果削得很过瘾,但现在都争相用它来劈柴,用它来划玻璃,
    是不是用得太过火了。有时候想:
    如果“用ajax来更新页面局部”先出来,
    而后才出现“request后页面可以整个刷新”,
    那么,不知大家又是一种怎样的疯狂,把大部分的页面改成“request后整个更新”。
      

  4.   

    1.因为全部采用ajax技术
    -----感觉这真是个馊主意,大约出主意的人一时头脑发热,做了一段时间自己顶不住就会开遛,公司以后就找很多人来擦PP。
      2.来自浏览器的骚扰,“它当做广告kill”
    -----“内容多的层就不会”只是现在的情况吧,谁知明天他会不会把内容多的也当广告呢。
      3.随着项目越大,代码中间的冲突越来越明显,隐蔽的错误更难找到,更隐蔽,更难调试.“主要体现在html元素的id命名”
    -----看到谁把全局变量或id取得很短很简洁,就不顺眼
      4.  在长达几千行的代码中找个错误,那感觉谁能体会呢?
    -----很多人的假设,是控件是理想的控件。公司可能会认你只是在开头的一段时间,需要管这几千行代码,以后就不会。
    -----对这种理想性的假设,不以为然。另外,还很担心如果你们这一批人走了,后来的人要面对的又是一种怎样的困局。
      5.ajax网站对javascript技术的要求是非常高的.  幸好我们这个项目对 javascript层的估计没出什么问题.
    -----高倒不觉得有多高,如果用户挑剔,很容易被一两个小问题给卡死。
      

  5.   

    JK兄,我和你一样的感觉。
    我也觉得AJAX现在有些过了,以前感觉好象就有这个,聊天室的无刷新技术和这个差不多,改了名字就变成这样了。
      

  6.   

    Lz说的这种技术(Ajax+xml+xsl)还挺流行..写的是够累的..
      

  7.   

    仅仅为了一个免刷新的功能就要冒这么大的风险?
    到头来很有可能用户嫌你们的网页打开太慢而放弃使用---html文件过大,而且如果网络不通畅,页面很有可能会变成假死状态,微软的msn/live space我就碰上了好几次....
      

  8.   

    我相信ajax是一门被高估的技术。
      

  9.   

    顶你N个肺........
    学习.........//________________________送个笑话____________________
    class www.xiaohua007.com{public static void main(String [] args){
     System.out.println("
         C君去医院割包皮,剃毛的时候(割包皮要先把毛剃光)是一个漂亮护士,成年男士嘛,  血  气方刚,看到漂亮MM拎着他那东西,心术当然就不正了,脑子歪几歪,那话儿“蹭”就竖起来,本来做这种术前准备时那话儿竖起来也算是正常的生理反应,只不过C君最后竟然射了,搞得护士手上衣服上都是,气得那护士直发抖,心里说“看我 怎么收拾你”。
      手术过后C君住院,第二天那护士MM走到C君床前,拉高护士裙露出大腿、底裤,嗲嗲的说:你觉得这内裤好看吗?C君一看,热血沸腾,只听下面“啪啪”几声,惨了,爆线了。
      只好推进手术室再缝一次,痛苦第二天,护士MM又过来了,站在C君床前,解开二个扣子,波涛汹涌跃然而出,嗲嗲的对着C君说:“你看看人家的身材如何呀?”,“ 啪啪”C君下身一串声响,又爆线了。
      做完第三次缝线的那天晚上,护士MM带着二个漂亮女同事来到C君床前,至于发生了什么事就不得而知了,总之最后C君足足住了一个多月的医院,据说那话儿都已经缝得无落针之处了。
     ");
      //www.xiaohua007.com
    }}
      

  10.   

    兼容浏览器的事件处理模式,当onunload时delete掉注册事件if (typeof addEvent != 'function')
    {
     var addEvent = function(o, t, f, l)
     {
      var d = 'addEventListener', n = 'on' + t, rO = o, rT = t, rF = f, rL = l;
      if (o[d] && !l) return o[d](t, f, false);
      if (!o._evts) o._evts = {};
      if (!o._evts[t])
      {
       o._evts[t] = o[n] ? { b: o[n] } : {};
       o[n] = new Function('e',
        'var r = true, o = this, a = o._evts["' + t + '"], i; for (i in a) {' +
         'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' +
         '} return r');
       if (t != 'unload') addEvent(window, 'unload', function() {
        removeEvent(rO, rT, rF, rL);
       });
      }
      if (!f._i) f._i = addEvent._i++;
      o._evts[t][f._i] = f;
     };
     addEvent._i = 1;
     var removeEvent = function(o, t, f, l)
     {
      var d = 'removeEventListener';
      if (o[d] && !l) return o[d](t, f, false);
      if (o._evts && o._evts[t] && f._i) delete o._evts[t][f._i];
     };
    }
      

  11.   

    LZ能提供给我个用户注册的AJAX源码吗?不胜感激
      

  12.   

    感觉AJAX现在吹得太过了,搞得有部份人开始盲目去追求。
      

  13.   

    友情提醒:windows的脚本调试器还是很好用的
      

  14.   

    因为软件涉及到很多web交互操作,以前曾大量使用js,最近刚使用AJAX,感觉AJAX非常有用。
    普通公司如果采用AJAX编写web程序,使用AJAX中间件应该是最好的选择。
      

  15.   

    1、能在后台替代的javascript尽量在后台做
    2、能用单纯的javascript而不用ajax的尽量用单纯的javascript
    3、在某些局部刷新或者固有代码修改的时候,ajax是不可替代的
    4、当单页javascript到1、2k的时候,后台用php又很麻烦的时候,应该考虑换个语言了
      

  16.   

    JF,学习!
    刚才还在找javascript的资料呢!
      

  17.   

    我们不用XML,那个不好用,特别是表现客户端界面的时候,不够直接,脱裤子放屁的感觉。我们通常直接获取HTML然后显示出来,这样做方便多了。我们还自定义一些类似于API的东西,让客户端的javascript通过HTTP调用服务器,有点webService味道,但是我们不用XML,啰嗦的说你们的复杂性和调试困挠,应该来自于操纵XML,因为操纵XML很多成熟的客户端脚本就不能使用了。比如,我们根据用户的选择选择一个日历的时候,我们就是直接把获取的日历HTML嵌入的,不用重新开发,而且那些代码在很多浏览器都充分的测试了,是很成熟的。比如我们获取目录树的子树,也是直接获取HTML。方便的不得了
      

  18.   

    ajax只是过渡的技术,期待WPF,WPF/E,Flex的普及..它们真的很好用..
      

  19.   

    半年前我来这里的时候,大家就都在谈ajax是否过热,半年后再来,发现大家还在说,但ajax好像更热了,冷水没加冰??还是??……继续关注中……
      

  20.   

    楼主精神可嘉,不过也体现了你是真正的开始编程了,呵呵,君不见那么多ajax框架代码都那么多吗,人家不也是写出来的?有个IEDOMInspector的程序对调试ajax应该还是有帮助的
    另外你不能太多的依赖js
      

  21.   

    同感啊...tmd调JS代码简直不是人干的活..想吐的感觉...
      

  22.   

    恕我直言,我感觉这种开发方式纯属有自找苦吃,还停留在原始人时代。不是 Ajax 不好,而是到处都用原始的 js 写所谓 Ajax 很划不来。无论是项目进度,人力成本,可维护性都可想而知。前一阵我用 .net 下一个不错的 ajax 框架开发了一个项目,进度,界面操作感觉等方面都得到很好的控制。这个项目中,我并非全盘用 ajax,一般的页面,或者后台管理功能的页面(使用频率低的),用 postback 的方式完成,充分利用 asp.net 面向对象开发模型的简单和快捷。对于复杂的,比如动态生成的一些表单,也几乎不需要自己写 js 来做 ajax. 我使用的是这个 ajax 框架中提供的功能强大的控件。几乎没有什么功能做不到的。
    当然,如果你需要在 js 上加一些挂钩,比如异步调用前后的 pre 和 post 自定义处理,这个框架都能轻易做到。只需要简单的写你的 pre 和 post 函数就可以了。在 js 调试方面,我用的是 VisualStudio 2005 的 debug 功能,非常的简单和便捷。可以下断点,添加任意的监视,几乎所有调试手段都支持。调试的情况跟服务器端的强类型语言没多大分别。在浏览器兼容方面,选对一个框架,可以避免你自己写很多代码,并且兼容性一般肯定要比你自己的高。听楼主所说,应该是在做复杂的业务系统(有很多层模拟窗口互相交互)。这种情况下,首先需要考虑的是将一些常用元素做成稳定的控件。比如窗口对象。而不是手工去创建很多的层,这样页面复杂后自然逻辑很难管理,命名会发生冲突。再从服务器语言的选择方面谈谈。PHP 我应用的时间也算有有一些,基本的框架也用过。包括 O/R mapping 的框架。总体感觉,因为 PHP 缺乏强大的开发工具,很多低级错误(比如打错字之类)在开发中难以调试,基本上我觉得不适合用来开发复杂的业务系统。(当然,你也许也可以说 Zend 之类的 IDE,不过我觉得那些的功能相比微软开发工具还是很弱的)
    ASP.NET 是一个比 PHP 更适合的选择。因为它建立在纯粹的 OO 语言以及良好的页面模型基础之上,最要紧的是,IDE 非常强大,可以节省大量开发时间。
    总之,如果我开发一个小网站,我会选择 php,如果做一个业务系统如 OA 等,肯定选择 asp.net. 而我现在工作中也正是这么做的。在服务端技术方面,我试验过不少流行的框架,语言。比如 python 的 django, ruby on rails 等。总体的感觉,从开发公司项目的角度讲,选择具有更多支持,更方便的IDE 的语言和框架是正确的。(asp.net)这里我并不是想为微软或者 asp.net 做吹鼓手。其实曾经有一段时间我想当回原始人,心想天那,asp.net 2.0 又出来了,那么多东西要学啊,等会 .net 3.0 又出来了,怎么学的过来啊。。 这些东西我还不如用 asp, php 来做呢,技术好几年不用变,做起来也方便~
    可是到了最后,比较的结果让我觉得,拥抱变化,使用最新的东西才是比较好的。另外关于调试工具,看到楼主自己写一个 debug.js 实在是累,虽然有其技术上可取的地方。
    但是如果用调试工具岂不更好呢,有很多 IDE 可以干这个事。不谈 vs 2005, 只要安装过 Office 2000,本机好像就能搜到一个叫 MSE.exe 的程序,可以调试 js. 我用过多次,在没有 vs 的环境下作为替代很不错。上面的话纯属胡言乱语,仅供参考,冲撞之处请不要见怪。
      

  23.   

    BlueTrees(蜗牛) :直接传会 HTML 在某些简单情况下是便捷的办法,不过从严肃应用的角度来讲我觉得是比较短视的行为。因为这样混淆了 UI 和逻辑层,代码会变得难以维护。就好像以前咱们写 asp 的 rs 循环直接输出各种表格一样的道理。UI 不分离始终不好。
      

  24.   

    另外在 UI 方面过于复杂的话,我觉得使用基于 Flash 的 RIA 技术要比自己写一堆复杂的 js 要好得多。并且不存在浏览器兼容性问题,开发难度会大大降低。