使用Ajax动态的显示时间

         在最初学习Ajax的时候视频中有一个例子是动态的加载服务器端的时间显示在前台页面，当时不懂原理，看着视频敲了一样的代码，就是运行不出结果，现在在项目中遇到了客户的需求就是需要在前台页面动态的显示时间，刚开始被分配到这个任务的时候有点不知道从哪里下手，心里就感觉自己不会上网查资料做出来发现So Easy!而且还不是一种方法。下面来看以下的两种方法。

第一种：中规中矩的原始Ajax方法。

         首先在要显示时间的地方使用任何可以显示文本的标签，本例中使用label

                 

         <label id=lbl></label>

         然后开始使用我们在学习Ajax时非常熟悉的XMLHttpRequest对象开始实现。              

        <script>
            function GetXmlHttp()   //判断是否已经存在了XMLHttpRequest对象
            {
               return window.XMLHttpRequest ? newXMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            }
    
            function GetRequest()
            {
               var url ="FHome/GetTime";//URL格式：Controller/方法
               xmlHttp = GetXmlHttp();          //调用GetXMLHTTP方法,以获得XMLHttpRequest对象
               xmlHttp.onreadystatechange =OnReadyStateChange;//调用回调方法
               xmlHttp.open("GET",url, true);
               xmlHttp.send("");
            }
    
            function OnReadyStateChange()
            {
               if(xmlHttp.readyState == 4)
               {
                  document.getElementById("lbl").innerHTML =xmlHttp.responseText + "<br />更新间隔: " +interval + "ms";
               }
            }
    
           var xmlHttp;
           varinterval = 1000; //重要的需要设计一个时间间隔
           vartimer = window.setInterval(GetRequest, interval);//每1000ms调用一次显示时间的方法
       </script>

         最后看一下Controller中的方法     

      public ActionResult  GetTime()
      {         
         Response.Write(DateTime.Now); //获取现在的时间
         Response.End();
         return null;
      }

第二种：使用JQuery封装好的Ajax

         首先前台的要求不变，相应的位置上，任何可以显示文本的标签，这里使用span                  

       <spanid=time></span>

         然后在页面中引入JQuery，版本不限，只有封装了ajax，本例中的版本为1.8.0的              

       <scriptsrc="../../Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>

         开始调用

                   

       <scripttype="text/javascript">
             setInterval(GetTime, 1000); //每一秒钟调用一次
             function GetTime() {
                $.ajax({
                     type:"post",
                     contentType:"application/json",  //接收到的数据要求格式
                     url:"FHome/GetTime1",        //调用Controller中的方法返回时间
                     success:function (result) {      //如果成功就显示时间       
                         $('#time').text(result);
                      },
                      error: function() {
                         alert(“时间加载失败”);           //失败给出提示
                       }
                       })
                }
         </script>

         Controller中的方法如下                 

       publicstring GetTime1()
       {
           return DateTime.Now.ToString();
       }

小结

         两种方法一个是原生态的，一个是JQuery-Ajax，相比后者的使用更加的简单，这也是JQuery作用的体现吧，但是本质上是没有区别的，重点都是要设置每1秒调用一次显示时间的方法。两种方法根据自己的实际情况进行选择。