Google Chrome beta

不來寫一下說不過去XD 最近正紅的玩意。

簡單說這個 Google Chrome (Google 瀏覽器)是Google釋出的開放原始碼軟體，核心採用 WebKit，另外 JavaScript 虛擬機器採用自行開發的 V8 引擎，可以提升 JavaScript 的執行速度。另外也同捆了 Google Gears 這個套件，可以讓 Web 應用程式在離線下依然能動作並儲存一些資料的功能。

他主要的獨特設計在於一個頁籤是一個 Process 的設計，加上自身的工作管理員就會有n+1個行程。另外嵌在網頁內的 Plug-ins 如 Flash 等執行時也會獨立成一個行程，避免在執行時發生錯誤把整個瀏覽器都給關閉了。這樣的設計不會影響其他行程，缺點是過多的行程吃的 CPU 跟記憶體十分可觀。

另外說的很好聽的「無痕式視窗」其實就是不留下本機紀錄的設計罷了，Trace Cookie 等東西要抓你來訪過網站的紀錄還是可以的，簡單說他的無痕是著重在客戶端使用者這方面的，可能拿來上一些エロ網站不錯用？怕被人家抓包的時候就用這個模式來瀏覽，不過我是傾向於瀏覽完畢手動清除歷史紀錄、Cookie 及快取，反正現在都內建一個按鈕輕鬆搞定。

V8 引擎值得大書特書。許多網站都對其作過諸如 SunSpider 的 JavaScript Benchmark，速度還比 Opera 9.52、Firefox 3.01 和 Safari 3.1.2 (w/ WebKit-r35986) 快許多。不過 Fx 最近有個新武器 TraceMonkey，不知道可否追上 V8？另外系出同源的 Apple Safari 不知有沒有機會享受 Google 的開發成果，將此 V8 引擎的技術編回 WebKit 造福自由社群。

最後預設的中文字型有點醜，Safari 的字型圓滑效果十分棒結果它竟然沒有得到半點好處。設定對於進階使用者也太過簡單了，至少留下 about:config 這種底層設定供玩家 hacking。不過以一般使用者來說，簡單好上手又清爽，應該是不錯的選擇。不過想要以此撼動 IE 帝國的占有率，對於那些無知的愚民們大概也無關痛癢，反正點兩下 e 圖示就能上網，根本就不會想換了。倒有可能跟既有的 Firefox, Opera 跟 Safari 使用者產生排擠現象，搶占這些本來就不多的比例。但我個人認為 Firefox 獨特的擴充自訂性是其他瀏覽器難以取代的，沒有滑鼠手勢或強大的分頁管理就跟斷了右手一樣難以上網，你能想像嗎？

假如少了 Google Gears，我覺得 Google Chrome 就只是另一種新設計的 WebKit 核心瀏覽器罷了。的確他許多的設計不錯 (一頁一行程、V8 Engine)，但是少了 Gears 帶來的殺手級離線 Web 應用程式支援就變的一般。我了解 Google 想利用這個自訂的瀏覽器達成他自己的完美 Web 應用程式支援，但目前還看不出有什麼必須使用它的理由，我用 Firefox 也同樣可以看 GMail，並沒有因為使用 Chrome 就變得方便或功能增加，以前微軟的 MSN Explorer 就對自家服務整合的非常徹底且非常方便。當然 Google 可能只是想為未來的 RIA 豐富網路程式作一個理想運作平台而不僅僅為自身著想，我可能看到了他的目標，但我認為這樣還不太足夠就是了。現在只靠 Gears 還不足以有大突進，還是要看未來更多技術定案 (HTML 5) 並直接內建 (JavaScript Libraries) 支援這樣才有進化的感覺吧。

＊本文使用Google Chrome撰寫。

---

09/04 追記:

Google Chrome 開源碼庫 Chromium (鉻元素) 及開放社群已經成立 (http://www.chromium.org/)，另外還有 Nightly Build 可以嘗鮮，不過目前的程式碼十分混亂，還是等官方進一步公告開發進度再說吧。看來未來可以期待社群版 Chromium Build了。(官方釋出版才能用 Google Chrome，非官方編譯版只能用 Chromium 當名字)

另外看到有人提出 Chrome 跟 V8 一詞其實分別代表傳統美國大車的外觀跟引擎 (see: http://fred.ipod.to/blog/?post;1656#c4)，能發現這點實在不簡單。

AJAX 上一頁問題 Part.2

沒想到才貼出幾小時就有迴響，感覺還不錯。昨日研究了一些函式庫後，發現其實要修補這個上一頁問題也十分容易。但坊間很多函式庫都是跟什麼大函式庫綁在一起，有殺雞用牛刀的感覺。或有的雖然不是綁在函式庫上，但是本體又大又難懂。直到真正懂了原理後，自己能作出剛好夠用的函式，處理範圍就只有歷史物件，其他的交給你自己吧！

再更詳細的談一下處理 AJAX Backward / Forward 上(下)一頁問題的關鍵：

1. 因為使用 AJAX 會造成實質上網頁沒有改位置 (location.href)，因此傳統的瀏覽器歷史並無法作用。但是這時候如果改變錨點 (location.hash)，卻能使 Firefox / Opera 瀏覽器的瀏覽器歷史產生改變，IE 比較奇怪，單純改變錨點是不會改動到瀏覽器歷史，不過如果有 iframe 內嵌頁框輔助，以它的頁面改變來使瀏覽器的歷史物件改變，卻能成功。因此我們可以知道以錨點或 iframe 來模擬傳統改變頁面位置的做法，進而使瀏覽器歷史又活了起來。

2. 活了之後還是沒有用。你發現雖然上一頁可以按了，但按了卻也沒效果。因為以 DOM 改變頁面元素的做法，瀏覽器歷史不會幫你還原，而傳統的頁面更換，瀏覽器卻能幫你更改頁面位置。也就是說我們只成功了一半。成功哪邊呢？瀏覽器歷史的再啟用 (Reactivate)。仔細看可以發現，按了上一頁按鈕後，頁面位置 / iframe 頁面的錨點是有改變的，假如說有個 onhashchange 事件，我們就能捕捉當 index.htm#play -> index.htm#stop 的改變時，能夠做點動作。方法是 setInterval ，以某個檢查器每隔一段時間偵測錨點改變沒，當一改變即觸動我們所謂的 onhashchange 事件。

3. 有了我們需要的 onhashchange 這種事件後，只需要在這時用一個控制函式判斷目前錨點是什麼，就可以進行對應內容。例如 #play 可能是開啟什麼資源印出來， #stop 就是把印出來的東西清掉。所有的動作全利用這個控制函式即可。連結只需要作改變錨點 / iframe頁面錨點的動作就可以很輕鬆了。

4. 來談談讓 IE 怎麼以 iframe 模擬吧。以前的做法是讓 iframe 的 src 改變，例如說 blank.htm?play -> blank.htm?stop，最近的好方法改成使用 IE 的密技，也就是打開 iframe 文件物件再關閉，這樣可以產生一個虛頁面 (頁面位置根本不存在，純為臨時創立)，再改變這個頁面的 Hash 值當作記錄就可以了。當要再改變時，再開一次文件物件、關閉、設定錨點，IE 會以為頁面位置改變了，於是瀏覽器記錄就加了一筆。而按上一頁按鈕之時，錨點就會改變，成功模擬出我們要的效果。

5. 其實用這個方法又順便解決了 AJAX 沒有永久連結的設計，因為是 DOM 改變頁面元素，所以預設不會有一個 URL 資源對應目前頁面的狀態。用了 Hash 後就能成功解決。只要在頁面一載入之時把目前頁面的 Hash 丟給 3. 提到的控制函式處理，不就得了？所以 onhashchange 執行時機有二 (1. 頁面 Hash 因瀏覽器上一頁或操作而改變時 2.一開始進入頁面網址有添附 Hash 時)
---
這裡有一個簡單的範例，大家可以試試：pHistory
原始碼應該很好懂，其中註冊歷史 (pHistory.register) 是給 IE 暗中去改變 iframe 用的。關鍵就在檢查器而已。

這個範例還不支援 Safari，因為其行為較為特殊，手上也沒樣本可以觀察。

AJAX 上一頁問題

最近仍然在研究 PMC2 的框架發展，話說明明用想的就很簡單，用作的卻老是做不出來。也許該像捏黏土一樣，先捏出整個外觀再慢慢修細比較好吧，一直想把某一部份搞完美了才進行下一部分，莫怪乎進度一直快不起來。 (其實也沒有具體的時程表啦)

今日來談使用 AJAX 開發網路應用程式會發生的問題：上一頁問題。其實這個問題早被談爛了，而網路上也不少解決方案，但是我為啥還要搬出來談？我自己對所謂的 Framework 其實是不很能習慣，總覺得自己寫出來的東西才能最能貼近我的需要，也因此別人用 Prototype、 jQuery 幾步驟就完成的東西，我可能要搞很久才能實作出來。

回到「上一頁」問題。AJAX 即時取得遠端資料後，即排版利用 DOM 插入於網頁之中，但頁面內容已改變。假如此一改變是像回應模式、詳細列表一類的，當使用者看完後想回到之前的頁面，卻發現上一頁沒有辦法作用，導覽功能完全被打亂了，於是乎容易造成迷失的現象。另一個有點關聯的是這些回應模式、詳細列表需要以事件驅動，使用者無法直接連往某些位置就看到，可能需要再動動滑鼠點幾下才能看到他想要的結果，如果這些頁面能夠以一個唯一的 URL 資源連結，例如 index/list 可能就是詳細列表，這樣也能讓導覽功能變得較為親和。(延伸： Taiwan.CNET.com AJAX的七項致命原罪)

一個好的 AJAX Web Application 應該要讓使用者以習慣的導覽功能來使用，所以這還是不可忽視。目前解決「上一頁」問題的方法已大致底定，統整後歸納如下：

視瀏覽器而定，像 IE 就需要另外一個 iframe 來幫助記憶瀏覽記錄，而使瀏覽器的瀏覽記錄能夠被我們所控制的關鍵是錨點 (document.location.hash) 值，這個值一旦變動，瀏覽器的瀏覽記錄便會增加記錄。但這在 IE 是例外，但如果以 iframe 輔助並改變其內頁面的 Hash 值，瀏覽器的記錄又有用了。

能操作瀏覽紀錄後，接著我們需要模擬一個 window.onback() (目前瀏覽器當然沒有這個事件，希望日後有) 偵測是否按下上一頁按鈕。很遺憾的前面說過目前沒有按下上一頁按鍵事件可以用，而頁面的 onload 又只適用於初次載入 (也就是說後續使用 DOM 修改頁面、更動 Hash 值都不會再觸發 onload 事件)。所以我們需要設一個 Listener，定期偵測瀏覽記錄記載的的 Hash 改了沒。可用的方法就是 setInterval 定期執行檢查 (例如每 100 毫秒)，當瀏覽記錄的 Hash 變了 (比方說從 index.htm => index.htm#list) 就是 window.onback() 模擬事件的執行時機。

最後，在我們做的這個 onback 事件被驅動之時，需要作一個控制函式，利用目前頁面的 Hash 完成某些特定動作。例如上面的 index.htm -> index.htm#list，抓取目前的 document.location.hash (=#list)，並執行對應的動作 (如 JavaScript: GetList())，這樣不但可以模擬出上一頁效果，也可以利用 index.htm#list 這個 URL 資源直接連結到顯示詳細列表的功能了。

要說一下的是，最後提到的控制函式類似中央集權，所有的 AJAX 相關操作通通給他掌權，那觸動的超連結或按鈕只需想辦法改變瀏覽記錄的 Hash 即可 (直接連結至錨點 / 修改 iframe 錨點)，例如 <a href="#list" rel="ajaxlink" onclick="setHistory(this.href.replace(/^.*#/, ''));"> List </a>。如果嫌每個連結都要加入修改 iframe Hash 事件太煩，可以利用 window.onload 搭配超連結尋找特定 rel 值標記來辨識各連結物件並動態增加 onclick 事件。

值得一提的是以往的舊方法需要 iframe 連結至一個 blank.htm 並傳遞參數以記錄相關資訊，現在的做法多直接把 iframe 當成一個畫布般，對其初始化後直接修改頁面 Hash。方法如下：

var iframe = document.getElementById('ieHistory').contentWindow.document;
iframe.open(); iframe.close();

只需開啟文件後再關閉即達成初始化動作，就可以當作一般網頁自由修改 Hash 值而不必再用一個頁面來模擬。
---
最後，我嘗試一下 jQuery.history 的功能，幫這個頁面的回應模式加上了上一頁模擬，如果你按了[回應]觀看文章全文及回應後，可以再按瀏覽器上一頁回到文章瀏覽模式。

AJAX + DOM Based Blog Interface

突然下定決心將這邊的樣版又大改了一番，改的是核心。
現在沒開JavaScript瀏覽這邊應該是很有問題了，不再是「對您的瀏覽及貼文應無巨大影響」。
基本上這次修改將JavaScript外部檔案做個合併及修改，另外將頁面以DOM方式呈現，免重新整理。
這麼一來瀏覽器的歷史問題就會出現了，現在先這樣，還很多能修正。

預設是將所有討論串印出來。按下回應後會隱藏其他討論串只留需要的，
然後顯示出隱藏起來的回應表單，將隱藏的回應目標參數更改，以正常對應回應文章。
另外利用 XMLHttpRequest 要求 xxx.html 內的特定回應區塊，直接截過來輸出。
所以 xxx.html 直接看很難看，也很不方便 (沒有回應框)

當個實驗吧，未來的 Pixmicat!2 (暫定) 的 DOM 運用方式就從這裡開始思考了。

實作概念：

將每篇討論串作成DIV區塊，而每個區塊又留一個顯示回應的DIV區塊。
<div id="Thread001">
...
<div id="Res001"></div>
</div>

而按下[回應]時將其他id是Thread的隱藏起來，只剩下這篇，再讀取回應資料塞到Res001內。
當按下[回到版面]時將剛才隱藏的其他Thread再度顯示。
簡單說起來就是區塊改變內容和隱藏，利用DOM做的。

AJAX學習筆記 02

首先是無關於主題的雜談。
選修的Unix作業系統終於教到安裝Linux，而指定的是Fedora Core 5。
其實我本來有玩過Ubuntu Linux，不過後來就沒後續了，這次的FC5我預計11月裝在舊電腦上。
配備是Intel Pentium4 2.0GHz, 768MB RAM, 160GB 硬碟(此為預定，硬碟尚未購入)
其實就是剛換下來的那一套，現在用Core 2 Duo爽的很，自是不太需要那台，作為Linux實驗機也好。

在此之前教授出個作業，題目是請安裝好Fedora Core 5並截圖，
我還沒搞好舊電腦，新電腦也沒預留空間割一塊給它用，乾脆用免錢的MS Virtual PC 2004模擬。
隨手抓一張還要編譯170分鐘的安裝中畫面~_~ (不知道是編譯慢還是模擬慢)

---

寫好了方便(至少對我來說是)的XMLHttpRequestClip物件，一時也不知道要幹嘛，
看到朋友日記的啟發，想到Google Blogger系統的無限可能性，那麼就來玩吧！
如果想看回應還要點進去很麻煩，那就改成點一下秀出來吧。簡單的XMLHTTP + RegExp搭配。
至於制式版面在Blogger幾乎是虛設啊，亂搞都沒關係，一團黏土交給你自己捏！
(雖然有不少提供好的樣版可以用啦)

也就是說這是簡單的應用，以上。

AJAX學習筆記 01

放長假總算有時間玩AJAX了，
簡單來說就是利用JavaScript和XMLHttpRequest進行要求和取得的動作。
說的好像很簡單，實際作起來才發現這要用在那裡？個人網站用到AJAX的地方似乎不多，
大概只能用在留言版、討論區那部份吧。本來想說將頁面存成XML或者是JSON來排版輸出，
不過不如一個簡單頁面實用。 (而且搜尋引擎也比較容易搜尋的到)

今天主要將IE 6以前使用的ActiveXObject和Mozilla, Opera, IE7等原生的XMLHttpRequest整合。
利用var o = new XMLHttpRequestClip(); 就可以方便產生新實體。
想了一下這個實體應該可以重複利用，坊間很多範例每作一次動作生成一個新實體，
感覺有點浪費和佔用資源，於是拜讀了 UGiA.CN 的建一个XMLHttpRequest对象池 文章觀念，
利用陣列存放這些實體，不管是剛使用完的、正在用的，還是還沒生成的。
感覺像社區提供的公物器材一般，人人可用，用完歸還給下一個人使用的觀念。
我稱他為 Clip (彈夾)啦。

再來利用Object的觀念替這個物件加了不少屬性和方法進去，比方說setParameters()，
基本上包裝起來方便用就是了。傳入參數Array可以自動生成查詢字串，還算方便。
最後就是open()和設定Callback函式，我另外自設了一個OnError會跑的函式，可以作多些掌握。

然後把JSON.org提供的parseJSON()加進來，這樣屬於自己的函式就大功告成，可以實驗一番。
主要使用JSON而不用XML是因為XML DOM不太好操作，既然JSON是JavaScript來的，搭配用很方便。

完成了屬於自己的XMLHttpRequestClip()，馬上看看使用方法：

var o = new XMLHttpRequestClip('./trip.php');
var arrParams = []; // 欲傳入參數
arrParams['key'] = document.getElementById('oTripcode').value;
o.setParameters('POST', arrParams); // 設定送出方式及參數
o.open(ShowTrip, ShowError); // 要求後同時設定回叫及捕捉錯誤函式

其中function ShowTrip(txt)就是要求成功後會回叫的函式，
我寫好會自動傳txt參數，也就是objxmlhttp.responseText，這樣就可以直接取用。
如果要求失敗(例如404 Not Found)，則會呼叫function ShowError()，簡單秀出提示動作失敗。

拿來做個簡單的範例，這是2ch Trip線上即時計算：Online Tripper
此範例同時示範Clip的功效，同時雙線程要求，只會有兩個物件且重複使用。
也將搭配的原始碼包一包好了(10/12更新)：ajax01_tripper.zip

10/12追記：
終於找出IE發神經的地方，因為js檔是UTF-8語系而網頁是Shift-JIS語系 (我用日文語系模式)
因為UTF-8某些字元到了s-jis下看一定會變樣，導致整個JS解析錯誤。
Mozilla Firefox和Opera則會自動判斷的模樣，所以沒問題。