好像冷氣吹太多了
2006-07-27 08:06:05 UTC
給AJAX新手：
在閱讀這篇前，建議先到以下網址閱讀並實作Sun所提供的新手範例。
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
給AJAX老手：
這篇主要目的是在拋磚引玉，吸引高手前來發表心得。Q.Q (為什麼中文資料都是簡體字)
給版主：
我知道這東西比較偏java script，在此希望版主能網開一面，不要浸我水桶啊!
前情提要：一個努力的程式工，在被老闆說頁面呈現太不人性化之後，決定暫時擱下
SCWCD的考試，埋首研究 AJAX。眼看著voucher即將在8/16過期，程式工可以
在最後兩週前完成修改，專心準備考試嗎？ Q.Q"
花了兩天，好不容易摸清了javascript動態頁面對排版所造成的影響之後。順手也把註冊
頁面用上了最近頗流行的密碼強度偵測，雖然跟 AJAX無關，但也算是為自己上了一門
javascript課程。
緊接著，今天繼續嘗試著把原本兩個獨立的頁面利用 AJAX做整合。架構簡單來說，就是
原本兩個兩個獨立的資料庫表單，以及一個跟兩個表單互有關聯的表單的處理。第三個表
單原本是利用獨立的頁面做新增刪除的動作，但是為了避免讓使用者因換頁而造成錯亂的
情形，而要將之合併於處理第二個表單的頁面之中。
所呈現的方式說來很單純，就是一般我們常在side bar選單所看到的隱藏選項。只是這些
選項不是預先寫好在網頁中，而是即時的將資料庫第三個表單的內容呈現出來。這裡我自
認比較關鍵的部份分為Server Side的 XML回應以及 Script Side的處理方法，舉例如下
：
Server Side XML Response:
DB DATA -
name age hight
父親 60 165
母親 58 158
妹妹 18 160
轉換成 XML格式 -
<root>
<people name="父親" age="60" hight="165"/>
<people name="母親" age="58" hight="158"/>
<people name="妹妹" age="18" hight="160"/>
<root>
從資料庫所得到的資料，可以用這種簡單的 XML格式回應給瀏覽器做處理。
Script Side 處理方法：
以下範例專注於說明處理回傳的 XML。
首先， 要先取得名為people的元素物件。
var people = req.responseXML.getElementsByTagName("people");
接下來，依物件長度來依序取得每個元素內的屬性值。
for(var i = 0; i < message.length; i++){
var node = people.item(i);
var name = node.getAttribute('name');
var age = node.getAttribute('age');
var hight = node.getAttribute('hight');
}
然後，再依自己的需要將這些值作適當的利用即可。其實，也蠻簡單的，不是嗎？
在最後，要提醒一件事，也許眼尖的人會注意到，那就是「中文」。請切記，要在網路上
傳遞中文資料，千萬別忘了編碼所帶來的影響。像是我的頁面使用UTF-8，但是java
script可不會這麼好心幫我們判斷，所以我們一定要記得加上去，請在處理AJAX需求的
Servlet上加上以下這行：
response.setCharacterEncoding("utf-8");
就是這麼簡單，只要告知XMLHttp採何種編碼即可，AJAX中文內容問題就這樣解決了，
PS. 雖然... 只與Java扯上一點點的邊，不過還是希望有可能在這個版討論這玩意。
--
No Dying Skills, ● - Dame! New tech...
but Lazy Users. .\)
http://hougzou.spaces.msn.com/ _____________ ﹒ ︵ √\ ___________________
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.104.2.239
※ 編輯: hougzou 來自: 59.104.2.239 (07/28 00:06)
在閱讀這篇前，建議先到以下網址閱讀並實作Sun所提供的新手範例。
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
給AJAX老手：
這篇主要目的是在拋磚引玉，吸引高手前來發表心得。Q.Q (為什麼中文資料都是簡體字)
給版主：
我知道這東西比較偏java script，在此希望版主能網開一面，不要浸我水桶啊!
前情提要：一個努力的程式工，在被老闆說頁面呈現太不人性化之後，決定暫時擱下
SCWCD的考試，埋首研究 AJAX。眼看著voucher即將在8/16過期，程式工可以
在最後兩週前完成修改，專心準備考試嗎？ Q.Q"
花了兩天，好不容易摸清了javascript動態頁面對排版所造成的影響之後。順手也把註冊
頁面用上了最近頗流行的密碼強度偵測，雖然跟 AJAX無關，但也算是為自己上了一門
javascript課程。
緊接著，今天繼續嘗試著把原本兩個獨立的頁面利用 AJAX做整合。架構簡單來說，就是
原本兩個兩個獨立的資料庫表單，以及一個跟兩個表單互有關聯的表單的處理。第三個表
單原本是利用獨立的頁面做新增刪除的動作，但是為了避免讓使用者因換頁而造成錯亂的
情形，而要將之合併於處理第二個表單的頁面之中。
所呈現的方式說來很單純，就是一般我們常在side bar選單所看到的隱藏選項。只是這些
選項不是預先寫好在網頁中，而是即時的將資料庫第三個表單的內容呈現出來。這裡我自
認比較關鍵的部份分為Server Side的 XML回應以及 Script Side的處理方法，舉例如下
：
Server Side XML Response:
DB DATA -
name age hight
父親 60 165
母親 58 158
妹妹 18 160
轉換成 XML格式 -
<root>
<people name="父親" age="60" hight="165"/>
<people name="母親" age="58" hight="158"/>
<people name="妹妹" age="18" hight="160"/>
<root>
從資料庫所得到的資料，可以用這種簡單的 XML格式回應給瀏覽器做處理。
Script Side 處理方法：
以下範例專注於說明處理回傳的 XML。
首先， 要先取得名為people的元素物件。
var people = req.responseXML.getElementsByTagName("people");
接下來，依物件長度來依序取得每個元素內的屬性值。
for(var i = 0; i < message.length; i++){
var node = people.item(i);
var name = node.getAttribute('name');
var age = node.getAttribute('age');
var hight = node.getAttribute('hight');
}
然後，再依自己的需要將這些值作適當的利用即可。其實，也蠻簡單的，不是嗎？
在最後，要提醒一件事，也許眼尖的人會注意到，那就是「中文」。請切記，要在網路上
傳遞中文資料，千萬別忘了編碼所帶來的影響。像是我的頁面使用UTF-8，但是java
script可不會這麼好心幫我們判斷，所以我們一定要記得加上去，請在處理AJAX需求的
Servlet上加上以下這行：
response.setCharacterEncoding("utf-8");
就是這麼簡單，只要告知XMLHttp採何種編碼即可，AJAX中文內容問題就這樣解決了，
PS. 雖然... 只與Java扯上一點點的邊，不過還是希望有可能在這個版討論這玩意。
--
No Dying Skills, ● - Dame! New tech...
but Lazy Users. .\)
http://hougzou.spaces.msn.com/ _____________ ﹒ ︵ √\ ___________________
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.104.2.239
※ 編輯: hougzou 來自: 59.104.2.239 (07/28 00:06)