prototype 学习

介绍用Ajax.Request 实现点查询按钮的时候 弹出来一个div 层 ,下面的那层变灰,当数据树立完成以后就消失,其中用到了div  z-index 和 opacit 属性,相信Ajax.Request大家已经用的很熟悉了,Ajax.Responders对象维护了一个正在运行的Ajax对象列表，在需要实现一些全局的功能时就可以使用它 ,这里用他来显示或隐藏进度条的那层div ,当然可以做的更漂亮
<div id='systemWorking'  style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:51;display:none; background-color:Gray;filter:alpha(opacity=70);" >
   
       <img src="themes/alert/progress.gif" />Loading...</div>
    <div id='backcontent' style="position:absolute;z-index:50">
        <input type="button" id="btn_serch" onclick=" serchtable();" value="test stream" />
        <table id="jftest" cellpadding="1" cellspacing="2" border="0" class="contentline"
            style="border-top-style: groove; border-right-style: groove; border-left-style: groove;
            list-style-type: none; border-bottom-style: groove">
            <tr>
                <td colspan="14">      
                    This is A Ajax Test Sample
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
   function serchtable()
    {
      var url = 'testHandler.ashx';
        var pars = '';
      var myAjax = new Ajax.Request(
   url,
   {
    method: 'get',
    onComplete: XmlFile
   });
    }
    function XmlFile(originalRequest)
    {

    var xmlDoc  = originalRequest.responseXML.documentElement;
     //$('result').value = originalRequest.responseText;
      var table = $('jftest');
       var tr,td;
      
     while(xmlDoc.hasChildNodes())
      {
          var node = xmlDoc.firstChild ;
               tr = table.insertRow(-1);
               tr.className = "contentline";
                 while(node.hasChildNodes())
                 {
                 var  child = node.firstChild ;
                      td = tr.insertCell(-1);
                      td.align = "center";
                      td.className =   "contentline";
                      td.innerHTML = '<span class="content">' +child.firstChild.nodeValue +"</span>";
                        node.removeChild(child);
                 } 
                
                 xmlDoc.removeChild(node);
         }
 
    }
     var myGlobalHandlers = {
    onCreate: function(){
            Element.show('systemWorking');
            //Element.hide('backcontent');
            },
    onComplete: function() {
        if(Ajax.activeRequestCount == 0){
            Element.hide('systemWorking');
           // Element.show('backcontent');
            }
        }
    };
    Ajax.Responders.register(myGlobalHandlers);
    </script>



<?xml version="1.0" encoding="utf-8" ?>
<DocumentElement>
  <Orders>
    <OrderID>10248</OrderID>
    <CustomerID>VINET</CustomerID>
    <EmployeeID>5</EmployeeID>
    <OrderDate>1996-07-04T00:00:00+08:00</OrderDate>
    <RequiredDate>1996-08-01T00:00:00+08:00</RequiredDate>
    <ShippedDate>1996-07-16T00:00:00+08:00</ShippedDate>
    <ShipVia>3</ShipVia>
    <Freight>32.3800</Freight>
    <ShipName>Vins et alcools Chevalier</ShipName>
    <ShipAddress>59 rue de l'Abbaye</ShipAddress>
    <ShipCity>Reims</ShipCity>
    <ShipPostalCode>51100</ShipPostalCode>
    <ShipCountry>France</ShipCountry>
  </Orders>
</DocumentElement>