你被AJAXed了吗?-卜維丰老师

有几个名词在网路发展过程中,都占有一席之地,我来想想,例如,Portal Site,中文叫入口网站,每个网站都要搞大,五花八门,当时有学者对入口网的定义是必需要提供免费邮箱。 接著,大家談的是eCommerce,中文叫電子商務,一定要有金流,要有物流,是人不是人都要開個網站賣點東西。接着,大家谈的是eCommerce,中文叫电子商务,一定要有金流,要有物流,是人不是人都要开个网站卖点东西。 再接著,開始大談WEB 2.0,這個我就沒有好的中文說明,因為我也很想知道什麼是WEB 2.0。再接着,开始大谈WEB 2.0,这个我就没有好的中文说明,因为我也很想知道什么是WEB 2.0。

那現在談什麼?那现在谈什么? 當然是AJAX 囉!当然是AJAX啰!

然而,AJAX 是夯沒錯,但隨著大量書籍出版後,大部份書籍重點在於如何應用產生效果,動不動就提Google Map 這種不正常發展方向下,又造成了不少人對AJAX 認知上產生了根本錯誤,這些錯誤計有:然而,AJAX是夯没错,但随着大量书籍出版后,大部份书籍重点在于如何应用产生效果,动不动就提Google Map这种不正常发展方向下,又造成了不少人对AJAX认知上产生了根本错误,这些错误计有:

AJAX 是一種新技術 AJAX是一种新技术

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

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

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

所以,如果有人說「一個不使用XMLHttpRequest 的AJAX 方法」,這種講法不就是相當於請老闆給你一碗「不要酸的酸辣湯」,還是「蚵丫煎不要加蚵丫」?所以,如果有人说「一个不使用XMLHttpRequest的AJAX方法」,这种讲法不就是相当于请老板给你一碗「不要酸的酸辣汤」,还是「蚵丫煎不要加蚵丫」?

AJAX=強化的、延伸的Javascript AJAX=强化的、延伸的Javascript

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

Defining Ajax Defining Ajax

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

standards-based presentation using XHTML and CSS; standards-based presentation using XHTML and CSS;

dynamic display and interaction using the Document Object Model ; dynamic display and interaction using the Document Object Model ;

data interchange and manipulation using XML and XSLT ; data interchange and manipulation using XML and XSLT ;

asynchronous data retrieval using XMLHttpRequest ; asynchronous data retrieval using XMLHttpRequest ;

and JavaScript binding everything together. and JavaScript binding everything together.

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

所以,Javascript 在AJAX 中的角色是「串接所有技術所使用的工具」,如果VBScirpt 也有辦法執行相同動作,也不妨定義一個AVBAX( A synchronous VB Script A nd X ML) 。所以,Javascript在AJAX中的角色是「串接所有技术所使用的工具」,如果VBScirpt也有办法执行相同动作,也不妨定义一个AVBAX( A synchronous VB Script A nd X ML) 。

所以,記住,請一定要搞清楚,AJAX 和Javascript 有絕對關聯,但Javascript 是一種語言,一種技術,AJAX 則是一種方法,如果我說「 DOM 是Javascript 的延伸 」你會同意嗎?所以,记住,请一定要搞清楚,AJAX和Javascript有绝对关联,但Javascript是一种语言,一种技术,AJAX则是一种方法,如果我说「 DOM是Javascript的延伸 」你会同意吗?

AJAX=Javascript Framework AJAX=Javascript Framework

在網頁上可以實現非同步的技術後,過去只能在單機上執行的效果再也不是夢想,最簡單直接的,就是autoComplete 這種「手法」。在网页上可以实现非同步的技术后,过去只能在单机上执行的效果再也不是梦想,最简单直接的,就是autoComplete这种「手法」。

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

但這些套件,不乏使用AJAX 來執行,例如我也寫了一個autoComplete的套件,就是很標準用AJAX 方法完成的,但套用時,有些內容我則沒辦法提供給讀者,原因包括大家用的資料庫不同、資料表不同,所以我只能告訴你主機丟回來的XML,必需要符合什麼格式。但这些套件,不乏使用AJAX来执行,例如我也写了一个autoComplete的套件,就是很标准用AJAX方法完成的,但套用时,有些内容我则没办法提供给读者,原因包括大家用的资料库不同、资料表不同,所以我只能告诉你主机丢回来的XML,必需要符合什么格式。

所以,以下這些話:所以,以下这些话:

AJAX 的toolTips AJAX的toolTips

AJAX 的Tab AJAX的Tab

AJAX 上傳 AJAX上传

AJAX 搜尋 AJAX搜寻

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

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

ExtJS

例如說其中的樹狀目錄結構吧,如果內容要隨多人操作隨時增刪內容時,就需要透過非同步及時取得最新資料,這時,我們可以說「用AJAX 方法製作的樹狀目錄」,如果你要簡稱「AJAX 的樹狀目錄」我也不反對。例如说其中的树状目录结构吧,如果内容要随多人操作随时增删内容时,就需要透过非同步及时取得最新资料,这时,我们可以说「用AJAX方法制作的树状目录」,如果你要简称「AJAX的树状目录」我也不反对。


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

再多囉嗦兩句,AJAX 方法還沒成為實際時,toolTips 早就能處理了,當初叫作dynamicHTML,就簡單使用Javascript + CSS (骨子裡是DOM),所以toolTips 可以包含AJAX 來使toolsTips 的內容更靈活。再多啰嗦两句,AJAX方法还没成为实际时,toolTips早就能处理了,当初叫作dynamicHTML,就简单使用Javascript + CSS (骨子里是DOM),所以toolTips可以包含AJAX来使toolsTips的内容更灵活。

現階段AJAX 不能達成的內容现阶段AJAX不能达成的内容

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

現階段AJAX 一定不能完成的工作是「上傳」,如果你有經驗,一定知道你不能為表單中file 欄位進行預設值的動作,為什麼?现阶段AJAX一定不能完成的工作是「上传」,如果你有经验,一定知道你不能为表单中file栏位进行预设值的动作,为什么? 如果可以的話,意味著我可以製作一個網頁,讓你一連上來後,就自動上傳某些檔案到我的主機。如果可以的话,意味着我可以制作一个网页,让你一连上来后,就自动上传某些档案到我的主机。

第二個,AJAX 和主機之間的溝通,無論使用GET 或POST ,都沒有辦法搭配二進位編碼模式(multipart/form-data),所以就沒有辦法上傳。第二个,AJAX和主机之间的沟通,无论使用GET或POST ,都没有办法搭配二进位编码模式(multipart/form-data),所以就没有办法上传。

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

AJAX 應用迷思 AJAX应用迷思

我用蠻多AJAX 設計,但不是在這裡,在其他系統中,雖然設計時麻煩些,但維護上方便,擴充也快速,重點來了,還不會被搜尋機器人索引起來,因為資料都動態產生,何來索引之有?我用蛮多AJAX设计,但不是在这里,在其他系统中,虽然设计时麻烦些,但维护上方便,扩充也快速,重点来了,还不会被搜寻机器人索引起来,因为资料都动态产生,何来索引之有?

但如果我過量把AJAX 應用在現在這個網站上時,對我有什麼好處?但如果我过量把AJAX应用在现在这个网站上时,对我有什么好处? Google 找不到我的內容,有什麼好處? Google找不到我的内容,有什么好处? 看看我的Google Analytics:看看我的Google Analytics:

當Search Engine 找不到我時,這76% 的流量怎麼來的?当Search Engine找不到我时,这76%的流量怎么来的? 你用eval、setAttribute、autocomplete 這些統計中點閱較高的文章,我的網頁在Google 搜尋結果都名列前茅,如果我都用AJAX 來動態產生內容,根本就無法被索引,情況將完全不同。你用eval、setAttribute、autocomplete这些统计中点阅较高的文章,我的网页在Google搜寻结果都名列前茅,如果我都用AJAX来动态产生内容,根本就无法被索引,情况将完全不同。

再來,不換頁刷新向來也是AJAX 的特色之一再来,不换页刷新向来也是AJAX的特色之一 ,那麼這代表,我把我現在瀏覽的網址MSN 給你後,你看到的和我不一定相同? ,那么这代表,我把我现在浏览的网址MSN给你后,你看到的和我不一定相同?

你被AJAXed 了嗎?你被AJAXed了吗?

我在高雄替國小中老師上有關CSS 課程時,有位學員問到一個版面安排問題,我反問他:「你一定要用CSS 嗎?如果沒有,何不用表格?」,試問,是達成目的重要,還是使用的技巧或方法重要?我在高雄替国小中老师上有关CSS课程时,有位学员问到一个版面安排问题,我反问他:「你一定要用CSS吗?如果没有,何不用表格?」,试问,是达成目的重要,还是使用的技巧或方法重要? 我不太贊成「邪惡的表格」、「DIV 偏執狂」這種論調,更反對所謂「無障礙」把設計師搞到綁手綁腳的規範(如果顧慮到視障者,圖片要加alt 屬性舉雙手贊成,但longdesc 是for what ?),同樣的,不是不用AJAX 就遜掉,更不是什麼炫的畫面就是AJAX 作的,看到分頁,就是AJAX 作的,看到展開收合,就是AJAX 作的,看到文字圖片可以在某一個範圍內左右移動,就是AJAX 作的。我不太赞成「邪恶的表格」、「DIV偏执狂」这种论调,更反对所谓「无障碍」把设计师搞到绑手绑脚的规范(如果顾虑到视障者,图片要加alt属性举双手赞成,但longdesc是for what ?),同样的,不是不用AJAX就逊掉,更不是什么炫的画面就是AJAX作的,看到分页,就是AJAX作的,看到展开收合,就是AJAX作的,看到文字图片可以在某一个范围内左右移动,就是AJAX作的。

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

你被AJAXed 了嗎?你被AJAXed了吗?

站点统计