AJAX基礎之JavaScript基礎與加強（二）

一，Ajax到底是個什麼東西

用來描述一組技術，它使瀏覽器能夠爲用戶提供更爲天然的瀏覽體驗。

簡單一句話 不刷新頁面與服務器通信的技術

在Ajax以前，Web站點強制用戶進入提交/等待/從新顯示範例，用戶的動做老是與服務器的「思考時間」同步。

Ajax提供與服務器異步通訊的能力，從而使用戶從請求/響應的循環中解脫出來。藉助於Ajax，能夠在用戶單擊按鈕時，使用JavaScript DHTML當即更新UI，並向服務器發出異步請求，以執行更新或查詢數據庫。當請求返回時，就可使用JavaScript和CSS來相應地更新UI，而不是刷新整個頁面。

最重要的是，用戶甚至不知道瀏覽器正在與服務器通訊：Web站點看起來是即時響應的。

AJAX目前最經典案例：谷歌地圖

 

二，Ajax的工做原理

Ajax的核心是JavaScript對象XmlHttpRequest。

   它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。

   AJAX採用異步交互過程。AJAX在用戶與服務器之間引入一箇中間媒介，從而消除了網絡交互過程當中的處理—等待—處理—等待缺點。用戶的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，一般藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。AJAX引擎容許用戶與應用軟件之間的交互過程異步進行，獨立於用戶與網絡服務器間的交流。如今，能夠用Javascript調用AJAX引擎來代替產生一個HTTP的用戶動做，內存中的數據編輯、頁面導航、數據校驗這些不須要從新載入整個頁面的需求能夠交給AJAX來執行。 

使用AJAX，能夠爲JSP、開發人員、終端用戶帶來可見的便捷： 

AJAX包含的技術 

AJAX：（Asynchronous JavaScript and XML）並非一項新技術,實際上是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

服務器端語言：服務器須要具有向瀏覽器發送特定信息的能力。Ajax與服務器端語言無關。

XML (eXtensible Markup Language，可擴展標記語言) 是一種描述數據的格式。AJAX 程序須要某種格式化的格式來在服務器和客戶端之間傳遞信息，XML 是其中的一種選擇

XHTML（eXtended Hypertext Markup Language,使用擴展超媒體標記語言）和 CSS（Cascading Style Sheet,級聯樣式單）標準化呈現；

DOM（Document Object Model,文檔對象模型）實現動態顯示和交互；

使用XMLHTTP組件XMLHttpRequest對象進行異步數據讀取

使用JavaScript綁定和處理全部數據

三，XMLHttpRequest對象細節分析：

<script language=」javascript」>

     var http_request = false;

    //IE瀏覽器

    http_request = new

               ActiveXObject("Msxml2.XMLHTTP");

    http_request = new

               ActiveXObject("Microsoft.XMLHTTP");

    //Mozilla瀏覽器

    http_request = new XMLHttpRequest();

</script>

XMLHttpRequest對象方法列舉 

abort()  中止當前請求 

getAllResponseHeaders()  把http請求的全部響應首部做爲鍵/值對返回

getResponseHeader("headerLabel")  返回指定首部的串值

open(「method」,」url」)  創建對服務器的調用，method參數能夠是GET,POST或PUT。url參數能夠是相對URL或絕對URL。這個方法還包括3個可選參數。 

send(content)  向服務器發送請求 

setRequestHeader("label", "value")  把指定首部設置爲所提供的值。在設置任何首部以前必須先調用open() 

onreadystatechange:

該事件處理函數由服務器觸發，而不是用戶

在 Ajax 執行過程當中，服務器會通知客戶端當前的通訊狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是服務器對客戶端鏈接操做的一種方式。每次 readyState 屬性的改變都會觸發 readystatechange事件

open(method, url, asynch)

XMLHttpRequest 對象的 open 方法容許程序員用一個Ajax調用向服務器發送請求。

method：請求類型，相似 「GET」或」POST」的字符串。若只想從服務器檢索一個文件，而不須要發送任何數據，使用GET(能夠在GET請求裏經過附加在URL上的查詢字符串來發送數據，不過數據大小限制爲2000個字符)。若須要向服務器發送數據，用POST。

在某些狀況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。若是對每一個請求的響應不一樣，這就會帶來很差的結果。把當前時間戳追加到URL的最後，就能確保URL的唯一性，從而避免瀏覽器緩存結果。 

url：路徑字符串，指向你所請求的服務器上的那個文件。能夠是絕對路徑或相對路徑。

asynch：表示請求是否要異步傳輸，默認值爲true(異步)。指定true，在讀取後面的腳本以前，不須要等待服務器的相應。指定false，當腳本處理過程通過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。

send(data)：

open 方法定義了 Ajax 請求的一些細節。send 方法可爲已經待命的請求發送指令

data：將要傳遞給服務器的字符串。

若選用的是 GET 請求，則不會發送任何數據， 給 send 方法傳遞 null 便可：request.send(null);

當向send()方法提供參數時，要確保open()中指定的方法是POST，若是沒有數據做爲請求體的一部分發送，則使用null.

setRequestHeader(header,value)

當瀏覽器向服務器請求頁面時，它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據(metadata)。首部信息用來聲明一個請求是 GET 仍是 POST。

Ajax 請求中，發送首部信息的工做能夠由 setRequestHeader完成

參數header： 首部的名字;  參數value：首部的值。

若是用 POST 請求向服務器發送數據，須要將 「Content-type」 的首部設置爲 「application/x-www-form-urlencoded」.它會告知服務器正在發送數據，而且數據已經符合URL編碼了。

該方法必須在open()以後才能調用