以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

你被 AJAXed 了嗎?

8/30 08' icon

有幾個名詞在網路發展過程中,都佔有一席之地,我來想想,例如,Portal Site,中文叫入口網站,每個網站都要搞大,五花八門,當時有學者對入口網的定義是必需要提供免費郵箱。接著,大家談的是 eCommerce,中文叫電子商務,一定要有金流,要有物流,是人不是人都要開個網站賣點東西。再接著,開始大談 WEB 2.0,這個我就沒有好的中文說明,因為我也很想知道什麼是 WEB 2.0。

那現在談什麼?當然是 AJAX 囉!

然而,AJAX 是夯沒錯,但隨著大量書籍出版後,大部份書籍重點在於如何應用產生效果,動不動就提 Google Map 這種不正常發展方向下,又造成了不少人對 AJAX 認知上產生了根本錯誤,這些錯誤計有:

AJAX 是一種新技術

最近發表及成形的新技術應該是 Ruby 了,這項技術有完整的規範。但 AJAX 不是新技術,充其量只一個新方法。方法和技術有什麼不同呢?例如:HTML 是一種技術,CSS 也是一種技術,現在有一種「方法」把 CSS 充份應用在 HTML 的版面應用中,稱為「cssLayout」(PS.這個名詞是我編的,用來說明而已)而這個方法中指出某些某些要點。

在這個說明例子中,cssLayout 的要點就是 CSS 應用在 HTML 中,所以,你不能說:「沒有 CSS 的 cssLayout」 。

那 AJAX 這種方法,是應用那些技術呢? xHTML、CSS、XML 等,再使用 XMLHttpRequest 非同步取得資料。所以,HTML/CSS/XML/XMLHttpRequest 都是 AJAX 的組成要點,而其中最重要的呢?「非同步」,當然就是 XMLHttpRequest。

所以,如果有人說「一個不使用 XMLHttpRequest 的 AJAX 方法」,這種講法不就是相當於請老闆給你一碗「不要酸的酸辣湯」,還是「蚵丫煎不要加蚵丫」?

AJAX=強化的、延伸的 Javascript

AJAX 中的 J,指的就是 Javascript,正如有個新名詞叫作 ARAX,裡面的 R 是 Ruby。Javascript 在 AJAX 中扮演什麼角色呢?用中文最簡單的說法,是用 Javascript 把一些東西串在一起。這個說法源自 AJAX 名詞提出的始作甬者 Jesse James Garrett 在著名網誌 Ajax: A New Approach to Web Applications 中提出的,原文節錄如下:

Defining Ajax

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

注意重點,第一、Ajax 不是一項技術(Ajax isn’t a technology) ,第二、 Ajax 是數種技術組合,這些技術原本都各自發展(It’s really several technologies, each flourishing in its own right),第三、Ajax 用 Javascript 把這些內容串在一起(and JavaScript binding everything together)。

所以,Javascript 在 AJAX 中的角色是「串接所有技術所使用的工具」,如果 VBScirpt 也有辦法執行相同動作,也不妨定義一個 AVBAX(Asynchronous VBScript And XML) 。

所以,記住,請一定要搞清楚,AJAX 和 Javascript 有絕對關聯,但 Javascript 是一種語言,一種技術,AJAX 則是一種方法,如果我說「DOM 是 Javascript 的延伸」你會同意嗎?

AJAX=Javascript Framework

在網頁上可以實現非同步的技術後,過去只能在單機上執行的效果再也不是夢想,最簡單直接的,就是 autoComplete 這種「手法」。

於是,過去的單純網頁(Web Page)現在逐步往應用程式(Web Application) 靠攏,這些需要許多不同使用者介面(UI : User Interface),開始就有人開發許多不同套件供開發人員使用,這些套件稱為 Javascript Framework,比較好的說法應該是 Javascript Toolkit,較著名的包括:dojo、prototype、jQuery、mooTools、zapatec、Scriptaculous 等等。

