ZWH ZONE

[JavaScript] AJAX 簡介：實作篇

zhiwei. huang -

AJAX 為 Asynchronus(非同步) JavaScript and XML 的簡稱

這篇文章先不去探討什麼叫做 Asynchronus(非同步)，不過這是一個很重要的概念，後續會在探討

我們就實例上的說法： AJAX 是在 瀏覽器 不需要重整的情境下，直接向 伺服器 Server 端 取得資料的一種傳輸技術，以達到 提高網頁的互動性、速度效率，減少了伺服器的負荷量

下面以實際編碼來做說明：

XMLHttpRequest ：

剛剛有提到 AJAX 為 Asynchronus(非同步) JavaScript and XML 的簡稱 ， 我們在程式面上來說：

使用 JavaScript 與 伺服器 Server 端 取得 XML 的資料

在 JavaScript 內建提供了一個物件為 XMLHttpRequest，一個專門與 伺服器 Server 端 溝通的 物件

所以我們在建立 AJAX 的連線之前，第一個動作就是建立 XMLHttpRequest 的物件，如下：

var req = new XMLHttpRequest();

與 伺服器 進行連線：

接著我們使用 XMLHttpRequest 的 提供的 靜態方法 ， open() 來建立連線資訊：

var req = new XMLHttpRequest();
req.open('get','http://skyroxas.tw/aboutme'); //建立連線資訊

在這邊 open() 只是設置了連線的資訊，還沒開始進行連線

最後還需要使用 XMLHttpRequest 的 提供的 靜態方法 send() 去執行連線：

var req = new XMLHttpRequest();
req.open('get','http://skyroxas.tw/aboutme');
req.send(); //執行連線

取得 伺服器 內容

在上面的步驟中，已經完成了一次簡單的連線了，但其實到目前來說，還麼有什麼感覺，也沒有實際獲取到頁面的內容

使用 XMLHttpRequest() 物件提供的 事件 方法（Method）如下：

var req = new XMLHttpRequest();
req.open('get','http://skyroxas.tw/aboutme');

req.onloadstart = function(){
  console.log('連線開始')
}

req.onload = function(){
  console.log('連線中')
}

req.onloadend = function(){
  console.log('連線結束')
}

req.send(); //執行連線

可以把上面的 code 貼到 Google 的 console 裡去體驗一下這些連線的事件

可以參考 MDN： MLHttpRequest 事件處理器

接著我們在 連線中 也就是 onload 的事件中，就可以獲取 伺服器 Server 端 所請求的資料了，如下：

var req = new XMLHttpRequest();
req.open('get','http://skyroxas.tw/aboutme');

req.onloadstart = function(){
  console.log('連線開始')
}

req.onload = function(){
  console.log('連線中')
  console.log(this.responseText) //取得回應的內容的屬性
}

req.onloadend = function(){
  console.log('連線結束')
}

req.send(); //執行連線

跟多屬性可以參考 MDN : XMLHttpRequest 屬性

Facebook 功能：