[跪求]jsp真正加载页面效果实现 分不够还可以加

各位前辈 谢谢咯```万分感谢```要真正的 就是从第一个页面按钮点击之后出现提示一直到第2个页面显示完毕提示效果消失```小弟不才 写不出来 只能求靠各位大哥了 

解决方案 »

  1.   

    使用Ajax的回调函数，判断请求的状态。就可以实现了。var xmlHttp;
      function createXMLHttpRequest()
      {
       if(window.ActiveXObject)
       {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       else
       {
        if(window.XMLHttpRequest)
        {
         xmlHttp = new XMLHttpRequest();
        }
       }
      }  function LoadPageWait()
      {
       createXMLHttpRequest();
       var url = "http://extjs.com/deploy/ext-1.1/docs/";
      // var url = "1.html";
       xmlHttp.open("GET", url, true);
       xmlHttp.onreadystatechange = goCallback;
       xmlHttp.send(null);
      }  function goCallback()
      {  
      
       if(xmlHttp.readyState == 1)
       {
    document.getElementById("Label1").innerHTML = "数据读取中.";
       }
       if(xmlHttp.readyState == 2)
       {
       document.getElementById("Label1").innerHTML = "数据初始化.";
       }
       if(xmlHttp.readyState == 3)
       {
        document.getElementById("Label1").innerHTML = "数据载入中.";
       }
       if(xmlHttp.readyState == 4)
       {
        document.getElementById("Label1").innerHTML = "页面加载中.";
        setTimeout("WriteData()", 100);
       }
      
      }
      function WriteData()
      {
       window.location.replace("http://www.163.com/");
       //window.location.replace("1.html");
       return false;
      }
      

  2.   


    使用全面本地动态很容易控制和得到这些状态<a href="#" onclick="to('abc.jsp')">Click Me</a>function to(page){
       showHintMessage();
       //show a hint message
      new Ajax.Request(page,{
    method: "get",
    onSuccess: function(transport){
                            var cont = transport.responseText;
                            document.clear();
                            document.write(cnt);
                    },
      });    
    }
    以后代码是不可以直接运行的 
    需要javascript 库 Prototype 的支持
    www.prototypejs.org可以下载
      

  3.   

    不用使用Prototype 的支持的。我贴出来的代码你改改就可以可。你可使用DIV作美化就可以了。我做美工不怎样，所以你在我的代码上改就可以了。
      

  4.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    a{ color:#000; font-size:12px;text-decoration:none}
    a:hover{ color:#900; text-decoration:underline}#massage_box{ position:absolute; left:expression((body.clientWidth-40)/2); top:expression((body.clientHeight-40)/2); width:40px; height:40px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
    #mask{ position:absolute; top:0; left:0; bottom:0;width:expression(body.scrollWidth); height:100%; background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
    .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
    .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
    </style>
    <script>
     function createXMLHttpRequest() 
      { 
       if(window.ActiveXObject) 
       { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       else 
       { 
        if(window.XMLHttpRequest) 
        { 
         xmlHttp = new XMLHttpRequest(); 
        } 
       } 
      }   function LoadPageWait() 
      { 
       createXMLHttpRequest(); 
      //  var url = "http://extjs.com/deploy/ext-1.1/docs/";
       var url = "http://www.163.com/"; 
      //  var url = "test.html"; 
       xmlHttp.open("GET", url, true); 
       xmlHttp.onreadystatechange = goCallback; 
       xmlHttp.send(null); 
      }   function goCallback() 
      {   
       
       if(xmlHttp.readyState == 1) 
       { 
       // document.getElementById("Label1").innerHTML = "数据读取中."; 
       mask.style.visibility='visible';
       massage_box.style.visibility='visible';
       } 
       if(xmlHttp.readyState == 2) 
       { 
       // document.getElementById("Label1").innerHTML = "数据初始化."; 
       mask.style.visibility='visible';
       massage_box.style.visibility='visible';
       } 
       if(xmlHttp.readyState == 3) 
       { 
       //  document.getElementById("Label1").innerHTML = "数据载入中."; 
        mask.style.visibility='visible';
        massage_box.style.visibility='visible';
       } 
       if(xmlHttp.readyState == 4) 
       { 
        // document.getElementById("Label1").innerHTML = "页面加载中."; 
        mask.style.visibility='visible';
        massage_box.style.visibility='visible';
        setTimeout("WriteData()", 1); 
       } 
       
      } 
      function WriteData() 
      { 
       window.location.replace("http://www.163.com/"); 
       //window.location.replace("1.html"); 
       return false; 
      }
    </script>
    </head><body>  <label>
      <input type="submit" name="test" id="test" value="提交"  onclick="LoadPageWait()"/>
      </label>  
    <p>
    <div id="massage_box"><div class="massage"><img src="loading.gif" width="32" height="32" />
    </div></div>
    <div id="mask"></div></body>
    </html>
    搞定了 效果蛮不错的 loading 动画到处都有 自己去下
      

  5.   

    其实这些功能已经封装好了，你有兴趣可以看看ext，功能还是很强大的。我们公司现在用的就是这个javascript库。
      

  6.   

    免费的吗??? ext 我关心的是