AJAX 愉快之旅—— prototype.js

 

对于什么是 ajax 等初级问题,不在本文讨论范围,本文主要围绕一个框架,以程序实例进行了详细总结。由于本人水平所限,所以不完善的地方很多。大家可以跟帖提醒。

 

以前用 jsp ,我用过 prototype.js ajax 框架,也用过 dwr 框架,还用过 buffalo 框架。但是现在项目使用 php 开发,我才再一次重新认识这位老朋友—— prototype.js 。我想说这个开源框架真是太棒了!

 

(1)       取数据的时候显示一个进度 loading

Ajax . Responders . register 注册后,在 ajax 发送 xmlhttp 时候,响应两事件。 onCreate

onComplete 非常棒。可以先写好一个小小的 div 隐藏在那里,伺机而动, J

 

var AjaxLog = {

       onCreate : function ()

           {

              Ajax . activeRequestCount ++;

              $ ( "Div_Ajax_Log" ). style . top = document . body . scrollTop + 230 ;

              $ ( "Div_Ajax_Log" ). style . left = document . body . scrollLeft + document . body . clientWidth / 3 ;

              $ ( "Div_Ajax_Log" ). style . display = "" ;

           },

       onComplete : function ()

           {

                Ajax . activeRequestCount --;

              $ ( "Div_Ajax_Log" ). style . display = "none" ;

           }

};

Ajax . Responders . register ( AjaxLog );

 

Div_Ajax_Log DIV id . 其代码:(当然还有一些 CSS 什么的就没有帖出来了。)

 

 

(2)       json 支持非常好

 

function setLogDate ()

{

    var count   =   getPram ();

    var url   =   "ajax.php" ;

    var kptl=

       {

           get_log_cmd:

           {

              log_type:"file",

              log_time_start:"1122",

              log_time_end:"1122",

              log_count_page:"30",

              log_request_page:"1",

              userSession :"hhh",

              mode_id:"1001"

           }

       }

// json 参数 转化为字符串

    var parm  =  Object.toJSON(kptl);

//  parm  =  "kptl = " + parm;

    try

    {

       var ajax   =   new Ajax . Request (

                                url ,

                                {

                                   method : "post" ,

                                   parameters : parm ,  

                                   encodeURI : 'UTF-8' ,

                                   encodeURIComponent : "UTF-8" ,

                                   onComplete : showReturn

                                });

    }

    catch ( e )

    {

       alert ( " 创建 ajax 对象失败 " );

    }

}

/*

  * @brief: 回调函数

  * @param: xmlhttp 对象

  */

function showReturn ( obj )

{

    try

    {

       var json   =   obj . responseText ;

       var mydata  =  json.evalJSON();

       createLogTab ( mydata );

    }

    catch ( e )

    {

       alert ( "Error:" + e . message );

    }

}

红色字体将返回字符串转换为 JSON

这里返回的数据作为参数,调用 createLogTab ( mydata ); 由于我这里是返回一个数组。 web 页面写成一个 tablie 。所以有 createLogTab 函数。

function createLogTab ( json )

{

    var len = json . length ;

    var tbody = document . getElementById ( 'TBODY_log' );

    // 删除原有数据

    var _tr = tbody . getElementsByTagName ( "tr" );

    while ( _tr . length != 0 )

    {

       // _tr [ 0 ]. parentNode 才能保证每次取到正确的子节点

       _tr [ 0 ]. parentNode . removeChild ( _tr [ 0 ]);

    }

    for ( i = 0 ; i < len ; i ++)

    {

       var td_0 = document . createElement ( 'td' );  

       var td_1 = document . createElement ( 'td' );

       var td_2 = document . createElement ( 'td' );

       var td_3 = document . createElement ( 'td' );

       var td_4 = document . createElement ( 'td' );

       var td_5 = document . createElement ( 'td' );

       td_0 . innerHTML = json [ i ][ "client_name" ];

       td_1 . innerHTML = json [ i ][ "client_ip" ];

       td_2 . innerHTML = json [ i ][ "file_name" ];

       td_3 . innerHTML = json [ i ][ "viruses_name" ];

       td_4 . innerHTML = json [ i ][ "infection_time" ];

       td_5 . innerHTML = json [ i ][ "clear_result" ];

      

       var tr = document . createElement ( 'tr' );

       tr . appendChild ( td_0 );

       tr . appendChild ( td_1 );

       tr . appendChild ( td_2 );

       tr . appendChild ( td_3 );

       tr . appendChild ( td_4 );

       tr . appendChild ( td_5 );

       tbody . appendChild ( tr );

       }

}

题外话,这个 DOM 编程部分曾犯了个经典错误。主要是 while 删除子节点部分,当时用了 for 语句:

for(k=0; k<_tr.length;k++)

{

    alert("k:"+k);

    _tr[k].parentNode.removeChild(_tr[k]);

}

知道是什么错误吗?呵呵,因为 _tr.length 在不停的变。每次删一个就长度就少了(而 K 很快到达停止循环的条件)。所以最终都是删不干净的。

 

(3) 替换整个节点控件

<script>

    function getHTML()

    {

        var url = 'http://yourserver/app/getSomeHTML';

        var pars = 'someParameter=ABC';

        var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});

 

    }

</script>

<input type=button value=GetHtml onclick="getHTML()">

<div id="placeholder"></div>

这个非常好玩,眨眼间整体 DIV 都变了。我记得曾经犯了个错,就是参数。这里参数别写多了。

有问题可以访问官方网站:

http://www.prototypejs.org/ 【下载一本手册吧,呵呵】

 

当然对本有新的想法或者疑问,欢迎留言交流。

 

posted on 2007-08-24 09:53 -274°C 阅读(730) 评论(2)  编辑  收藏 所属分类: web前端


FeedBack:
# re: AJAX愉快之旅——prototype.js篇
2007-08-26 17:27 | kafei
不错  回复  更多评论
  
# re: AJAX愉快之旅——prototype.js篇[未登录]
2007-08-26 17:48 | -274°C
@kafei

:-) 谢谢夸奖。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 870473
  • 排名 - 37

最新评论