# AJAX 基礎篇 ## AJAX 介紹 <p style="text-align: justify">非同步 JavaScript 及 XML (Asynchronous JavaScript and XML，AJAX) 並不是一種技術，而是整合數個技術的新方法。 <br><br> 以往切換網頁每次都要再重新讀取「整個」網頁，連相同的東西也要重跑？？？(例如：導覽列、頁尾等)，會花很多時間等待，AJAX 的出現就是為了解決這個問題，簡直是救世主阿 <br><br> 實際運用：註冊會員輸入E - mail 時，網頁馬上偵測到是否註冊過或格式是否正確，網頁馬上顯示相關訊息，而且頁面並沒有重跑，很讚！</p> ## 實作步驟 ###### # 直接在 chrome 開發者工具操作 (F12 console) ### 第一步：建立 XMLHttpRequest 物件 ```javascript= var xhr = new XMLHttpRequest(); ``` 透過 [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest) 物件跟其他伺服器要資料，建立好物件後，此時的 readyState 為 0 ``` readyState： 客戶端物件目前的狀態。 readyState 0：已經產生一個 XMLHttpRequest，但還沒連結所需資料 ``` --- ### 第二步：open() 初始化一個新創建的請求，或是將一個請求重新初始化 ```javascript= xhr.open("get", "https://hexschool.github.io/ajaxHomework/data.json", true) // 物件.open( "格式", "要讀取的網址", 同步/非同步) ``` ###### # [AJAX 非同步](/B2Lkn8QWSTel5zAmjyCTyQ) | 格式 | 意思 | | -------- | -------- | | get | 讀取資料 | |post|傳送資料到伺服器| 物件 open 後，readyState 會變為 1 ``` readyState 1：已 open()，但還沒傳送資料 ``` --- ### 第三步：send() <p style="text-align: justify">send() 是用來發送 http 請求。只有要 get 資料，但沒有傳字串或其他資料去做驗證等，所以 send() 中放 null (空值)，如果成功撈到資料，它會被放在 responseText，且 readyState 變成 4</p> ```javascript= xhr.send(null) ``` ``` readyState 4：完全接收到資料 ``` --- ## 程式碼統整 ```javascript= 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 入門篇 - 學徒的試煉](https://www.udemy.com/course/javascript-learning/) - [AJAX | MDN](https://developer.mozilla.org/zh-TW/docs/Web/Guide/AJAX) - [XMLHttpRequest | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest) ###### tags: `六角學院` `程式設計` `前端` `筆記`