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>

相关文章