AJAX (1)

2019-08-03 PV:

AJAX

AJAX 即「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）是一種為了改善傳統用戶端與伺服器端的資料傳輸而有的一套綜合了多項技術的瀏覽器端網頁開發架構。主要以 JavaScript 與 XML 為主，但還包括其它成員，也就是 CSS、DOM（Document Object Model）與 HTML 等，特別是 XMLHttpRequest 元件，使 AJAX 能達到非同步資料交換的目的。
AJAX 改善傳統用戶端與伺服器端資料傳輸間重複的問題，可以僅向伺服器傳送並取回必須的資料，並在用戶端採用 JavaScript 處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少，伺服器回應更快了。

AJAX 網頁有兩種主要特性：向伺服器發出請求，以及回傳結果時，瀏覽器不需要重新載入所有頁面；藉由 XML 解析傳遞與交換的資料。例如註冊帳戶時提示帳號已被使用，或者是在搜尋欄跳出相關字詞、購物欄顯示庫存量，這些都是透過 ajax 的方式，不需要重新載入頁面就能完成。

從瀏覽器端取得 JSON 資料

常見的應用例如從伺服器端取得 JSON 資料。JSON 是用純文字儲存和傳送的簡單結構資料。可以透過特定格式儲存任何資料（例如字串、數字、陣列、物件），或者透過物件或陣列傳送比較複雜的資料。例如：

使用者點選線上產品縮圖
JavaScript 透過 AJAX 方式將產品 ID 傳送給伺服器
伺服器端收到 ID，將產品資料（EX: 價格、描述）編碼成 JSON 資料，再回傳給瀏覽器
JavaScript 收到 JSON 資料，將其解碼再將資料顯示在網頁上

JSON 範例

JSON 字串可以用以下規則建立

可以包含陣列或物件資料
陣列可用 [] 寫入資料
物件可用 {} 寫入資料
name / value 是成對的，中間透過 (:) 來區隔

以下是一個簡單的 JSON 範例，我們可以發現陣列裡面又包含物件

[
  {
    sno: "1001",
    sna: "大鵬華城",
    tot: "38",
    sbi: "17",
    sarea: "新店區",
    mday: "20191109131338",
    lat: "24.99116",
    lng: "121.53398",
    ar: "新北市新店區中正路700巷3號",
    sareaen: "Xindian Dist.",
    snaen: "Dapeng Community",
    aren: "No. 3, Lane 700 Chung Cheng Road, Xindian District",
    bemp: "20",
    act: "1"
  }
];

從伺服器取得資料

要送出要送出一個 HTTP 請求從伺服器取的資料，過去最典型的應用方式是 XMLHttpRequest（XHR)。

設定請求

首先要產生一個 XMLHttpRequest() 物件實例，才能物件跨瀏覽器取得資料，。

1	var xhr = new XMLHttpRequest();

使用 open() 方法，設定請求，請求方法除了 GET 與 POST，還能使用 PUT、DELETE、HEAD、OPTIONS ! 並且預設使用了非同步 (async) 的方式接收回應:

執行 request 之後，就會出現相對的資料。

readystate 代表目前狀態

0-你已經產生一個XMLHttpRequest，但是還沒有連結你要撈的資料
1-用了open()，但還沒有把資料傳送過去。
2-偵側到用了send。
3 - (processing request)資訊處理中。
4 - (request finished and response is ready)撈到資料，數據完全接收到了。

以 xhr.open(,,true)來初始設定，需要代入 3 個參數。第一個參數是發出 request 的方式，格式有 get (讀取)、post (發送資料到伺服器)；第二個參數是要讀取的網址；第三個參數是同步與非同步

var xhr = new XMLHttpRequest();
// 格式,要讀取的網址,同步與非同步
// 格式: get(讀取), post(傳送資料到伺服器)
xhr.open("get", "這裡放網址", true);
// 空值，單純get，沒有要傳資料，括號中用null
xhr.send(null);

如果資料傳輸完畢且成功，在 XMLHttpRequest 中的 readyState 會等於 4，responseText 則是內容。