在最初學習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秒呼叫一次顯示時間的方法。兩種方法根據自己的實際情況進行選擇。