鄒哥教你學習Ajax

天才是百分之一的靈感，百分之九十九的血汗。——愛迪生

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 是一種用於創建快速動態網頁的技術。

通過在後台與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

Ajax 不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術，

AJAX技術包括以下幾種技術。

JavaScript（綁定所有技術）

XML、XSLT（數據交換）

XMLHttpRequest（非同步數據查詢、檢索）

DOM (動態顯示及交互)

DHTML（基於瀏覽器的頁面）

CSS（頁面樣式）

其中Ajax的核心對象是XMLHTTPRequest對象，這個對象包含很多常用的屬性和方法。

常用方法：

open(method,URL,async)：建立與伺服器的連接

method參數指定請求的HTTP方法,典型的值是GET或POST

url參數指定請求的地址

async參數指定是否使用非同步請求，其值為true或false

send(content) ：發送請求

content參數指定請求的參數

setRequestHeader(header,value)：設置請求的頭信息

常用屬性：

onreadystatechange：指定回調函數

readystate: XMLHttpRequest的狀態信息

status: http的狀態碼

timeout : 設置XMLHttpRequest請求的超時時間

responseType : 設置響應返回的數據格式

responseText：獲得響應的文本內容

responseXML：獲得響應的XML文檔對象

如何使用Ajax

jQuery Ajax簡化Ajax請求

$.ajax(options) 返回的是XMLHttpRequest對象

options (可選) : AJAX 請求設置。key/value方式

常見選項設置如下:

type --- 請求方式,默認為GET

url --- 請求資源的URL

data --- 請求參數信息 key/value

success --- 回應成功的回調函數

error --- 回應失敗的回調函數

$.get(url,[data],[callback])

url 請求資源的URL

data 請求參數信息 key/value

callback 載入成功時回調函數

$.post(url,[data],[callback])

url 請求資源的URL

data 請求參數信息 key/value

callback 發送成功時回調函數

使用jQuery Ajax實現同一頁面的CURD

頁面效果參考：

js代碼參考：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！