以下為本站文章分類清單

  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 了嗎?

 

 

以下為文章回應區

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

foot pain   2017/6/21 下午 02:16:00

My brother recommended I would possibly like this web site.
He was once entirely right. This put up truly made my day. You cann't believe just how a lot time I had spent for this info!
Thank you!

veliagacek.blogas.lt   2017/6/16 下午 11:07:00

Hi there Dear, are you really visiting this web page on a regular basis, if so afterward you will absolutely obtain nice knowledge.

   2017/6/11 上午 05:23:00

Hello There. I found your blog using msn. This is an extremely well written article.
I'll be sure to bookmark it and return to read more of your useful info.

Thanks for the post. I will certainly comeback.

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

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

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