但這些套件,不乏使用 AJAX 來執行,例如我也寫了一個 autoComplete 的套件,就是很標準用 AJAX 方法完成的,但套用時,有些內容我則沒辦法提供給讀者,原因包括大家用的資料庫不同、資料表不同,所以我只能告訴你主機丟回來的 XML,必需要符合什麼格式。

所以,以下這些話:

基本上,以上這些話都不算正確,toolTips 如果內容不是及時由 Server 中取得時,用不到 AJAX,同理 Tab 中的資料,如果不是及時由 Server 中取得時,也不算 AJAX。但可以用 AJAX 手法製作 toolTips 和 Tab。

所以,許多人認為:凡是畫面可以很炫的變化,就被稱為 AJAX,好吧,來看看 ExtJS

ExtJS

例如說其中的樹狀目錄結構吧,如果內容要隨多人操作隨時增刪內容時,就需要透過非同步及時取得最新資料,這時,我們可以說「用 AJAX 方法製作的樹狀目錄」,如果你要簡稱「AJAX 的樹狀目錄」我也不反對。

而幾乎每個 Javascript 套件中,都有拖拉放這個設計,在 Web AP 的使用上,如果能加上拖曳功能,就會很接近真正 AP,所以幾乎每個套件都有這個物件可以套用,連我自己都寫了一個在用,但是又有人說了「AJAX 的拖拉放」,這句話就很瞎了!

再多囉嗦兩句,AJAX 方法還沒成為實際時,toolTips 早就能處理了,當初叫作 dynamicHTML,就簡單使用 Javascript + CSS (骨子裡是 DOM),所以 toolTips 可以包含 AJAX 來使 toolsTips 的內容更靈活。

現階段 AJAX 不能達成的內容

AJAX 的特色之一是能在背景中默默作業,但不是能在背景中默默作業的都叫 AJAX,正如手機的特色之一是能撥打電話,但不是所有能撥打電話的都叫手機,這樣各位明白了吧!

現階段 AJAX 一定不能完成的工作是「上傳」,如果你有經驗,一定知道你不能為表單中 file 欄位進行預設值的動作,為什麼?如果可以的話,意味著我可以製作一個網頁,讓你一連上來後,就自動上傳某些檔案到我的主機。

第二個,AJAX 和主機之間的溝通,無論使用 GET 或 POST ,都沒有辦法搭配二進位編碼模式(multipart/form-data),所以就沒有辦法上傳。

因此,所有號稱「AJAX 上傳」全都是假的!

AJAX 應用迷思

我用蠻多 AJAX 設計,但不是在這裡,在其他系統中,雖然設計時麻煩些,但維護上方便,擴充也快速,重點來了,還不會被搜尋機器人索引起來,因為資料都動態產生,何來索引之有?

但如果我過量把 AJAX 應用在現在這個網站上時,對我有什麼好處?Google 找不到我的內容,有什麼好處?看看我的 Google Analytics:

Analytics

當 Search Engine 找不到我時,這 76% 的流量怎麼來的?你用 eval、setAttribute、autocomplete 這些統計中點閱較高的文章,我的網頁在 Google 搜尋結果都名列前茅,如果我都用 AJAX 來動態產生內容,根本就無法被索引,情況將完全不同。

再來,不換頁刷新向來也是 AJAX 的特色之一,那麼這代表,我把我現在瀏覽的網址 MSN 給你後,你看到的和我不一定相同?

你被 AJAXed 了嗎?

我在高雄替國小中老師上有關 CSS 課程時,有位學員問到一個版面安排問題,我反問他:「你一定要用 CSS 嗎?如果沒有,何不用表格?」,試問,是達成目的重要,還是使用的技巧或方法重要?我不太贊成「邪惡的表格」、「DIV 偏執狂」這種論調,更反對所謂「無障礙」把設計師搞到綁手綁腳的規範(如果顧慮到視障者,圖片要加 alt 屬性舉雙手贊成,但 longdesc 是 for what ?),同樣的,不是不用 AJAX 就遜掉,更不是什麼炫的畫面就是 AJAX 作的,看到分頁,就是 AJAX 作的,看到展開收合,就是 AJAX 作的,看到文字圖片可以在某一個範圍內左右移動,就是 AJAX 作的。

