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 屬性

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

Facebook 功能: