iT邦幫忙

DAY 13
4

有意思的互動網站--別懷疑就是要你來鬧我一下系列 第 14

Web2.0 相關技術 -技術架構模型

  • 分享至 

  • xImage
  •  

Web2.0之前說過只是一個概念,但概念性的背後推手就是技術,就觀察來說目前現行的Web2.0的相關技術,可以說是非主流的大團體
兩三年前的Google、維基百科、P2P軟體開始的,反而是近年開始許多大陣營,如Microsoft、Java EE平台、Adobe Macromedia開始投入這方面的計劃。在以往大陣營的舊式做法都是在瀏覽器端內嵌(plug-in)的方式,雖然可以達到互動性,但缺點也不少。在微軟方面以往在瀏覽器技術使用ActiveX元件,但對於非IE使用者即不能使用了,而且ActiveX元件的信任原則也成為病毒流傳的方式之一。至於Java陣營的舊式互動技術是Java Applet,這個東西我也寫過,也是必須安裝JVM在瀏覽器裡,而且使用前必須再經過Local端解析,緩慢是一大缺點。至於Macromedia的Flash技術,在互動上非常精製,但在瀏覽器呈現瀏覽區塊固定,非Real Text文字上呈現亦有不便之處,複製貼上功能就是不行使用了,再者與伺服器間的參數傳遞交換較難,開發過程更是一大痛苦。

在非主流陣營裡,受限於制式的W3C規範及"瀏覽器不是我家的"要克服互動性問題,是一大挑戰,但沒想到這樣的發展卻是一大革命性的挑戰,Ajax架構相應而生,如今,相繼的是各主流平台都回頭取經,並設法模組化Ajax開發過程,發展出相適應的開發套件,Ajax嚴然成為一大顯學了。 Ajax技術是如何?Ajax是個混合性名詞:非同步(asynchronous)+Javascript+XML。接下來我們將做仔細介紹。

資料交換-XML 與Web Service
What:資料。內容當然是網站最重要的東西。XML是個公製發展,極為重要,亦是Ajax技術的要件。我接觸XML是在2002年左右,它是可擴充性標籤的網頁語法,好處是可以自訂屬性標籤,如圖片也視為一種資料型別來處理,而像是RSS資料交換,即為一種XML檔案下載到客戶端後造標籤解析器後做RSS閱讀的呈現,不同的解析器可以有不同的呈現。

XML在發展Web Service技術是功不可沒的,Web Service即為字面上的意思是網路服務,亦是在XML發展同步相應而生的應用。Web Service想當年可是推動起來說會「改變世界」的一種應用方式……然…目前為此…。而在此呈清的是Web Service在Web2.0亦仍扮演之前的相同角色,就是提供網路服務,是伺服器技術的部分,而Ajax用到XML技術就相當於使用者介面控制的角色了。發展架構的整合而言,XML可做為Web Service及Ajax資料面整合,要做好Web2.0,Web Service仍不可棄,甚至要做更好的整合。

在Ajax技術中,需要用到XML的部分是XMLHttpRequest,也就是伺服器與瀏覽器的Request、Response使用XML在做傳遞。在舊的Request、Response方式是<Form>標籤中做POST的方式,傳到伺服器再回傳結果頁面的方式,叫做:Do PostBack(重新更換下載頁面)。Ajax的技術能利用XMLHttpRequest及Javascript function實作傳遞事件,這部分必須在網頁實作處理引擎(function call的方式,這部分的javascript相當難寫),一方面做到資料傳遞與取得狀態的控制及時間等待的非同步處理(接下來會介紹),而伺服器也要做一個對應的引擎利用CallBack function做到資料交換(這部分近來有相關伺服器提供處理方案),這有點像在伺服器與瀏覽器中間做一個透明的Pipeline機置。而Web Service若在支援Ajax技術前能做好XML支援呈現,在Ajax實作將帶來助益。

使用者互動技術- 難以處理的Javascript及非同步技術
When:反應時間。之前說到的舊式的瀏覽器與伺服器溝通是以PostBack的方式,而Ajax的CallBack方式可做到事件處理的互動性。為何可以做到這方式?首先要澄清的是,舊式網頁並非相對而言就是所謂的同步技術,只能說舊式網頁的PostBack方式是"要求、等待處理、接收"過程,接下來我們來瞭解何謂非同步技術。

非同步技術在網路工程中,如TCP/IP協定的Three way hand shaking的分割封包、確認接收模式;或是另一個較為實際的例子是你可以在下載電影的同時,將已下載的片段觀看,而不用等待全部的電影下載完後再看。此處講的Ajax的非同步技術是利用了切割處理回傳訊息技術,伺服器端有點像是作業系統中將處理的Process切割成小單元的multithread方式。對於資料傳輸面而言,就像是100筆資料,每次回傳5筆資料至瀏覽器中的分段批次處理的方式,目前的微軟的Altas套件支援的DataGrid處理方式就是如此。再者另一個值得注意的地方是,非等待中的使用者介面元件都仍然保持Active的使用狀態,而回應資料透過Ajax Engine使用Javascript的控制DOM模型的標籤屬性修改CSS或屬性呈現,而這部分又是一大工程啊~有的Web2.0網站還可以做到Portal元件的拖曵動作,如Windows SharePoint Server就是微軟的Portal平台產品,Google的自訂首頁,也有用到高深Javascript的Portal拖曵動作。


結論
如果你是傳統的網頁程式設計師,你曾認為Javascript是無用的東西,有機會可以多磨練Javascript技術,而架構設計師請考量XML的文件支援。要不然…再等一會兒吧~~~微軟的Altas套件、Java陣營的相關Open Source、Macromedia的Flash RIA架構,都要出來了。


上一篇
Web2.0熱潮-2
下一篇
最懂年輕的互動網站 - 優仕網 YouthWant
系列文
有意思的互動網站--別懷疑就是要你來鬧我一下31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
fillano
iT邦超人 1 級 ‧ 2009-10-23 06:30:40

ajax也沒那麼難啦。另外,request跟傳統的request是一樣的,畢竟都是透過http嘛。response一般都支援text與xml兩種格式,而text可以使用json字串,這樣資料剖析會更簡單。

0
fillano
iT邦超人 1 級 ‧ 2009-10-23 06:41:09

同樣的事情,也可以透過Flash來做,使用Flash的好處是可以跨domain。XMLHttpRequest有same origin規則的限制。Flash的程式能力比較強,還可以用來做檔案上傳並顯示上傳進度,這個單靠javascript是做不到的(不是寫不出來,而是讀不到Client的檔案,也沒有讀檔案的功能。我自己就寫過處理multipart/form-data表單的函數,如果直接丟base64編碼的檔案內容給它傳是OK的,但是對於檔案無能為力...)。

0
fillano
iT邦超人 1 級 ‧ 2009-10-24 20:01:00

原來如此。我會回他主要是因為,他所說的技術困難在目前看起來一點困難也沒有,所以我有一些懷疑...

其實前面還有2005年的文章...

我要留言

立即登入留言