zoukankan      html  css  js  c++  java
  • prototype 学习

    介绍用Ajax.Request 实现点查询按钮的时候 弹出来一个div 层 ,下面的那层变灰,当数据树立完成以后就消失,其中用到了div  z-index 和 opacit 属性,相信Ajax.Request大家已经用的很熟悉了,Ajax.Responders对象维护了一个正在运行的Ajax对象列表,在需要实现一些全局的功能时就可以使用它 ,这里用他来显示或隐藏进度条的那层div ,当然可以做的更漂亮
    <div id='systemWorking'  style="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>

  • 相关阅读:
    想做的事情
    js学习笔记2(5章操作方法)
    js学习笔记1(变量、作用域、内存)
    输入框去除默认的文字,jquery方法
    同类型元素,只有一个被选中js
    淘宝分类常见---部分显示和全部显示的js效果
    关于游戏提名信息项目的总结
    20174310隋润起网络对抗免考报告
    2019-2020-2 20174310 隋润起《网络对抗技术》Exp9 Web安全基础
    2019-2020-2 20174310隋润起《网络对抗技术》Exp8 Web基础
  • 原文地址:https://www.cnblogs.com/jfliuyun/p/754442.html
Copyright © 2011-2022 走看看