作者hougzou (好像冷气吹太多了)
看板java
标题[分享] AJAX 初体验
时间Fri Jul 28 00:05:13 2006
给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)