大家好，我是一名菜鳥工程師，Chris，今天來到第 25 天，JS 的 AJAX

什麼是AJAX ？

AJAX 是一種網頁開發技術，全名為 Asynchronous JavaScript and XML，為非同步的 JavaScript 與 XML）

簡單來說，它可以讓網頁在背景發送和接收資料，也讓使用者能在瀏覽的過程中，取得或更新資訊

• 利用 JavaScript，並透過網址與伺服器進行連線，然後取得結果
• 使用內建物件 XMLHttpRequest 進行

按步驟來執行：

1 建立連線的物件 : 送出連線，並取得伺服器的回應

let request = new XMLHttpRequest();

2 設定連線網址 : 利用open()做設定

let request = new XMLHttpRequest();

requet.open('get', 'https://example.com/api/data');
// 連線方法分為 get 和 post

3 送出連線 : 呼叫send()來連線

let request = new XMLHttpRequest();

requet.open('get', 'https://example.com/api/data');

request.send();
// 呼叫 send 方法後，才開始進行連線

4 註冊 onload 事件 : 為了取得連線的回應

let request = new XMLHttpRequest();

requet.open('get', 'https://example.com/api/data');

request.send();

request.onload = function(){
  // 這邊輸入的程式，可以取得連線的回應
};

5 取得連線的回應字串 : 利用 responseText 屬性來取得

let request = new XMLHttpRequest();

requet.open('get', 'https://example.com/api/data');

request.send();

request.onload = function(){
  alert(this.responseText); // 將回應的字串印出來
};

6 回應字串的處理 : 取得回應，把它當一般的字串

<div id = 'container'></div>
<script type = 'text/javascript'>
 
  let request = new XMLHttpRequest();
  ……   // 忽略中間的程式
  request.onload = function(){
    let container = document.getElementById('container');
    container.innerHTML = this.responseText; 
    // 將伺服器回應的字串放入標籤內部
  };

</script>

使用 AJAX 技術，網頁可以通過 JavaScript 發送 HTTP 請求到伺服器，然後在伺服器處理請求並返回資料時，網頁可以繼續執行其他操作

這樣可以讓網頁載入內容時，即時更新和增加互動性，而不需要重新載入頁面，就能進而提高使用者的網頁體驗

★總結 : 以上就是關於 AJAX 連線的說明

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JS 的迭代!!!