AJAX愉快之旅——prototype.js篇

AJAX 愉快之旅—— prototype.js 篇 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /?>

 

对于什么是 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 <?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /?><city w:st="on"><place w:st="on"><span style="COLOR: black">ajax</span> </place></city>  =   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/ 【下载一本手册吧，呵呵】

 

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