【Asp.Net】教你一步一步學習Ajax（一）使用GET方法

關於Ajax概念方面的敘述就不寫了，不清楚的園友可以去百度搜尋下。（點此進入）

注意：Ajax不是一門程式設計語言，它是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。

Ajxa可以為我們做什麼呢？我們為什麼需要用到Ajax呢？

如今技術的飛躍發展，使用者體驗的越來越重要。面對乾巴巴的一個、沒有任何效果的頁面，使用者是不會過多的停留。只有那些很炫，使用者體驗好的頁面，使用者才會花些時間去瀏覽。

然後如今瀏覽量就是一個網站的成功的標誌。要想擷取更多的使用者，你就必須讓頁面符合使用者的習慣和使用者的需求。

通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與伺服器進行通訊。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換資料。AJAX 在瀏覽器與 Web 服務器之間使用非同步資料轉送（HTTP 要求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。 這樣在使用者的網路不穩定的情況下，只是部分重新整理而不影響使用者在該頁面進行瀏覽或其他動作。

關於XMLHttpRequest 的幾個重要屬性和方法：

屬性：

readyState：0 － （未初始化）還沒有調用send()方法； 1 － （載入）已調用send()方法，正在發送請求；2 － （載入完成）send()方法執行完成，已經接收到全部響應內容； 3 － （互動）正在解析響應內容； 4 － （完成）響應內容解析完成，可以在用戶端調用了。

onreadystatechange：儲存函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

status：（1）200: "OK"；（2）404: 未找到頁面。

方法：void open(string,string,boolean)、void send(string)、void setHeader(string,string)、string getResponseHeader(string)、

string getAllResponseHeaders()、void abort()。

　　使用Ajax有幾個流程必須是要熟悉的：

1.建立一個XMLHttpRequest對象來進行非同步與伺服器進行通訊。在建立該對象時要注意根據瀏覽器的不同而建立不同的對象。基於IE瀏覽器核心的是：

var  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");或var  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP")，此種方法有很多種版本。

基於其他則有：var xmlHttpRequest = new XMLHttpRequest()。

2.建立好對象後就需要使用open方法來進行互動的設定了， xmlHttpRequest.open("GET", url, true);其中“get”表示使用的是GET方法，傳入的url為擷取資料或者互動的地址；第三個參數，當該boolean值為true時，伺服器請求是非同步進行的，也就是指令碼執行send（）方法後不等待 伺服器的執行結果，而是繼續執行指令碼代碼； 當該boolean值為false時，伺服器請求是同步進行的，也就是指令碼執行send（）方法後等待 伺服器的執行結果的返回，若在等待過程中逾時，則不再等待，繼續執行後面的指令碼代碼！

3.給onreadystatechange 指定一個調用的函數，賦值為函數名，如：xmlHttpRequest.onreadystatechange = getfromHandler;

4.啟用send方法進行互動。xmlHttpRequest.send(null);因為使用的是get方法，在此不需要利用send來傳遞參數值。

5.實現在第三步中的getfromHandler（）函數。因為是在通訊結束後才進行的操作，所以先判斷readyState值是否為4，Status是否為200，然後再進行需要對頁面的操作。

 

 function getfromHandler() {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.Status == 200) {
                    document.getElementById("Result").value = xmlHttpRequest.responseText;
                                  }
            }
        }

上面是頁面擷取到後台傳來的資料（xmlHttpRequest.responseText），下面介紹後台是如何發送資料的。

使用一般處理常式來與進行資料的操作，在此處可以根據需要的資料進行處理後發回到首頁面，簡單的就是“Hello World”了。

1  public void ProcessRequest(HttpContext context)
2         {
3             context.Response.ContentType = "text/plain";
4             context.Response.Write("Hello World");
5         }

在發送大資料量的時候，我們就不能簡單的發送一行字元了，我們需要使用構造XML格式來進行大資料量的傳遞，這樣首頁面使用起來也方便，在主介面擷取資訊的時候
可以像XML操作那樣直接擷取各個節點的值。

document.getElementById("text").value = xmlHttpRequest.responseXML.documentElement.firstChild.nodeValue;

這樣首頁面和背景互動就完成了，效果就是部分重新整理來與後台通訊，關鍵區段就是要熟悉使用XMLHttpRequest對象的流程：

AJAX 應用

　　　　　　　　　　   提交
1.　　 XMLHttpRequest————>請求

　　　　　　  返回          分析
            　2.伺服器————>資料<————3.JavaScript

令附帶上2個小樣本，一個普通的“Hello World”，還有一個是與資料的互動，當然讀者不能直接啟動並執行了，因為你們沒得我本地的資料庫，只需修改便能正常運行了，留點考驗給讀者了，應該都能完成吧！

本篇博文感覺寫得不好，希望大家能多多指點，在此表示歉意。

點此下載

喜歡我的文章的話就關注我吧！大家的支援就是我的動力！