不用AJAX架構實現AJAX效果

AJAX( Asynchronous JavaScript and XML),即：javascript和XML;

　　是一種進行頁面局部非同步處理資料的技術，用AJAX向伺服器發送請求和擷取伺服器返回的資料並且更新到介面中，不是整個頁面的重新整理，而是HTML頁面中使用JAVASCRIPT建立XMLHTTPRequest對象來向伺服器發出請求以及獲得返回的資料，就像WebClient一樣（向伺服器發出請求，WebClient wc=new Webclient();    string str=wc.DownLoadString("GetServerTime.ashx");      $("#textbox1").val(s);   ），在頁面中由XMLHTTPRequest來發布Http請求和獲得伺服器的返回資料；XMLHTTPRequest是AJAX的核心；

Example 1:

 

　　1、首先建立一個ashx頁面（一般處理常式），在該頁面中把當前最新的時間用字串的形式直接列印到頁面上；

 　　　　

   　　　　 

View Code

 1     public void ProcessRequest(HttpContext context)
 2   　　　　      {
 3     　　　　        context.Response.ContentType = "text/plain";
 4     　　　　        //context.Response.Write("Hello World");
 5      　　　　       context.Response.Write(DateTime.Now);
 6     　　　　    }
 7 
 8     　　         public bool IsReusable
 9      　　       {
10       　　          get
11       　　         {
12       　　              return false;
13        　   　     }
14 
15 　　      　　}

 

　　　　2、在建立一個html頁面進行測試

　　　　　　　a、添加一個文字框

　　　　　　　　

 <input id="txtId" type="text" />

 

　　　　　　　b、添加一個按鈕，當按鈕按下的時候向伺服器發出請求，將伺服器返回的資料添加到上面的文字框中；

　　　　　　　 

   <input id="btnId" type="button" value="確定" onclick="btnclick();" />

 

　　　　　　　c、不用任何的AJAX的架構完成ajax的請求；添加如下代碼：

　　　　　　　　    

View Code

 1 <script type="text/javascript">
 2 
 3      　　　　　　　　   function btnclick() {
 4           
 5      　　　　　　　　　　     //建立一個xmlhttp對象，相當於WebClient
 6         　　　　　　　　　　    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 7             
 8           　　　　　　　　　　  if (!xmlHttp) {
 9            　　　　　　　　　　　　     alert("初始化XMLHTTP時異常！");
10          　　　　　　　　　　　　       return false;
11       　　　　　　　　　　　      }
12 
13           　　　　　　　　　　  //準備向伺服器頁面  Handler1.ashx 發出  post  請求
14           　　　　　　　　　　  xmlHttp.open("post", "Handler1.ashx?f=" + new Date, false); //為了避免緩衝後面以目前時間做變化實現資料的緩衝現象
15           　　　　　　　　　　　  //註冊事件，用一個匿名的函數來響應
16           　　　　　　　　　　  xmlHttp.onreadystatechange = function() {
17             
18         　　　　　　　　　　    //readyState表示XMLHttpRequest對象的處理狀態：
19 　　　　　　　　　　　　　　//0:XMLHttpRequest對象還沒有完成初始化。
20 　　　　　　　　　　　　　　//1:XMLHttpRequest對象開始發送請求。
21 　　　　　　　　　　　　　　//2:XMLHttpRequest對象的請求發送完成。
22 　　　　　　　　　　　　　　//3:XMLHttpRequest對象開始讀取伺服器的響應。
23 　　　　　　　　　　　　　　//4:XMLHttpRequest對象讀取伺服器響應結束
24           　　　　　　　　　　  if (xmlHttp.readyState == 4) {
25              　　　　　　　　　  //如果狀態代碼為200，表示成功；300表示重新導向，400表示許可權問題， 500表示錯誤；
26             　　　　　　　　　　　　  if (xmlHttp.status == 200) {
27                       　　　　　　　　  //responseText屬性為伺服器返回的文本
28                       　　　　　　　　　　　　  document.getElementById("txtId").value = xmlHttp.responseText;
29                  　　　　　　　　　　　   }
30                　　　　　　　　　　     else {
31                   　　　　　　　　　　　　     alert("AJAX伺服器返回錯誤");
32                　　　　　　　　　　　　     }
33               　　　　　　　　　　  }
34          　　　　　　　　　　   }
35            　　　　　　　　　　 //向伺服器發送請求
36      　　　　　　     　　　　  xmlHttp.send();
37      　　　　　　　  　　 }
38    　　　　　　　　 </script>