AJAX 在程式上怎麼運作？

上一篇文章，我們講到了 Google 可以在不重新整理頁面的情況下，使用「AJAX」這個技術，同時向資料庫拿取資料，並將這些搜尋建議的資料呈現在畫面上。

這一篇文章，我會試著用很簡單的方式說明 AJAX 是怎麼在程式上運作的。

瀏覽器端的程式（JavaScript）

function searchFunction() {
  var input = document.getElementById("searchBox").value;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "search.php?q=" + encodeURIComponent(input), true);
  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML = this.responseText;
    }
  };
  xhr.send();
}

function searchFunction() {} 代表我創建了一個功能，名字叫做 searchFunction，並把所有功能細項都整理在這裡面。
把搜尋欄（searchbox）裡輸入的文字（value）存到 input 裡面。假設我在 searchbox 輸入籃球，那 input 就會是「籃球」。
創建一個 XMLHttpRequest 類型的工具物件，這個工具可以用來跟資料庫交換 XML 資料，裡面也包含很多功能跟狀態。而 xhr 是我給這個工具取的代號。
xhr.open() 是在設定 xhr 物件要跟資料庫講什麼話，讓資料庫知道它是要拿資料，就像我們用中文說「我要拿資料」，程式也有它自己的語言跟溝通方式。
- GET 代表我想要跟資料庫拿資料，這應該很好懂。
- search.php 是一個資料庫的文件，php 是一個資料庫端運行的程式，同時也是檔名（例如 .doc）。
- q 是 query，代表我要查詢，後面的 encodeURIComponent 就是把我剛剛設定的 input 轉成資料庫可以讀取的格式。
- 最後的 true 是設定我這個操作要是非同步的。
- 總結這一行的解釋：我想要以非同步的方式（true）向資料庫發出一個 GET 的請求，而其中詳細訊息叫做 search.php?q=籃球。意思是我要對資料庫的 search.php 這個檔案，發出一個要查詢（q）籃球這個關鍵字（encodeURIComponent(input)）的訊息。
xhr.onreadystatechange 是在設定 xhr 這個物件的功能：當資料庫回傳資料成功時，要怎麼顯示到瀏覽器畫面上。
- readyState 代表索取資料的狀態，4 代表已經索取成功了，而 status = 200 也是另一種代表索取資料成功的狀態。
- 當滿足這兩個條件時，瀏覽器會把我拿到的資料（responseText），呈現在我設定為 result 的地方。
把 xhr 的所有功能全部都設置好之後，就使用 xhr.send() 對資料庫正式發送索取資料的訊息。
- 為什麼要在正式發送訊息前，就先設定功能？如果先發送再設定功能，有可能會錯過一些狀態變化或資訊。所以為了可以在拿到資料的時候馬上做出反應，會先把所有功能都設定好再正式發送訊息。

資料庫端的程式

<?php
$query = $_GET['q'];
$searchSuggestions = [
  $query . "直播",
  $query . "規則",
  $query . "訓練"
];

echo "您輸入的關鍵字為：" . htmlspecialchars($query) . "<br>";
echo "搜尋建議為：<br>";
foreach ($searchSuggestions as $suggestion) {
  echo htmlspecialchars($suggestion) . "<br>";
}
?>

當資料庫收到剛剛的訊息之後，會使用 search.php 這個檔案來執行。
<?php ... ?>：這是 PHP 語法的開始和結束標籤。它在告訴資料庫，這裡面的內容應該使用 PHP 來處理。
$_GET['q'] 是用來設定我剛剛在瀏覽器端使用 GET 傳遞裡面包含 q 的訊息，也就是籃球。接著我把這個籃球的關鍵字，設定給一個叫做 $query 的參數。
$query . "直播" 裡面的 . 代表把這些單字接在一起，所以 searchSuggestion 會變成：「籃球直播、籃球規則、籃球訓練」。
htmlspecialchars($query) 代表我把「籃球」這個單字包裝成程式能看懂的單字，<br> 代表換行，而 echo 代表把這整個句子回傳。所以這行代表：回傳「您輸入的關鍵字為：籃球（換行）」
下一行 echo "搜尋建議：<br>"; 代表：回傳「搜尋建議為：（換行）」
foreach 代表我要使用一個迴圈，以 $suggestion 為索引，從 $searchSuggestions 的第一個項目依序輪到最後一個項目。在這個情況下，$searchSuggestions 有三個項目，所以這個迴圈裡面的程式會進行三次，而每次的 $suggestion依序為「籃球直播、籃球規則、籃球訓練」。
echo htmlspecialchars($suggestion) . "<br>"; 會進行三次，代表：回傳「籃球直播（換行）」、回傳「籃球規則（換行）」、回傳「籃球訓練（換行）」。

所以這整個資料庫端的程式會回傳給瀏覽器的訊息如下：

您輸入的關鍵字為：籃球
搜尋建議為：
籃球直播
籃球規則
籃球訓練

最後整理（簡化版）

上面我依序解釋了每行程式碼在做什麼事情，可能有點頭暈了。我最後再簡單說明這整個過程到底做了什麼事情。

我在瀏覽器的搜尋欄位輸入「籃球」。
瀏覽器創建了一個可以跟資料庫溝通的工具物件。
設定這個物件的功能：
- 我要跟資料庫說：請回傳給我「籃球」這個字的搜尋建議。
- 資料庫回傳搜尋建議回來之後，我要顯示在哪個地方。
物件的功能都設定完之後，正式傳訊息給資料庫。
資料庫收到訊息之後，根據「籃球」這個關鍵字找到了「籃球直播、籃球規則、籃球訓練」這幾個搜尋建議。
把這些搜尋建議全部都回傳給瀏覽器。
瀏覽器收到這些回傳的訊息之後，按照前面設定過的功能，把這些搜尋建議顯示在網頁上。

對使用者來說，我們輸入關鍵字，網頁上馬上出現搜尋建議，這只有短短不到 0.01 秒的時間。但就在這麼短的時間內，經過了這麼多的步驟。

希望經過我的說明，讓你對網頁的運作有更進一步的了解！

瀏覽器端的程式（JavaScript）​

資料庫端的程式​

最後整理（簡化版）​

瀏覽器端的程式（JavaScript）

資料庫端的程式

最後整理（簡化版）