跳至主要内容

為什麼 Google 搜尋欄可以及時顯示搜尋建議?

你有沒有想過,當你在 Google 搜尋欄打字的時候,為什麼下面可以及時產生出各種搜尋建議?假設我們在搜尋欄輸入「籃球」,下面會及時顯示像是「籃球比分」、「籃球直播」等搜尋建議。

Google 搜尋頁面

照理來說,這些搜尋建議都是資料,被存放在 Google 的資料庫(或稱後臺、伺服器)。如果要從 Google 的資料庫索取到這些搜尋建議,不是應該要按下「送出」,網頁重新整理之後,才會回傳資料過來嗎?
就像我們打字完,按下「送出」,Google 網站會重新整理,接著顯示出各個有關「籃球直播」的網站。

如果我們每次輸入關鍵字,都要重新整理才能看到搜尋建議,不會覺得很慢很煩嗎?

當然會。但是現在我們在搜尋欄輸入文字,並沒有經過重新整理,就可以呈現出下面一堆搜尋建議,這是為什麼呢?
這就要講到一個特別的技術,叫做「AJAX」。

什麼是 AJAX

AJAX,用一句話來描述,就是「在不重新整理頁面的情況下,跟資料庫拿取資料,並將資料呈現到網頁上」的技術(或說過程統稱)。

AJAX,全名叫做  Asynchronous JavaScript And XML。

我們來單字拆解一下:Asynchronous 是「非同步」的意思,講白話一點,就是「建構網頁」和「向資料庫拿資料」是非同步、在不同地方進行的,兩件事情不會互相干涉。所以,我可以同時「建構網頁」和「向資料庫拿資料」。

JavaScript 是向資料庫拿資料所使用的程式語言。XML 則是這些資料的格式,可以想像成是類似 MarkDown 的東西,他們都有各自的一套特定格式。

所以 Asynchronous JavaScript And XML 就是,瀏覽器在不重新整理頁面的情況下,使用 JavaScript 這個程式語言,和資料庫拿取 XML 格式的數據。

(題外話:雖然早期交換的數據是用 XML 格式,但現在更常用的其實是 JSON 格式,不過 AJAX 還是保留 XML 在名字中。)

為什麼有辦法做到「非同步」?

理解了 AJAX 是怎樣的技術之後,那為什麼 AJAX 可以這樣非同步進行作業?它跟傳統的方法有什麼不同?

簡單來說,我們的瀏覽器有很多個組件,例如各式各樣的引擎、使用者介面等等。傳統方法中,「建構網頁」和「向資料庫拿資料」會重複使用某些組件,所以這兩個不能同時進行,一個時間只能選擇做一件事情。但是在 AJAX 這個技術裡面,「建構網頁」和「向資料庫拿資料」使用的是不同的組件,所以它們才能夠在不影響網頁建構的情況下,同時向資料庫拿資料。

還有哪些地方有用到 AJAX 技術?

社群媒體

  • 例如:YouTube、Facebook、Instagram、Twitter
  • 當我們往下捲動,他會跟伺服器拿取更多貼文資料。有時候網路速度沒那麼快,他還會停頓一陣子,才會跑出新的貼文。但是在這整個過程中,網頁並沒有重新整理,就能載入更多貼文資料。
YouTube 載入更多

註冊頁面

  • 例如:Email 註冊、各種需要註冊的網頁
  • 當我們輸入想要註冊的帳號,他可以在沒有重新整理的情況下,就從後臺伺服器找到有其他人已經用過這個帳號的資料了。
E-mail 註冊頁面

地圖

  • 點選地點,會出現電話、地址等相關資訊
  • 點選導航,會出現路線
Google Map 臺北一零一位置

以上是關於「為什麼 Google 搜尋欄可以及時顯示搜尋建議?」的文章,希望你看完之後有稍微網頁某部分的運作方式。

下一篇文章,我會試著用很簡單的方式說明 AJAX 這個技術在程式碼實際上是怎麼運作的。