什麼是 AJAX ?如何遠端撈取資料?


Posted by hoyi-23 on 2021-05-23

Ajax 是 Asynchronous JavaScript and XML 的縮寫。
Asynchronous - 非同步
JavaScript - 使用的程式語言
XML - Client 與 Server 交換資料用的資料與方法,近年由於 JSON 等格式的流行,使用 Ajax 處理的資料並不限於 XML。

AJAX 基本觀念

AJAX可以在不用重整網頁(更新網頁)下,去和資料庫、後端程式、PHP 等拉取資料或結果。

透過 XMLHttpRequest 物件跨瀏覽器撈資料

如何拉遠端的資料?

步驟一
使用瀏覽器撈對方伺服器要資料時,一定要新產生這個物件: XMLHttpRequest();
要透過這個物件,才能和其他伺服器要資料。

let xhr = new XMLHttpRequest();


上圖可以看到包裹中的項目,其中:
onload - 當資料取得完成後,立即觸發這個function
readyState - 撈取資料的狀態。

  • readyState: 0 - 已產生XMLHttpRequest,但尚未連結要取得的資料。
  • readyState: 1 - 用了open(),但尚未傳送send()。
  • readyState: 2 - 偵測到有使用send()。
  • readyState: 3 - 載入中。
  • readyState: 4 - 有撈到資料了,數據已經完全接收到。

responceText - 資料文字,若回傳的是JSON資料,使用JSON.parse()解析。

步驟二
撈取資料。

let xhr = new XMLHttpRequest();
xhr.open('格式','要讀取的網址',同步或非同步)
//格式: get讀取資料;post傳送資料到伺服器(例如:要確定帳設定有沒有重複,所以會帶資料傳送過去到資料庫確認、驗證)

這時候 readyState 是 1 。已經設定好格式,但是還每把需求傳送過去。

步驟三
傳送需求。

let xhr = new XMLHttpRequest();
xhr.open('格式','要讀取的網址',同步或非同步)
xhr.send(null/需求);
//null: 格式使用get表示我們要讀取資料,所以不能傳送任何東西過去。
//需求: 格式使用post時,表示我們要傳送東西過去資料庫驗證,所以需要將需求附上。

這時候responceText就會撈到資料囉!。


XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials 屬性是一個 Boolean 型別,它指出無論是否使用 Access-Control 標頭在跨站的要求上,都應該使用像 Cookies、Authorization 標頭或 TLS 用戶端憑證來進行驗證。在相同來源的要求設定 withCredentials 沒有任何效果。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

#ajax #遠端資料 #credentials







Related Posts

常用的 React Hooks 簡介

常用的 React Hooks 簡介

版本控制 - 基本 Git 指令

版本控制 - 基本 Git 指令

Learn React with react.dev

Learn React with react.dev


Comments