Ajax 作業心得筆記

這學期上了一門 Web 2.0 的課，這個禮拜寫了兩份作業，收穫頗多。

• 第一份是助教寫了個網頁，但是 CSS 的部份請同學自己 layout 出來。助教有把作好的樣子存成圖檔，然後要做成圖檔的樣子。
• 第二份是把第一份作業加入 ajax 的部份，讓留言版可以使用。使用者可以選擇顯示圖片，但是圖片選好以後要可以立刻預覽。所有動作都不能換頁。

此外還有一個要求，就是在 Firefox 3.0.7 和 IE 7 看起來要一樣，以及不能使用 table layout。

自從大學以後我就沒再特別深入 Web 程式設計，我前些日子做的網頁還是用 table 去排版，我真是石器時代的人呀。至於 javascript ，雖然以前有玩過，但也沒有玩的很精通，更不用說 ajax 了。總之對於 Web 2.0 AJAX 技術方面，我還是個新手。

幸好有 Google。(古人沒 google 到底是怎麼寫程式的? 個個神人呀!!!!!)

CSS 最麻煩的地方就是圖層的控制，如果把 position 設為 relative 和 absolute 就會往上提升一個圖層，然後位置會參考父層有設定 position 為 relative 和 absolute 的圖層，如果都沒有就會參考 body 層。此外 clear:both 可以清除 position 和 float 的設定。(感謝學弟)

AJAX 最麻煩的地方就是圖片預覽的部份。在 Input File 上，IE 可以取得檔案的完整路徑，Firefox 基於安全理由只給檔名，所以若要在兩種瀏覽器上都可以使用勢必要將圖片上傳到伺服器端然後回傳圖片網址。在 submit 的時候如果不指定 target 的話，原本的網頁一定會 refresh，於是就用 iframe 作為 target ，然後設定 Timer 過一點小時間去讀資料更新畫面 (這邊還沒想到更好的辦法)。

在寫 AJAX 得時候，為了得到更好的結果，javascript 一直改進一直增加一直變肥，簡直是 javascript 加很大~~加不用錢~~~~。現在的網頁這麼炫麗特效這麼多，javascript 的量肯定更恐怖，難怪我的 u100 Netbook 開網頁越來越慢，有的時候簡直像是當機一動也不動， Firefox 本身又吃資源，然後就要等個 30 秒讓 CPU 慢慢跑......(翻桌)

此外我更佩服 GMail 的附加檔案了，還有上傳進度條，配合這麼完美到底怎麼做的...慢慢刻我大概要刻到老死吧.....

要 寫留言板勢必要用到資料庫，趁這個時候摸了一下聽聞很久的 SQLite，在 Debian lenny 上只要裝 php5-sqlite 套件就好了。SQLite 版本號是 2.8.x ，所以不支援 BLOG 格式(?)，因為天天趕作業趕論文都早上四五點睡，肝爆很大~~爆不用錢~~~~為了避免意外，我把圖片利用 php 的 base64_encode() 把圖片編成 base64 MIMEtype 文字再存進資料庫(前面再加上 MIME type + "\n")，等需要圖片的時候再 decode dump 回去即可。

然後這次文字編輯器有用過 Dreamwaver + sftp，不錯用，只是每次開啟它都會忘記密碼很健忘。然後趁這個機會又學了一下 VIM (原本我是用 joe)。

• :sp [filename] 橫切螢幕
• :vs [filename] 直切螢幕
• :shell 回到 shell 下做事
• Ctrl-W w 在切割的視窗中循環切換
• Ctrl-W hjkl 在切割的視窗中切換
• Ctrl-W q 關閉該視窗
  

最後唯一沒有玩的就是 jQuery ，因為我想完整的把 AJAX 中 javascript 的部份好好走過一遍，不想套用其他 library，所以這次沒機會啦！下次有機會再玩:p

哇...沒想到兩個作業作了這麼多事情，學這麼多東西真好。