2015.3.17Ajax小練習

      網頁被瀏覽器處理時，動態供給網頁動態數據。以動態數據建造的網頁成爲數據驅動網頁，數據負責網頁的內容。

  JavaScript內置了動態數據的支持，這種支持就是ajax。一直以來都對ajax很是的感興趣，今天作了一個小實驗。先來描述一下ajax，ajax能讓客戶端的瀏覽器能與網絡服務器產生一些「對話」，動態數據也所以而成真，腳本可向服務器請求部分數據，服務器利用ajax傳遞數據，腳本收下數據並動態的將數據整合到網頁裏。而網頁並不須要所有刷新和從新加載，這樣就能大大提升用戶的體驗和提高速度。ajax是Asynchronous Javascript And XML的縮寫，這裏也提到了一個xml的概念，xml是種爲任何類型的數據設計格式的標記語言。xml能夠用本身的標籤標示數據，xml與html類似，都是文本。還有xhtml，XHTML是遵照xml的較嚴格語法規則的新版html。

   整個ajax的交互模型是這樣的，在實行客戶端瀏覽器與服務端的數據通訊時，ajax以請求（request）與響應（response）爲中心概念。瀏覽器送出請求到服務器，並等待響應，服務器收到響應，開始工做，建立響應，服務器腳本就不是JavaScript了，但JavaScript很厲害啊，如今node.js能夠擔負部分簡單的服務器職責而且功能還在不斷的擴展。接下來就是服務器建立給瀏覽器的響應，把客戶端請求的數據打包由ajax響應返回，瀏覽器解開響應中打包的數據，並當心的將數據整合至網頁中。

   javascript內置一個XMLHttpRequest的對象，用於發起ajax請求並處理ajax響應。包含了不少支持ajax的方法與特性。

   readyState請求的狀態代碼：0（未初始）1（開啓）2（已傳送）3（接受中）4（已載入）

   status（HTTP的請求狀態代碼，例如404（NOT FOUND）或200（ok））。

   上述兩個特性，可判斷ajax請求是否以合法的響應結束。

   onreadystatechange請求狀態改變時會被調用的函數引用。（這個特性的獨特之處，在於它存儲一個引用，引用於ajax請求的狀態改變時被調用的自定義事件處理器，這個事件處理器就是處理響應的地方）

  responseText（由服務器返回的響應數據，格式爲純文本字符串）和responseXML（由服務器返回的響應數據，格式爲XML節點樹構成的對象。）這個兩個特性存儲服務器返回的Ajax響應數據。

send（）傳送請求，交給服務器處理。

open（）準備請求，指定請求的類型（get，post），URL及其餘細節。

send（）和open（）這兩個方法合做準備Ajax騎牛，然後返回給服務器。

abort（）這個方法只用在須要取消ajax請求的時候。

因爲XMLHttpRequest至關複雜，即便最基礎的請求，也須要不少的代碼，因而這裏把這個基本請求語句封裝成一個js模塊。方便調用實驗，源碼以下：

   

接下來是原生js寫的異步加載，這裏服務端是用的C#，

 

原生js的ajax方法：

 

執行結果：點擊前：

執行後：

 第一次原生異步成功以後，如今試一試jquery的ajax方法

一個是jquery的load加載文檔，一個是post和get聯接一塊兒使用的方法。

body部分：

js部分

：

服務端部分：

運行結果：