[前端連載] 了解網頁發展的脈絡(下)——什麼是AJAX，以及jQuery、CSS3、HTML5簡單介紹

簡介

好不容易寫到了網頁脈絡的最後一篇了，可喜可賀！還記得上次我們提到了javascript的發展史，看他怎麼和jscript競爭，爾後發展成為網頁前端通用的唯一語言。隨著網頁越來越發達，又發展出了framework，來幫助我們快速以及有效率的開發網頁。

而framework的出現，代表網頁開始複雜化，也標誌著一個前端和後端的分野，因為我們的網頁已經漸漸複雜到不是一個人能專精所有事的階段了（當然還是有神人級的人物，南京通北京，前端通後端，但畢竟這種人在少數）。

今天要來介紹一下，在這個分野之後，到底出現了什麼樣新潮的前端技術，有感到一絲興奮嗎？

開始囉！

1990年代，除了沒一村的爸爸和媽媽在一個不小心的夜晚把我生產出來外，也是網路剛開始發展的年代。而在這個草創的時候，伺服器處理任何一個使用者的請求時，都需要「請client端在重新載入一次」。

我對你什麼時候出生沒有興趣，不過我想知道你提這段歷史是為什麼？

很好，開始提出為什麼，就是進步的開始！在這裡，我想先請你把捲軸停在這裡，然後筆電闔上，想想看，這樣到底會出什麼問題？

讓我思考一下……

好的，既然你筆電都闔上了，那請你順便幫我去巷口的麵店和飲料店買個午餐。記住，牛肉麵不要牛肉，木瓜牛奶不要木瓜。謝囉^^

可憐的公務員

在地表上的某一處，有一個國家，他們的公務員都非常的勤奮。雖然非常的勤奮，但國家給他們提供的系統不太好，造成辛苦的公務員很多的麻煩。

有一天，住在這個國家的小明，要去地政事務所，循問一些有關土地的資料。

不好意思，我想請問一下「克強路1段」50坪的公告地價是多少？

好的，等我印一下資料給你！

辛苦的公務人員開始工作了，最後小明得到一張資料表如下：

日期：西元3000年
申請時間：2/30
申請人：小明
.
.
.
地段：克強路1段
公告地價：1坪1億
.
.
.
注意1：以下的公告地價是非常浮動的，很可能今天的地價和明天的地價完全不一樣，所以如果你家被以一坪1塊2毛5徵收，請不要怪罪於國家。就好像投資基金有賺有賠，公告地價也是有賺有賠的！
注意2：……
注意3：……
.
.
注意50：……

辛勤的公務人員工作完了，把這份資料表拿給你，整張資料表共有100行那麼多，而小明需要的資料只有其中的13行。小明看到這份資料，感到非常的傻眼，不過看著公務員滿額頭的汗水，他還是好聲好氣的繼續問：

不好意思，我想請問一下「大學路1001號」50坪的公告地價是多少？

好的，等我印一下資料給你！

辛苦的公務員又開始工作了，過沒多久，小明又拿到了一份和之前那份有87%像（真的是87%，不能再多了，不信你自己算）的資料表。小明感到非常的絕望，因為他是一個炒地皮大戶，他還要再繼續問50個地段。或許這是該國抑制炒地皮的一個手段，我想中華民國的政府或許該試試看這個方法，記得每一張都要87%像，還可以順便嘲諷一下炒地皮的人。

根據以上的故事，我想各位應該能想到，如果每次都重載的話，會造成client和server多大的麻煩。不管問的資料多或少，都要把整份的html檔傳給client端一次，即便我們只是想要詢問一個小小的欄位而已。所以聰明的科學家們，想出了一個新的解決辦法，叫做AJAX（Asynchronous JavaScript and XML），字面上翻就是「非同步的JavaScript和XML」。

AJAX——公務人員的福音

自從AJAX這個技術出現後，每次小明一問，公務人員回給他的資料就是那不一樣的13%。他感到非常的高興，不是因為他不用再被嘲諷，而是因為他可以炒更多的地皮了。

回到網路來說，自從AJAX這個技術在2000年前後開始大量使用後，client再也不用因為要更新一塊小小的資訊，就重新整理整個頁面。他所要做的事就是利用AJAX技術去問server它想要的資料，然後利用javascript動態更新即可。多麼神奇的一個技術啊！

AJAX縮寫中A的由來，代表著非同步載入，也就是說資料不是和html檔在最一開始一起載入的，而是想要資料的話，才去跟server拿取回來填在client端。至於XML，則是資料交換的格式。雖然AJAX中的X代表著XML，不過目前最通用的資料交換格式則是JSON，因為它非常的簡單！

AJAX受到大家的歡迎，主要是由Gmail開端的。想像一下，你在使用Gmail的時候，有因為點一個郵件，就重新整理整個畫面嗎？沒有，這是AJAX的功勞！

jQuery——目前最受歡迎的JavaScript函式庫

有了這個東西，終於能讓元件像火影忍者一樣飛來飛去了！