如果你有以上症狀,在醫學上稱為「AJAXed 症候群」!

你被 AJAXed 了嗎?

 

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

manicure   2017/5/4 上午 04:13:00

Great blog here! Also your website rather a lot up fast!
What web host are you using? Can I get your associate hyperlink on your
host? I wish my site loaded up as quickly as yours lol

manicure   2017/4/11 下午 06:30:00

Hello there! I know this is somewhat off topic but I was wondering which blog platform are you using for this website?
I'm getting tired of Wordpress because I've had issues with hackers
and I'm looking at options for another platform.
I would be great if you could point me in the direction of a good platform.

john   2009/6/16 下午 10:39:00

好詳細的說明哦~ 終於有懂了~^^

豆沙包   2009/6/10 上午 10:13:00

大大好哦~~..
如果沒記得..之前的版面..是蠟筆小新的底圖..對嗎@@??..

很感謝大大的分享唷~~..從以前的ASP問題..一直到後來的DIV 定位的問題..都超感謝大大的~..

看到大家分享的內容..想到很久以前..常聽到設計師在討論"PhotoShop vs PhotoImpact" or "Mac vs PC"

a..coding了六年..突然覺得..
剛開始學習→先求有..再求好..
一直到現在→用的炫..不如用的巧..

p.s table排版..我覺得也是ok的啦~..不過..之前有看過一篇文章..一個頁面的圖片..如果遇到太多的table包table..會出現頁面一次Loading完..才會全部顯示的動作..而不是瀏覽器讀出即區塊顯示唷~..

我非常贊成   2009/5/20 下午 02:12:00

我也會用table來排版,就算是我們以前公司專門寫無障礙網站,為了網站大致上的版面不要亂跑,照樣用table,只要不寫summary 或者寫"排版專用"就行了,只能怪css自己,不同瀏覽器呈現的畫面會有差異,大家遇到最可怕的應該就是IE6和IE7對於CSS設定的寬度問題,竟然在IE7正常,IE6卻跑到下面去了,究竟還要用多少的瀏覽器測試啊??這不是令人瘋狂嗎?所以用TABLE沒什麼不好啊,我才不相信會慢到什麼程度,好用就用,別被太多教條綁住了喔 http://www.code-club.idv.tw/index.php 開發者俱樂部 (不是我的網站,希望別再有人誤會了!!)

小葉   2009/1/28 上午 08:52:00

其實tooltip不用javascript單純用css也可以完成,在這之前我是用jauery的tooltip來實現的,效率會變慢倒是不會很明顯,但基于我的網站是用者網速較慢,javascript(jquery tooltip)的5kb跟css的不到1kb相差真的很大==
其實在我的想法里javascript能不用就真的盡量不要用,到真的需要時候才用,但是我偶爾也會掉入ajax很炫的迷思里。

至于「邪惡的表格」、「DIV 偏執狂」,我是的,表格我覺得有他的用途在,但不是用來排版,而且用表格使到代碼變到很長,我試過把系所學長做的網頁(用表格排版的)改成css+div,從11kb變成6kb,由此可見css的威力,設計網頁最終的目的是要讓使用者更好用,既然減少代碼能加快等待時間,何樂而不為呢?

卜維丰   2008/12/15 上午 03:52:00

lithatog, 很高興看到你的分享, 也很感謝你完整讀完這篇落落長的文章

你的一句 "stick to old tech" 是讓我深思最久的一句話, 尤其每次落筆想批評別人時

其實還有些話也想聊聊, 不過, 近來因私務的關係, 心思都不在這方面, 所以連這回覆也都晚了, 見諒

lithatog   2008/12/4 下午 07:43:00

沒有要筆戰的意思, 純粹分享一些觀點。


1) 誠然XMLHttpRequest是個ajax利器, 但也是有不用XMLHttpRequest的ajax方法。

2) ajax upload可以借用form建立的multipart/form-data跟onComplete事件達成。

3) 「不刷新(reload)網頁」=「網址(url)不會轉變」? 這種誤解可能是出於你太久沒有複習"URL"的定義。

