AJAX 基礎篇

AJAX 介紹

非同步 JavaScript 及 XML (Asynchronous JavaScript and XML，AJAX) 並不是一種技術，而是整合數個技術的新方法。

以往切換網頁每次都要再重新讀取「整個」網頁，連相同的東西也要重跑？？？(例如：導覽列、頁尾等)，會花很多時間等待，AJAX 的出現就是為了解決這個問題，簡直是救世主阿

實際運用：註冊會員輸入E - mail 時，網頁馬上偵測到是否註冊過或格式是否正確，網頁馬上顯示相關訊息，而且頁面並沒有重跑，很讚！

實作步驟

# 直接在 chrome 開發者工具操作 (F12 console)

第一步：建立 XMLHttpRequest 物件

var xhr = new XMLHttpRequest();

透過 XMLHttpRequest 物件跟其他伺服器要資料，建立好物件後，此時的 readyState 為 0

readyState： 客戶端物件目前的狀態。

readyState 0：已經產生一個 XMLHttpRequest，但還沒連結所需資料

---

第二步：open()

初始化一個新創建的請求，或是將一個請求重新初始化

xhr.open("get", "https://hexschool.github.io/ajaxHomework/data.json", true)

// 物件.open( "格式", "要讀取的網址", 同步/非同步)

# AJAX 非同步

格式	意思
get	讀取資料
post	傳送資料到伺服器

物件 open 後，readyState 會變為 1

readyState 1：已 open()，但還沒傳送資料

---

第三步：send()

send() 是用來發送 http 請求。只有要 get 資料，但沒有傳字串或其他資料去做驗證等，所以 send() 中放 null (空值)，如果成功撈到資料，它會被放在 responseText，且 readyState 變成 4

xhr.send(null)

readyState 4：完全接收到資料

---

程式碼統整

var xhr = new XMLHttpRequest();

xhr.open("get","https://www.ris.gov.tw/rs-opendata/api/v1/datastore/ODRP048/106",true);

xhr.send(null);

readyState 狀態統整

readyState 值	狀態
0	已經產生一個 XMLHttpRequest，但還沒連結所需資料
1	已 open()，但還沒傳送資料
2	偵測到有用 send
3	載入中 loading
4	完全接收到資料

資料來源

上課筆記 加上個人詮釋與額外補充

• JavaScript 入門篇 - 學徒的試煉
• AJAX | MDN
• XMLHttpRequest | MDN

tags: 六角學院 程式設計 前端 筆記