jQuery是一個javascript的library（關於library的定義，請回到第4講），在2006年的時候釋出1.0版，而現在（2016/4/23）已經出到了v2.2.3。在網頁前端中，如果不是要製做很麻煩的應用程式，多半還是使用jQuery這個library。根據統計，在全球10000個存取最高的網站中，有65%都使用這個library，原因無他，因為他特好用。如果要開發小小的網頁，不用懷疑，他也絕對是首選！關於這個library有多麼的好用，從下面的程式碼來看，就能明白！

我們要在一個tag為div，id為hello的標籤上，給他加上一個偵聽器（這些名詞不懂關係，之後的連載就會介紹了，如果有之後的話啦呵呵）。如果我們點擊該div，他就會把原本的數字加1。那麼使用原生的 javascript 和 jQuery 的程式碼如下（有$符號的是jquery的）：

點擊runpen就可以看到一切，也可以按右上角點到我的codepen去，給我一個愛心XD

比較一下，就會發現jquery的語法簡單和好學程度是完勝原生的javascript啊。當然這不是說原生javascript不好，只是用起來比較不方便。雖然在最近，jQuery的聲勢有下滑的趨勢，很多人反而會選擇原生的javascript來用。不過對於初學者而言，我認為還是直接進jQuery，會比較好上手一點。

此外，因為jQuery實在是太風行、太方便了，因此專門給jQuery做的plugin也是一籮筐，有興趣的同學在學到這裡的時候，可以查一下。

CSS3——新世代的CSS標準

CSS有分版本號，而最新的是CSS3，代表的是第3版，在2011年6月7日由W3C（World Wide Web Consortium）發布為新的標準。第3版支援了很多前一版沒有的功能，而我在這邊示範一下CSS3新加入的動畫效果。有了這個，苦命的工程師大大，可以使用簡單的CSS，就把一個簡單的動畫給刻出來。下面實作一個簡單的功能，把滑鼠放到格子上，格子的就會變得不透明，而且伸長。以下是程式碼：

當然還有很多的功能，這邊不一一講，只是有了CSS3，前端工程師的彈性又更大了。

嘿，你是要玩多久，我要開始講HTML5了啦！

HTML5——新世代的HTML標準

HTML5，也就是HTML標準第5版，於2014年10月，由距離上一版的HTML4.01標準，已經有15年之久。在HTML5出現之前，我們苦命的瀏覽器常常要掛很多的外掛程式，例如flash之類的。如果有同學的瀏覽器沒有安裝這些程式，那就無法觀看這個效果。而HTML5的主要目的就是為了解決這個問題。

直接來動手操作吧！

打開youtube，隨便點一個喜歡的影片。
chrome的話，按下Ctrl+Shift+c。
滑鼠滑影片上左鍵點一下，接著就會看到chrome的developer tool，已經refer到該影片的DOM元素
觀察一下，便可以發現他的程式碼如<video>……</video>
或者不要這麼麻煩，直接對影片點右鍵，就會看到HTML5的相關資訊。

試完youtube後，你可以去試一下很多網站的影片播放器（咳咳咳……清個痰），應該會發現不少都不是html5標準的，那很有可能他還是使用舊時代的技術——flash。

html5-youtube

前端framework

其實想了很久，還是決定簡單提一下這個。雖然 jQuery 好用易學，但對於開發大型專案而言，這種鬆散的結構，是一大致命傷。對於專案的管理，也不是非常有效率。因此，出現了一些前端的framework，來解決這個問題，例如：AngularJs、Backbone.js、Ember.js、Knockout.js。

不過因為這些framework對於小專而言，用起來不見得那麼必要，所以我只簡單的提一下，讓各位知道有這些東西的存在就好。這是屬於進階的技術，才在剛起步，不會也沒關係。

此外，Facebook推出的ReactJs（沒錯，就是那個火紅到爆，前端的大大都在談的ReactJs），嚴格來說，應該算是一個library。不過他的功能，大體來說，也是為了開發和前端架構上的方便而產生的。只不過他的核心概念和上述的framework有很大的不同。

結語

所以關於網頁發展的歷史，大致上就到這裡結束了。網路草創年代的靜態網頁因為無法更新資料，而出現了動態網頁。為了方便client和server溝通，出現了REST API的設計。MVC三兄弟也在這時，從各種網路架構中，脫穎而出。接著，我們又談到javascript的歷史，還有framework到底是什麼。最後這一講，談到了AJAX、CSS3、HTML5的應用。而library的部分，也介紹了jQuery，並簡單提到了前端的framework，以及紅到爆的ReactJs。如此一來，也算是功德圓滿啦！

所以我可以開始做出飛來飛去的東西了嗎？

我想還沒到時候，不過我認為你可以先來罐Red Bull。

為什麼？

因為Red Bull給你一對翅膀:)

附錄

Native JavaScript vs jQuery

[前端連載] 了解網頁發展的脈絡(上)——從靜態網頁到動態網頁到REST API

[前端連載] 了解網頁發展的脈絡(中)——JavaScript 歷史和 Framework 是什麼？

粉絲專頁

https://www.facebook.com/noootownnotes/

關於我：

我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：