|
|
|
SSO 的实现方式
SSO 的实现方式按照应用系统与Portal Server的交互程度分为三种。需要指出这些SSO的实现方式并没有优略之分，不同的实现方式适应不同的应用环境。解决现实中遇到的不同问题。
1 真单点登陆： 通过SSO entry认证后，应用系统利用SSO API同Portal Server通信，验证用户是否经过认证。新开发的应用系统大多使用这种SSO的实现方式。这种方式需要对应用系统的认证模块进行修改。
2 伪单点登陆：通过SSO entry认证后，应用系统还要自己进行用户的认证。这种方式适用于那些无法修改认证模块的应用系统。我们应用系统的整合采用该方式进行。
3 整合第三方软件的单点登陆：Tarantella和Citrix都是将C/S应用系统转化为Web应用的第三方软件系统。在某些应用环境下，这类软件将发挥其作用。这种SSO实现方式在实施中并不使用，列出这种使用方式主要用来展现Identity Server的扩展性。
loading...
|
|
|
2006-3-22
sso基本概念(转)
1. 什么是sso?
sso-Single Sign-On(单点登录)，顾名思义，就是用户通过一次性验证或叫做一次性"登录（sign-on）"就可以访问每一个应用程序组件, 也就是说，用户随后对受保护资源的存取，将不会导致每一次都要用户提供认证的信息，只需要一次认证即可。
2. weblogic提供的sso
2.1 weblogic支持的J2EE身份验证机制
作为J2EE 相关的应用程序服务器，BEA WebLogic Server支持J2EE 所有必需的身份验证机制。
它们包括：
（1）基本的身份验证：用户的凭证只由基于64位编码保护；
（2）基于表单：凭证不被保护并以纯文本发送；
（3）基于凭证：X.509凭证由用户保管，使用SSL或TSL安全协议来确认用户的身份。
前两种身份验证形式需要使用像SSL或TSL的安全传送来保护脆弱的凭证安全。
2.2 weblogic 自己的身份验证机制
除了J2EE 指定的机制外，通过它的安全基础结构和关联的安全服务提供者，BEA WebLogic Server 经过配置可以支持使用身份验证。使用安全基础结构考虑到了身份验证策略执行的一致性，而不管客户端是浏览器还是应用程序。另外，应用程序不再需要提供自己的Servlet过滤器来完成身份验证。更好的是在不用修改应用程序的情况下就可以更改身份验证机制的类型。举个例子，公司如果想把基本的用户名/密码这种身份验证方法改为更强的身份验证方法，比如标记(token)，只需要简单地为新的身份验证方法实现安全服务提供者 (Security Service Provider)。
3. 我常见的sso
目前，由于我本身工作的限制，我接触的sso都是在web层，其实就是通过程序来实现的（过滤器）,但是如果我们的sso要求跨web层,那么就不能用过滤器了。
Web 层单点登录介绍
随着对Web关注的增长，作为应用程序的用户接口，Web层很快成为最需要SSO出现的地方。在Web层，浏览器的使用者被提示进行应用程序的验证（声明他们的身份）。这个身份被传到应用服务器上以用于验证用户。成功登录的结果是生成一个cookie，它的作用范围是应用服务器驻留的DNS域。然后cookie返回到给向应用程序服务器发送请求的浏览器。默认情况下，当用户退出应用程序或关闭浏览器时，cookie 的生命周期结束。
loading...
|
|
|
2006-3-17
两分钟让你明白什么是ERP
把专业的问题通俗化--
ERP(Enterprise Resource Planning)企业资源计划系统，是指建立在信息技术基础上，以系统化的管理思想，为企业决策层及员工提供决策运行手段的管理平台。
一天中午，丈夫在外给家里打电话：“亲爱的老婆，晚上我想带几个同事回家吃饭可以吗？” (订货意向)
妻子：“当然可以，来几个人，几点来，想吃什么菜？”
丈夫：“6个人，我们7点左右回来，准备些酒、烤鸭、番茄炒蛋、凉菜、蛋花汤……。你看可吗？” (商务沟通)
妻子：“没问题，我会准备好的。” (订单确认)
妻子记录下需要做的菜单 (MPS计划) ，具体要准备的东西：鸭、酒、番茄、鸡蛋、调料…… (BOM物料清单) ，发现需要：1只鸭蛋，5瓶酒，4个鸡蛋…… (BOM展开) ，炒蛋需要6个鸡蛋，蛋花汤需要4个鸡蛋 (共用物料) 。
打开冰箱一看 (库房) ，只剩下2个鸡蛋 (缺料) 。
来到自由市场，妻子：“请问鸡蛋怎么卖？” (采购询价)
小贩：“1个1元，半打5元，1打9.5元。”
妻子：“我只需要8个，但这次买1打。” (经济批量采购)
妻子：“这有一个坏的，换一个。” (验收、退料、换料)
回到家中，准备洗采、切菜、炒菜…… (工艺线路) ，厨房中有燃气灶、微波炉、电饭煲…… (工作中心) 。
妻子发现拨鸭毛最费时间 (瓶颈工序，关键工艺路线) ，用微波炉自己做烤鸭可能来不及 (产能不足) ，于是阅览室在楼下的餐厅里买现成的 (产品委外) 。
下午4点，接到儿子的电话：“妈妈，晚上几个同学想来家里吃饭，你帮忙准备一下。” (紧急订单)
“好的，你们想吃什么，爸爸晚上也有客人，你愿意和他们一起吃吗？”
“菜你看着办吧，但一定要有番茄炒鸡蛋，我们不和大人一起吃，6：30左右回来。” (不能并单处理)
“好的，肯定让你们满意。” (订单确定)
“鸡蛋又不购了，打电话叫小店送来。” (紧急采购)
6：30，一切准备就绪，可烤鸭还没送来，急忙打电话询问：“我是李太，怎么订的烤鸭还不送来？” (采购委外单跟催)
“不好意思，送货的人已经走了，可能是堵车吧，马上就会到的。”
门铃响了。
“李太太，这是您要的烤鸭。请在单上签一个字。” (验收、入库、转应付账款)
6：45，女儿的电话：“妈妈，我想现在带几个朋友回家吃饭可以吗？” (呵呵，又是紧急订购意向，要求现货)
“不行呀，女儿，今天妈已经需要准备两桌饭了，时间实在是来不及，真的非常抱歉，下次早点说，一定给你们准备好。” (哈哈，这就是ERP的使用局限，要有稳定的外部环境，要有一个起码的提前期) 。
…… ……
送走了所有客人，疲惫的妻子坐在沙发上对丈夫说：“亲爱的，现在咱们家请客的频率非常高，应该要买些厨房用品了 (设备采购) ，最好能再雇个小保姆 (连人力资源系统也有缺口了) 。
丈夫：“家里你做主，需要什么你就去办吧。” (通过审核)
妻子：“还有，最近家里花销太大，用你的私房钱来补贴一下，好吗？” (最后就是应收货款的催要)
现在还有人不理解ERP吗？记住，每一个合格的家庭主妇都是生产厂长的有力竞争者。
loading...
|
|
|
2006-3-4
数据容灾备份的等级和技术
容灾备份是通过在异地建立和维护一个备份存储系统，利用地理上的分离来保证系统和数据对灾难性事件的抵御能力。
根据容灾系统对灾难的抵抗程度，可分为数据容灾和应用容灾。数据容灾是指建立一个异地的数据系统，该系统是对本地系统关键应用数据实时复制。当出现灾难时，可由异地系统迅速接替本地系统而保证业务的连续性。应用容灾比数据容灾层次更高，即在异地建立一套完整的、与本地数据系统相当的备份应用系统(可以同本地应用系统互为备份，也可与本地应用系统共同工作)。在灾难出现后，远程应用系统迅速接管或承担本地应用系统的业务运行。
设计一个容灾备份系统，需要考虑多方面的因素，如备份/恢复数据量大小、应用数据中心和备援数据中心之间的距离和数据传输方式、灾难发生时所要求的恢复速度、备援中心的管理及投入资金等。根据这些因素和不同的应用场合，通常可将容灾备份分为四个等级。
第0级:没有备援中心
这一级容灾备份，实际上没有灾难恢复能力，它只在本地进行数据备份，并且被备份的数据只在本地保存，没有送往异地。
第1级:本地磁带备份，异地保存
在本地将关键数据备份，然后送到异地保存。灾难发生后，按预定数据恢复程序恢复系统和数据。这种方案成本低、易于配置。但当数据量增大时，存在存储介质难管理的问题，并且当灾难发生时存在大量数据难以及时恢复的问题。为了解决此问题，灾难发生时，先恢复关键数据，后恢复非关键数据。
第2级:热备份站点备份
在异地建立一个热备份点，通过网络进行数据备份。也就是通过网络以同步或异步方式，把主站点的数据备份到备份站点，备份站点一般只备份数据，不承担业务。当出现灾难时，备份站点接替主站点的业务，从而维护业务运行的连续性。
第3级:活动备援中心
在相隔较远的地方分别建立两个数据中心，它们都处于工作状态，并进行相互数据备份。当某个数据中心发生灾难时，另一个数据中心接替其工作任务。这种级别的备份根据实际要求和投入资金的多少，又可分为两种:①两个数据中心之间只限于关键数据的相互备份;②两个数据中心之间互为镜像，即零数据丢失等。零数据丢失是目前要求最高的一种容灾备份方式，它要求不管什么灾难发生，系统都能保证数据的安全。所以，它需要配置复杂的管理软件和专用的硬件设备，需要投资相对而言是最大的，但恢复速度也是最快的。
容灾备份的关键技术
在建立容灾备份系统时会涉及到多种技术，如:SAN或NAS技术、远程镜像技术、基于IP的SAN的互连技术、快照技术等。这里重点介绍远程镜像、快照和互连技术。
1. 远程镜像技术
远程镜像技术是在主数据中心和备援中心之间的数据备份时用到。镜像是在两个或多个磁盘或磁盘子系统上产生同一个数据的镜像视图的信息存储过程，一个叫主镜像系统，另一个叫从镜像系统。按主从镜像存储系统所处的位置可分为本地镜像和远程镜像。远程镜像又叫远程复制，是容灾备份的核心技术，同时也是保持远程数据同步和实现灾难恢复的基础。远程镜像按请求镜像的主机是否需要远程镜像站点的确认信息，又可分为同步远程镜像和异步远程镜像。
同步远程镜像(同步复制技术)是指通过远程镜像软件，将本地数据以完全同步的方式复制到异地，每一本地的I/O事务均需等待远程复制的完成确认信息，方予以释放。同步镜像使远程拷贝总能与本地机要求复制的内容相匹配。当主站点出现故障时，用户的应用程序切换到备份的替代站点后，被镜像的远程副本可以保证业务继续执行而没有数据的丢失。但它存在往返传播造成延时较长的缺点，只限于在相对较近的距离上应用。
异步远程镜像(异步复制技术)保证在更新远程存储视图前完成向本地存储系统的基本I/O操作，而由本地存储系统提供给请求镜像主机的I/O操作完成确认信息。远程的数据复制是以后台同步的方式进行的，这使本地系统性能受到的影响很小，传输距离长(可达1000公里以上)，对网络带宽要求小。但是，许多远程的从属存储子系统的写没有得到确认，当某种因素造成数据传输失败，可能出现数据一致性问题。为了解决这个问题，目前大多采用延迟复制的技术(本地数据复制均在后台日志区进行)，即在确保本地数据完好无损后进行远程数据更新。
2.快照技术
远程镜像技术往往同快照技术结合起来实现远程备份，即通过镜像把数据备份到远程存储系统中，再用快照技术把远程存储系统中的信息备份到远程的磁带库、光盘库中。
快照是通过软件对要备份的磁盘子系统的数据快速扫描，建立一个要备份数据的快照逻辑单元号LUN和快照cache。在快速扫描时，把备份过程中即将要修改的数据块同时快速拷贝到快照cache中。快照LUN是一组指针，它指向快照cache和磁盘子系统中不变的数据块(在备份过程中)。在正常业务进行的同时，利用快照LUN实现对原数据的一个完全的备份。它可使用户在正常业务不受影响的情况下(主要指容灾备份系统)，实时提取当前在线业务数据。其“备份窗口”接近于零，可大大增加系统业务的连续性，为实现系统真正的7×24运转提供了保证。
快照是通过内存作为缓冲区(快照cache)，由快照软件提供系统磁盘存储的即时数据映像，它存在缓冲区调度的问题。
3.互连技术
早期的主数据中心和备援数据中心之间的数据备份，主要是基于SAN的远程复制(镜像)，即通过光纤通道FC，把两个SAN连接起来，进行远程镜像(复制)。当灾难发生时，由备援数据中心替代主数据中心保证系统工作的连续性。这种远程容灾备份方式存在一些缺陷，如:实现成本高、设备的互操作性差、跨越的地理距离短(10公里)等，这些因素阻碍了它的进一步推广和应用。
目前，出现了多种基于IP的SAN的远程数据容灾备份技术。它们是利用基于IP的SAN的互连协议，将主数据中心SAN中的信息通过现有的TCP/IP网络，远程复制到备援中心SAN中。当备援中心存储的数据量过大时，可利用快照技术将其备份到磁带库或光盘库中。这种基于IP的SAN的远程容灾备份，可以跨越LAN、MAN和WAN，成本低、可扩展性好，具有广阔的发展前景。基于IP的互连协议包括:FCIP、iFCP、Infiniband、iSCSI等。
【小知识】
衡量容灾备份的两个技术指标
RPO(Recovery Point Objective):即数据恢复点目标，主要指的是业务系统所能容忍的数据丢失量。
RTO(Recovery Time Objective):即恢复时间目标，主要指的是所能容忍的业务停止服务的最长时间，也就是从灾难发生到业务系统恢复服务功能所需要的最短时间周期。
RPO针对的是数据丢失，而RTO针对的是服务丢失，二者没有必然的关联性。RTO和RPO的确定必须在进行风险分析和业务影响分析后根据不同的业务需求确定。对于不同企业的同一种业务，RTO和RPO的需求也会有所不同。
loading...
|
|
|
2006-3-4
快速查找对方IP技术总汇
与好友在网络上相互传输资料时，有时先要知道对方计算机的IP地址，才能与对方建立信息传输通道。
那么对方的IP地址该如何搜查得到呢?这样的问题你也许会嗤之以鼻，的确，查询对方计算机的IP地址，实在简单得不值得一提;可是，要让你列举出多种IP地址搜查方法时，你可能就感到勉为其难了。下面，本文就对如何快速、准确地搜查出对方好友的计算机IP地址，提出如下几种方法，相信能对大家有所帮助!
1、邮件查询法
使用这种方法查询对方计算机的IP地址时，首先要求对方先给你发一封电子邮件，然后你可以通过查看该邮件属性的方法，来获得邮件发送者所在计算机的IP地址;下面就是该方法的具体实施步骤:
首先运行OutLook express程序，并单击工具栏中的“接受全部邮件”按钮，将朋友发送的邮件接受下来，再打开收件箱页面，找到朋友发送过来的邮件，并用鼠标右键单击之，从弹出的右键菜单中，执行“属性”命令;
在其后打开的属性设置窗口中，单击“详细资料”标签，并在打开的标签页面中，你将看到“Received: from xiecaiwen (unknown [11.111.45.25])”这样的信息，其中的“11.111.45.25”就是对方好友的IP地址;当然，要是对方好友通过Internet中的WEB信箱给你发送电子邮件的话，那么你在这里看到的IP地址其实并不是他所在工作站的真实IP地址，而是WEB信箱所在网站的IP地址。
当然，如果你使用的是其他邮件客户端程序的话，查看发件人IP地址的方法可能与上面不一样;例如要是你使用foxmail来接受好友邮件的话，那么你可以在收件箱中，选中目标邮件，再单击菜单栏中的“邮件”选项，从弹出的下拉菜单中选中“原始信息”命令，就能在其后的界面中看到对方好友的IP地址了。
2、日志查询法
这种方法是通过防火墙来对QQ聊天记录进行实时监控，然后打开防火墙的日志记录，找到对方好友的IP地址。为方便叙述，本文就以KV2004防火墙为例，来向大家介绍一下如何搜查对方好友的IP地址:
考虑到与好友进行QQ聊天是通过UDP协议进行的，因此你首先要设置好KV防火墙，让其自动监控UDP端口，一旦发现有数据从UDP端口进入的话，就将它自动记录下来。在设置KV2004防火墙时，先单击防火墙界面中的“规则设置”按钮，然后单击“新建规则”按钮，弹出设置窗口;
在该窗口的“名称”文本框中输入“搜查IP地址”，在“说明”文本框中也输入“搜查IP地址”;再在“网络条件”设置项处，选中“接受数据包”复选框，同时将“对方IP地址”设置为“任何地址”，而在“本地IP地址”设置项处不需要进行任何设置;
下面再单击“UDP”标签，并在该标签页面下的“本地端口”设置项处，选中“端口范围”选项，然后在起始框中输入“0”，在结束框中输入“65535”;同样地，在“对方端口”设置项处，也选中“端口范围”选项，然后在起始框中输入“0”，在结束框中输入“65535”。
接着在“当所有条件满足时”设置项处，选中“通行”选项，同时将“其他处理”处的“记录”选项选中，而“规则对象”设置项不需要进行任何设置;完成了上面的所有设置后，单击“确定”按钮，返回到防火墙的主界面;再在主界面中选中刚刚创建好的“搜查IP地址”规则，同时单击“保存”按钮，将前面的设置保存下来。
完成好上面的设置后，KV防火墙将自动对QQ聊天记录进行全程监控，一旦对方好友给你发来QQ信息时，那么对方好友的IP地址信息就会自动出现在防火墙的日志文件中，此时你可以进入到KV防火墙的安装目录中，找到并打开“kvfwlog”文件，就能搜查到对方好友的IP地址。
3、工具查询法
这种方法是通过专业的IP地址查询工具，来快速搜查到对方计算机的IP地址。例如，借助一款名为WhereIsIP的搜查工具，你可以轻松根据对方好友的Web网站地址，搜查得到对方好友的IP地址，甚至还能搜查到对方好友所在的物理位置。在用WhereIsIP程序搜查对方IP地址时，首先启动该程序打开搜查界面，然后单击该界面的“Web site”按钮，在其后的窗口中输入对方好友的Web地址，再单击“next”按钮，这样该程序就能自动与Internet中的Domain Name Whois数据库联系，然后从该数据库中搜查到与该Web网站地址对应的IP地址了。当然，除了可以知道IP地址外，你还能知道对方好友所在的具体物理位置。
倘若要想查看局域网中某个工作站的IP地址时，可以使用“网络刺客II”之类的工具来帮忙;只要你运行该工具进入到它的主界面，然后执行工具栏中的“IP地址<->主机名”命令，在其后打开的对话框中，输入对方好友的计算机名称，再单击“转换成IP”按钮，就能获得对方好友所在计算机的IP地址了。
如果你使用Oicqsniffer工具的话，那么查询QQ好友的IP地址就更简单了。只要你单击该程序界面中的“追踪”按钮，然后向对方好友发送一条QQ消息，那么Oicqsniffer工具就会自动将对方好友的IP地址以及端口号显示出来了。除此之外，还有许多可以查找IP地址的专业工具可以选择，例如IPsniper软件、
4、命令查询法
这种方法是通过Windows系统内置的网络命令“netstat”，来查出对方好友的IP地址，不过该方法需要你先想办法将对方好友邀请到QQ的“二人世界”中说上几句话才可以。下面就是该方法的具体实现步骤:
首先单击“开始”/“运行”命令，在弹出的系统运行对话框中，输入“cmd”命令，单击“确定”按钮后，将屏幕切换到MS-DOS工作状态;然后在DOS命令行中执行“netstat -n”命令，在弹出的界面中，你就能看到当前究竟有哪些地址已经和你的计算机建立了连接(如果对应某个连接的状态为“Established”，就表明你的计算机和对方计算机之间的连接是成功的);
其次打开QQ程序，邀请对方好友加入“二人世界”，并在其中与朋友聊上几句，这样你的计算机就会与对方好友的计算机之间建立好了TCP连接;此时，再在DOS命令行中执行“netstat -n”命令，看看现在又增加了哪个tcp连接，那个新增加的连接其实就是对方好友与你之间的UDP连接，查看对应连接中的“Foreign Address”就能知道对方好友的IP地址了。
5、ping检查法
这种方法就是利用“ping”命令，来检查当前计算机是否能与对方好友的网站连通，在检查的过程中该地址能自动获得对方网站的IP地址。比方说，要是你想搜查天极网站的IP地址时，可以先打开系统的运行对话框，然后在其中输入“ping www.pconline.com.cn”字符串命令，再单击“确定”按钮，在弹出的窗口中，就能知道网站的IP地址了。同样地，你也可以搜查其他网站的IP地址。
好了，上面就是查询好友计算机IP地址的几种常用方法;要是你还有其他更好方法的话，恳请不断补充完善!
loading...
|
|
|
2006-3-4
Ajax技术简介
作为J2EE开发人员，我们似乎经常关注“后端机制（backend mechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然和响应灵敏方面却投入不足。
本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服务进行通信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。
该应用程序中所使用的示例代码已打包为单独的WAR文件，可供下载。
简介
术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。
虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：
BackPack
Google Suggest
Google Maps
PalmSphere
所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。
定义Ajax
Adaptive Path公司的Jesse James Garrett这样定义Ajax：
Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：
基于CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。
Ajax可用于那些场景？——一个例子：MSN Money页面
前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。
而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。
让我们利用Ajax实现自己的基本投票系统。
原始的Ajax：直接使用XmlHttpRequest
如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识： http:///ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，
浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。
首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。
function castVote(rank) {
var url = "/ajax-demo/static-article-ranking.html";
var callback = processAjaxResponse;
executeXhr(callback, url);
}
该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。
下一步是发出一个XmlHttpRequest请求：
function executeXhr(callback, url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send(null);
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP" ;
if (req) {
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send();
}
}
}如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。
executeXhr()方法中最关键的部分是这两行：
req.onreadystatechange = callback;
req.open("GET", url, true);
第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。
一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。
function processAjaxResponse() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
502 502‘votes‘).innerHTML = req.responseText;
} else {
alert("There was a problem retrieving the XML data:
" +
req.statusText);
}
}
}
该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自 http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的XmlHttpRequest对象属性。
属性
描述
onreadystatechange
每次状态改变所触发事件的事件处理程序
readyState
对象状态值：
0 = 未初始化（uninitialized）
1 = 正在加载（loading）
2 = 加载完毕（loaded）
3 = 交互（interactive）
4 = 完成（complete）
responseText
从服务器进程返回的数据的字符串形式
responseXML
从服务器进程返回的DOM兼容的文档数据对象
status
从服务器返回的数字代码，比如404（未找到）或200（就绪）
statusText
伴随状态码的字符串信息
现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。
既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。
Ajax: DWR方式
按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。
假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。
现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到 http://localhost:7001/ajax_demo/dwr-ajax.html来运行程序。
可以查看HTML源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。
引入DWR
如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。
设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。
DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。
让我们仔细分析一下示例代码，弄清它是如何工作的。
应用程序细节：DWR分析
关于应用程序，首先要注意的是，它是一个标准的Java应用程序，使用分层架构（Layered Architecture）设计模式。使用DWR通过JavaScript公开一些服务并不影响您的设计。
下面是一个简单的Java服务，我们将使用DWR框架直接将其向JavaScript代码公开：
package com.tearesolutions.service;
public interface AjaxSampleSvc {
Article castVote(int rank);
}
这是一个被简化到几乎不可能的程度的例子，其中只有一篇文章可以投票。该服务由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求则依赖于ArticleDao。详情请参见applicationContext.xml。
为了把该服务公开为JavaScript对象，需要配置DWR，添加dwr.xml文件到WEB-INF目录下：
dwr.xml文件告诉DWR哪些服务是要直接向JavaScript代码公开的。注意，已经要求公开Spring bean ajaxSampleSvc。DWR将自动找到由应用程序设置的SpringApplicationContext。为此，必须使用标准的servlet过滤器ContextLoaderListener来初始化Spring ApplicationContext。
DWR被设置为一个servlet，所以把它的定义添加到web.xml：
Ajax Examples
org.springframework.web.context.ContextLoaderListener
ajax_sample
com.tearesolutions.web.AjaxSampleServlet
1
dwr-invoker
DWR Servlet
Direct Web Remoter Servlet
uk.ltd.getahead.dwr.DWRServlet
debug
true
ajax_sample
/ajax_sample
dwr-invoker
/dwr/*
做完这些之后，可以加载 http://localhost:7001/ajax-demo/dwr，看看哪些服务可用。结果如下：
图3. 可用的服务
单击ajaxSampleSvc链接，查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能：
ajaxSampleSvc.js是动态生成的：
function ajaxSampleSvc() { }
ajaxSampleSvc.castVote = function(callback, p0)
{
DWREngine._execute(callback, ‘/ajax-demo/dwr‘,
‘ajaxSampleSvc‘, ‘castVote‘, p0);
}
现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码，从而重构raw-ajax.html文件。可以在dwr-ajax.html文件中看到改动的结果；下面是新的JavaScript函数：
function castVote(rank) {
ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
var voteText = "Thanks for Voting!"
+ "Current ranking: " + data.voteAverage
+ " out of 5"
+ "Number of votes placed: "
+ data.numberOfVotes + "";
502 502‘votes‘).innerHTML = voteText;
}
惊人地简单，不是吗？由ajaxSampleSvc对象返回的Article域对象序列化为一个JavaScript对象，允许在它上面调用诸如numberOfVotes()和voteAverage()之类的方法。在动态生成并插入到DIV元素“votes”中的HTML代码内使用这些数据。
下一步工作
在后续文章中，我将继续有关Ajax的话题，涉及下面这些方面：
Ajax最佳实践
像许多技术一样，Ajax是一把双刃剑。对于一些用例，其应用程序其实没有必要使用Ajax，使用了反而有损可用性。我将介绍一些不适合使用的模式，突出说明Ajax的一些消极方面，并展示一些有助于缓和这些消极方面的机制。例如，对Nerfilix电影浏览器来说，Ajax是合适的解决方案吗？或者，如何提示用户确实出了一些问题，而再次单击按钮也无济于事？
管理跨请求的状态
在使用Ajax时，最初的文档DOM会发生一些变化，并且有大量的页面状态信息存储在客户端变量中。当用户跟踪一个链接到应用程序中的另一个页面时，状态就丢失了。当用户按照惯例单击Back按钮时，呈现给他们的是缓存中的初始页面。这会使用户感到非常迷惑！
调试技巧
使用JavaScript在客户端执行更多的工作时，如果事情不按预期方式进行，就需要一些调试工具来帮助弄清出现了什么问题。
结束语
本文介绍了Ajax方法，并展示了如何使用它来创建一个动态且响应灵敏的Web应用程序。通过使用DWR框架，可以轻松地把Ajax融合到站点中，而无需担心所有必须执行的实际管道工作。
特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具。感谢你们与世界共享它！
loading...
|
|
|
2006-3-4
学习AJAX
一、使用Ajax的主要原因
1、通过适当的Ajax应用达到更好的用户体验；
2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
二、引用
Ajax是Asynchronous JavaScript and XML的缩写。
Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
图2－1
图2－2
三、概述
虽然Garrent列出了7条Ajax的构成技术，但个人认为，所谓的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用数据格式为XML的话，还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式，也可以是文本等其他格式)。
在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回应是创建它自己的继承XML代理类：XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
2、JavaScript
JavaScript是一在浏览器中大量使用的编程语言，，他以前一直被贬低为一门糟糕的语言（他确实在使用上比较枯燥），以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的编程语言，有着自已的标准并在各种浏览器中被广泛支持。
3、DOM
Document Object Model。
DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。
所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现（例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。
一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM（Document Object Model）中，DOM提供了网页中各个对象的读写的支持。
4、XML
可扩展的标记语言（Extensible Markup Language）具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。
5、综合
Jesse James Garrett提到的Ajax引擎，实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，读写服务器和更改DOM内容。
JavaScript的Ajax引擎读取信息，并且互动地重写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过JavaScript和DOM在广泛使用的方法，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。
基于XML的网络通讯也并不是新事物，实际上FLASH和JAVA Applet都有不错的表现，现在这种富交互在网页上也可用了，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序。
Ajax是传统WEB应用程序的一个转变。以前是服务器每次生成HTML页面并返回给客户端（浏览器）。在大多数网站中，很多页面中至少90%都是一样的，比如：结构、格式、页头、页尾、广告等，所不同的只是一小部分的内容，但每次服务器都会生成所有的页面再返回给客户端，这无形之中是一种浪费，不管是对于用户的时间、带宽、CPU耗用，还是对于ISP的高价租用的带宽和空间来说。如果按一页来算，只能几K或是几十K可能并不起眼，但像SINA每天要生成几百万个页面的大ISP来说，可以说是损失巨大的。而AJAX可以所为客户端和服务器的中间层，来处理客户端的请求，并根据需要向服务器端发送请求，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于纯后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序，所以Ajax对于用户和ISP来说是双盈的。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。
四、应用
Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势，可以算是一个里程碑。但Ajax都不是适用于所有地方的，它的适用范围是由它的特性所决定的。
举个应用的例子，是关于级联菜单方面的Ajax应用。
我们以前的对级联菜单的处理是这样的：
为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有很多级、每一级菜又有上百个项目），这种弊端就更为突出。
如果在此案中应用Ajax后，结果就会有所改观：
在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。
此外，Ajax由于可以调用外部数据，也可以实现数据聚合的功能（当然要有相应授权），比如微软刚刚在3月15日发布的在线RSS阅读器BETA版；还可以利于一些开放的数据，开发自已的一些应用程序，比如用Amazon的数据作的一些新颖的图书搜索应用。
总之，Ajax适用于交互较多，频繁读数据，数据分类良好的WEB应用。
五、Ajax的优势
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；
2、无刷新更新页面，减少用户实际和心理等待时间；
首先，“按需取数据”的模式减少了数据的实际读取量，打个很形象的比方，如果说重载的方式是从一个终点回到原点再到另一个终点的话，那么Ajax就是以一个终点为基点到达另一个终点；
图5－1
图5－2
其次，即使要读取比较大的数据，也不用像RELOAD一样出现白屏的情况，由于Ajax是用XMLHTTP发送请求得到服务端应答数据，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面的，所以在读取数据的过程中，用户所面对的也不是白屏，而是原来的页面状态（或者可以加一个LOADING的提示框让用户了解数据读取的状态），只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。总之用户是很敏感的，他们能感觉到你对他们的体贴，虽然不太可能立竿见影的效果，但会在用户的心中一点一滴的积累他们对网站的依赖。
3、更好的用户体验；
4、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；
5、Ajax由于可以调用外部数据；
6、基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序；
7、Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）；
8、对于用户和ISP来说是双盈的。
六、Ajax的问题
1、一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax；
2、用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事；
3、Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等；
4、对流媒体的支持没有FLASH、Java Applet好；
七、结束语
更好的Ajax应用，需要更多的客户端的开发，和对当前的WEB应用理念的思考，而且良好的用户体验，来源于为处处用户考虑的理念，而不单纯是某种技术。
loading...
|
|
|
2006-3-4
关于Ajax
1、定义
Ajax最早是由Jesse James Garrett提出来的，原文：Ajax: A New Approach to Web Applications
网上公认的定义：Ajax是Asynchronous JavaScript XML的缩写，它也不是单一技术，而是几种技术的强有力组合。它包括
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
2、为什么用Ajax
就我自己而言，我是因为想让web即时通客户端不受不断刷新页面的烦扰。
1、通过适当的Ajax应用达到更好的用户体验；2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
3、已有的Ajax应用
msn space
Orkut
Gmail
Google Groups
Google Suggest
Google Maps
4、Ajax的相关文章和资源
Ajax: A New Approach to Web Applications 中文译版
AJAX:Getting Started 中文版
Ajax内部交流文档
Ajax程序设计入门
循序渐进学习 Ajax 的途径
java视线论坛Ajax版
 http://www./
5、学习ajax要看的书 原文
1）、XHTML 教程（XHTML）
2）、JavaScript 权威指南第四版（JavaScript: The Definitive Guide）
3）、XML 高级编程（Professional XML）
4）、网站重构（Designing with Web Standards）
loading...
|
|
|
|
|
|
|
|