4) 用筆在紙上畫一個表格, 目的是填寫符合表格性質的內容。在MS Word拉一個table出來, 目的也如紙上做的一樣, 而不是為了排版。為什麼在HTML上, 你的table根本不是在盛載符合相關性質的東西?

過去html排版沒有很好的標準, 用table來排版是沒辦法中的辦法。我不談論現在的是不是夠好, 但最少在全世界webdeveloper軟鑽硬磨之下, css的使用已經日漸成熟。(那一個html/xhtml標準有硬性要求longdesc? 而且關css什麼事?)

「個人喜好自由」「反正是自己的project」幾乎是無敵的借口。那是足以支持你用不適合的容器去盛載內容的理由, 還是你打算這樣說服自己合理地stick to old tech?

5) 不單是ajax, 任何事情/東西濫用了都是不好的事。你應該要有能力去判斷是不是需要買某件衣服/買某個股票/使用某個技術, 而不是"因為大家都這樣做"。

P.S.) 有點替那位高雄替國小中老師難過。我不是想說CSS是否必要, 而是他當刻絕大部份是被你的"身份"而非你的"道理"壓倒。

卜維丰   2008/11/28 下午 07:04:00

宇夜,

採用何種技術,看規劃,我最近在輔導一個大型專案,全新的內容,這時就涉到用什麼技術? .NET ? php ? 這有不同考量點,唯一無法列入考慮的,就是比較出「那一個好」。

有些作業,我需要有效率,我把 AJAX 拿來當分段載入的工具,這是我的考~~^^

宇夜   2008/11/17 上午 11:23:00

卜大
原本搞不清ajax 是什麼,經你一說就很清楚了,我可以把ajax當作是一種技術的組合集,ajax可以使用javascript,css…等功能作頁面處理,使用者需求處理,再使用XMLHttpRequest得到資料回傳頁面。
感覺上跟一般的傳統網頁似乎有所不同,但是實際上本質是一樣的,傳統網頁是直接傳送[整個]網頁資料及需求,而ajax僅是將需要處理的[部份]網頁資料傳送至server.
一個是完全處理,一個是部份處理,在本質上都是一樣的東西,只是處理起來的效果不同。
即然本質一樣,只要使用者、設計者方使即可,何需拘泥何種技術呢?



卜維丰   2008/9/1 下午 01:52:00

小余, 我倒是不認為 AJAX 有所謂版本問題,可能你所謂的版本, 是各種 toolkit, 用一套自己習慣的就好

如果說應用在實務的系統上, 有些副程式寫好, 重覆套用, 這和用 toolkit 差不多, 例如我一定有送出表單, 讀回表單這種動作

那如果是用在「炫」這個環節, 我會強烈建議用現成的 toolkit 去套, 維護上就容易多了

卜維丰   2008/9/1 下午 01:49:00

里克威斯特, 應該說 VBScript 在 IE 5.x 的時代, 就能設計和執行 AJAX 效果了, 畢竟 XMLHTTP 物件的初始, 就是以 ActiveX 型式存在

小余   2008/9/1 下午 01:15:00

首先我是個網頁開發者

我覺得 ajax 在除錯上面,還有很大的問題

效果很炫,表示你要維護更累

使用者要的是輕鬆使用資料內容

ajax 版本太多

你寫好了,下次要維護忘了,或是別人要維護,都是很頭痛的問題




里克威斯特   2008/9/1 上午 10:05:00

VBScript 也可以應用一些Ajax的功能,我們公司部份後台系統有用到這樣的東西, 不過當然要IE才能瀏覽~

CJ Cat   2008/8/31 上午 10:56:00

我也超不認同「邪惡的表格」、「DIV 偏執狂」的...他們真的很煩
明明是我自己的project,看到我用表格還是跟我用高高在上的語氣說「哎唷...都什麼時代了,還在用表格」

Jelly   2008/8/31 上午 01:36:00

宣佈戒嚴吧
隨時筆戰狀態

果凍   2008/8/31 上午 01:35:00

寫的真詳細
不過我猜反對的很多 = =

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: