Uploader.java
2、把这个文件放到src/ueditor包里面
3、把ueditor/jsp/目录下面的两个jar包放到工程里面
4 重新编译项目ok,可以上传附件,图片了!

有点小高兴

1) 请求被发送到本机端口8080，被在那里侦听的Coyote HTTP/1.1 Connector获得
2) Connector把该请求交给它所在的Service的Engine来处理，并等待来自Engine的回应
3) Engine获得请求localhost/wsota/wsota_index.jsp，匹配它所拥有的所有虚拟主机Host
4) Engine匹配到名为localhost的Host（即使匹配不到也把请求交给该Host处理，因为该Host被定义为该Engine的默认主机）
5) localhost Host获得请求/wsota/wsota_index.jsp，匹配它所拥有的所有Context
6) Host匹配到路径为/wsota的Context（如果匹配不到就把该请求交给路径名为""的Context去处理）
7) path="/wsota"的Context获得请求/wsota_index.jsp，在它的mapping table中寻找对应的servlet
8) Context匹配到URL PATTERN为*.jsp的servlet，对应于JspServlet类
9) 构造HttpServletRequest对象和HttpServletResponse对象，作为参数调用JspServlet的doGet或doPost方法
10)Context把执行完了之后的HttpServletResponse对象返回给Host
11)Host把HttpServletResponse对象返回给Engine
12)Engine把HttpServletResponse对象返回给Connector
13)Connector把HttpServletResponse对象返回给客户browser

<!----------------------------------------------------------------------------------------------->





<web-app>





<!-- 概述：

该文件是所有的WEB APP共用的部署配置文件，

每当一个WEB APP被DEPLOY，该文件都将先被处理，然后才是WEB APP自己的/WEB-INF/web.xml

-->







<!--  +-------------------------+  -->

<!--  |    servlet类定义部分    |  -->

<!--  +-------------------------+  -->







<!-- DefaultServlet

当用户的HTTP请求无法匹配任何一个servlet的时候，该servlet被执行

URL PATTERN MAPPING : /

-->



<servlet>

<servlet-name>default</servlet-name>

<servlet-class>

org.apache.catalina.servlets.DefaultServlet

</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>0</param-value>

</init-param>

<init-param>

<param-name>listings</param-name>

<param-value>true</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>





<!-- InvokerServlet

处理一个WEB APP中的匿名servlet

当一个servlet被编写并编译放入/WEB-INF/classes/中，却没有在/WEB-INF/web.xml中定义的时候

该servlet被调用，把匿名servlet映射成/servlet/ClassName的形式

URL PATTERN MAPPING : /servlet/*

-->



<servlet>

<servlet-name>invoker</servlet-name>

<servlet-class>

org.apache.catalina.servlets.InvokerServlet

</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>0</param-value>

</init-param>

<load-on-startup>2</load-on-startup>

</servlet>





<!-- JspServlet

当请求的是一个JSP页面的时候（*.jsp）该servlet被调用

它是一个JSP编译器，将请求的JSP页面编译成为servlet再执行

URL PATTERN MAPPING : *.jsp

-->



<servlet>

<servlet-name>jsp</servlet-name>

<servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>

<init-param>

<param-name>logVerbosityLevel</param-name>

<param-value>WARNING</param-value>

</init-param>

<load-on-startup>3</load-on-startup>

</servlet>







<!--  +---------------------------+  -->

<!--  |    servlet映射定义部分    |  -->

<!--  +---------------------------+  -->





<servlet-mapping>

<servlet-name>default</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>



<servlet-mapping>

<servlet-name>invoker</servlet-name>

<url-pattern>/servlet/*</url-pattern>

</servlet-mapping>



<servlet-mapping>

<servlet-name>jsp</servlet-name>

<url-pattern>*.jsp</url-pattern>

</servlet-mapping>





<!--  +------------------------+  -->

<!--  |    其它部分，略去先    |  -->

<!--  +------------------------+  -->



... ... ... ...



</web-app>





<!----------------------------------------------------------------------------------------------->

 

<!----------------------------------------------------------------------------------------------->







<!-- 启动Server

在端口8005处等待关闭命令

如果接受到"SHUTDOWN"字符串则关闭服务器

-->



<Server port="8005" shutdown="SHUTDOWN" debug="0">





<!-- Listener ???

目前没有看到这里

-->



<Listener className="org.apache.catalina.mbeans.ServerLifecycleListener" debug="0"/>

<Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" debug="0"/>





<!-- Global JNDI resources ???

目前没有看到这里，先略去

-->



<GlobalNamingResources>

... ... ... ...

</GlobalNamingResources>





<!-- Tomcat的Standalone Service

Service是一组Connector的集合

它们共用一个Engine来处理所有Connector收到的请求

-->



<Service name="Tomcat-Standalone">





<!-- Coyote HTTP/1.1 Connector

className : 该Connector的实现类是org.apache.coyote.tomcat4.CoyoteConnector

port : 在端口号8080处侦听来自客户browser的HTTP1.1请求

minProcessors : 该Connector先创建5个线程等待客户请求，每个请求由一个线程负责

maxProcessors : 当现有的线程不够服务客户请求时，若线程总数不足75个，则创建新线程来处理请求

acceptCount : 当现有线程已经达到最大数75时，为客户请求排队

当队列中请求数超过100时，后来的请求返回Connection refused错误

redirectport : 当客户请求是https时，把该请求转发到端口8443去

其它属性略

-->



<Connector className="org.apache.coyote.tomcat4.CoyoteConnector" 

port="8080" 

minProcessors="5" maxProcessors="75" acceptCount="100" 

enableLookups="true" 

redirectPort="8443" 

debug="0" 

connectionTimeout="20000" 

useURIValidationHack="false" 

disableUploadTimeout="true" />





<!-- Engine用来处理Connector收到的Http请求

它将匹配请求和自己的虚拟主机，并把请求转交给对应的Host来处理

默认虚拟主机是localhost

-->



<Engine name="Standalone" defaultHost="localhost" debug="0">





<!-- 日志类，目前没有看到，略去先 -->



<Logger className="org.apache.catalina.logger.FileLogger" .../>



<!-- Realm，目前没有看到，略去先 -->



<Realm className="org.apache.catalina.realm.UserDatabaseRealm" .../>





<!-- 虚拟主机localhost

appBase : 该虚拟主机的根目录是webapps/

它将匹配请求和自己的Context的路径，并把请求转交给对应的Context来处理

-->



<Host name="localhost" debug="0" appBase="webapps" unpackWARs="true" autoDeploy="true">





<!-- 日志类，目前没有看到，略去先 -->



<Logger className="org.apache.catalina.logger.FileLogger" .../>





<!-- Context，对应于一个Web App

path : 该Context的路径名是""，故该Context是该Host的默认Context

docBase : 该Context的根目录是webapps/mycontext/

-->



<Context path="" docBase="mycontext" debug="0"/>





<!-- 另外一个Context，路径名是/wsota -->



<Context path="/wsota" docBase="wsotaProject" debug="0"/>





</Host>



</Engine>



</Service>



</Server>





<!----------------------------------------------------------------------------------------------->

1. 如何加大tomcat连接数


在tomcat配置文件server.xml中的<Connector ... />配置中，和连接数相关的参数有：

minProcessors：最小空闲连接线程数，用于提高系统处理性能，默认值为10

maxProcessors：最大连接线程数，即：并发处理的最大请求数，默认值为75

acceptCount：允许的最大连接数，应大于等于maxProcessors，默认值为100

enableLookups：是否反查域名，取值为：true或false。为了提高处理能力，应设置为false

connectionTimeout：网络连接超时，单位：毫秒。设置为0表示永不超时，这样设置有隐患的。通常可设置为30000毫秒。



其中和最大连接数相关的参数为maxProcessors和acceptCount。如果要加大并发连接数，应同时加大这两个参数。


web server允许的最大连接数还受制于操作系统的内核参数设置，通常Windows是2000个左右，Linux是1000个左右。Unix中如何设置这些参数，请参阅Unix常用监控和管理命令 
tomcat4中的配置示例：

<Connector className="org.apache.coyote.tomcat4.CoyoteConnector"

port="8080" minProcessors="10" maxProcessors="1024"

enableLookups="false" redirectPort="8443"

acceptCount="1024" debug="0" connectionTimeout="30000" /> 



对于其他端口的侦听配置，以此类推。



2. tomcat中如何禁止列目录下的文件

在{tomcat_home}/conf/web.xml中，把listings参数设置成false即可，如下：

<servlet>

...

<init-param>

<param-name>listings</param-name>

<param-value>false</param-value>

</init-param>

...

</servlet> 



3. 如何加大tomcat可以使用的内存


tomcat默认可以使用的内存为128MB，在较大型的应用项目中，这点内存是不够的，需要调大。



Unix下，在文件{tomcat_home}/bin/catalina.sh的前面，增加如下设置：

JAVA_OPTS='-Xms【初始化内存大小】 -Xmx【可以使用的最大内存】'

需要把这个两个参数值调大。例如：

JAVA_OPTS='-Xms256m -Xmx512m'

表示初始化内存为256MB，可以使用的最大内存为512MB 



4. 如何添加默认访问页面

修改文件web.xml，在welcome-list里面添加index.wml作为默认的访问页面

<welcome-file-list>

    <welcome-file>index.html</welcome-file>

    <welcome-file>index.htm</welcome-file>

    <welcome-file>index.jsp</welcome-file>

</welcome-file-list>

echo Using JVM:              %PR_JVM%
"%EXECUTABLE%" //IS//%SERVICE_NAME% --StartClass org.apache.catalina.startup.Bootstrap --StopClass org.apache.catalina.startup.Bootstrap --StartParams start --StopParams stop

一句后面加上 --DependsOn   oracle侦听服务；oracledatabse
注意用；号隔开依赖的服务
再执行bin/service.bat install jnszcg ，即可安装Tomcat服务，并且依赖oracle

其实很简单就是制定服务的依赖关系；

最后采取的方案成功了：

1、把tomcat做到服务里面，手工启动；
2、新建一个批处理net start tomcat
3、新建一个任务，在计算机启动的时候执行批处理ok
是不是问题已经解决了

最近要研究一下JBOSS的一系列产品：

Error reading from server <192.168.0.108>: -1: Unknown error

解决的方法是这样的：NODE 32里面IMON点击后－－>

右边窗口点击SETUp按钮－－>

弹出的窗口里面Miscellaneous－－>

ExcluSion－－>

Edit-->

C:\Program Files\CVSNT\cvsservice.exe－－>添加上就ok了

你的CVS就能登录了！！！

dn: cn=manager,o=chinantn,dc=com
objectclass: organizationalPerson
objectclass: person
objectclass: top
cn: manager
sn: badboyryan
userpassword:: c2VjcmV0

dn: ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: departments

dn: ou=market,ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: market

dn: ou=developer,ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: developer

dn: ou=service,ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: service

dn: ou=finance,ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: finance

dn: ou=directorate,ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: directorate

dn: ou=engineer,ou=departments,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: engineer

dn: ou=partners,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: partners

dn: ou=customers,ou=partners,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: customers

dn: ou=suppliers,ou=partners,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: suppliers

dn: ou=employees,ou=partners,o=chinantn,dc=com
objectclass: organizationalUnit
objectclass: top
ou: employees

第二步：人员信息

dn: uid=scf,ou=developer,ou=departments,o=chinantn,dc=com
objectClass: person
objectClass: uidObject
objectClass: organizationalPerson
objectClass: top
cn: sss
sn: scf
uid: scf
userpassword:: e01ENX1YTXNwY1ZWVFhUbFh1K1M0QllLY0hBPT0=
人员信息就少写一点了，有空你再慢慢的补充上。
第三步：导入LDIF文件，这个时候LDAP服务器里面就有了一棵树（组织结构）
第四步：被指jira让他利用LDAP认证来登录系统，如下图所示：




经过上面的折腾就完成了一个通过LDAP认证的小例子了。
注意转帖的时候带上：
©所有：http://badboyryan.blogjava.net
随意的转帖不受法律约束。

邢红瑞 发表于 2007-6-8 16:00:58

1
2
3
4
5
6
7
8

package onlyfun.caterpillar;
 
publicclass Option {
public String[] getOptions() {
// 實際上這些字串是從資料庫中查到的啦…
returnnew String[] {"良葛格", "毛美眉", "米小狗"}; 
}
}

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN""http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="OPT">
        <param name="class" value="onlyfun.caterpillar.Option"/>
    </create>  
  </allow>
</dwr>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script src="option.js" type="text/javascript"></script>
<script src="dwr/interface/OPT.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
 
</head>
 
<body>
    選項: <select id="opts"></select>
</body>
</html>

1
2
3
4
5
6
7
8

window.onload = function() {
    OPT.getOptions(populate);  
};
 
function populate(list){
    DWRUtil.removeAllOptions("opts");
    DWRUtil.addOptions("opts", list);
}

好啦！我知道有人在說了，這個程式有夠無聊…

改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設一個會去從資料庫中查詢資料的Java程式示意如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

package onlyfun.caterpillar;   import java.util.Map; import java.util.TreeMap;   publicclass Bike {   private Map<String, String[]> bikes;      public Bike() {     bikes = new TreeMap<String, String[]>();     bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});     bikes.put("2001", new String[] {"2001 A1", "2001 A2"});     bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});     bikes.put("2003", new String[] {"2003 S320"});     bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});   }      public String[] getYears() {     String[] keys = new String[bikes.size()];     int i = 0;     for(String key : bikes.keySet()) {       keys[i++] = key;     }     return keys;   }      public String[] getBikes(String year) {     return bikes.get(year);   } }

getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。

一樣的，在dwr.xml中設定：

1 2 3 4 5 6 7 8 9 10

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN""http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="Bike" scope="application"> <param name="class" value="onlyfun.caterpillar.Bike"/> </create> </allow> </dwr>

我們會有個腳踏車年份與型號查詢頁面：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=BIG5"> <title>Insert title here</title> <script type='text/javascript' src='dwr/interface/Bike.js'></script> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script> <script type='text/javascript' src='bike.js'></script> </head> <body onload="refreshYearList();">   年份：<select id="years" onchange="refreshBikeList();"></select><br/><br/>   型號：<select id="bikes"></select><br/> </body> </html>

注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...

bike.js如下…

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function refreshYearList() { Bike.getYears(populateYearList); }   function populateYearList(list){ DWRUtil.removeAllOptions("years"); DWRUtil.addOptions("years", list); refreshBikeList(); }   function refreshBikeList() { var year = $("years").value; Bike.getBikes(year, populateBikeList); }   function populateBikeList(list){ DWRUtil.removeAllOptions("bikes"); DWRUtil.addOptions("bikes", list); }

一樣很簡單…

看個無聊的畫面…XD

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1239538

近年来随着我国金融体制改革的不断深人，银行企业不断利用信息技术拓宽业务，其中对于自助银行，使其得到了飞速发展，因此，依托现在计算机技术、网络通信技术、数据安全技术开发出能对各种自助终端进行监控，网络拓展性良好，使用灵活方便，安全的银行自助终端监控系统成为当务之急。利用J2EE系统平台^[1]，能有效地实现分布式多层体系结构的应用程序开发。

1 RMI^[2]

RMI(Remote Method Invocation，远程方法调用)是J2EE技术中的一项，是Java语言实现有力网络功能的固有机制，RMI允许Java编写分布式对象，并允许对象在内存中通信，可跨越Java虚拟机通信^[3-4]，也可跨越物理设备。

RMI实现实际上由3个抽象层建立：

Stubs／Skeletons Layer(存根/主架层)；Remote Reference Layer(远程引用层)；Transport Layer(传输层)。

2 监控系统的设计与实现

2．1 系统网络结构

本系统以中国银行内部Intranet网络为依托，采用集中式网络结构构建而成。如图1所示。

系统采用一台监控服务器，连在中国银行Intranet主干网上，和提供数据源的前置机放入同一网段。服务器主机上运行Web服务器、应用服务器和数据库服务器，为用户提供Web方式访问。监控客户端以浏览器的形式在工作站上通过网络直接访问web服务器，进行信息查询、监控管理、报表打印、系统维护等。Intranet环境内其他用户可通过路由器、DDN专线从相应工作站以web形式访问Web服务器。

2．2 系统逻辑层次结构图

监控系统由数据库服务器、应用服务器、web服务器和浏览器组成，通过Intranet／Internet与综合前置系统连接。

本文将3层结构模式应用于银行自助终端监控系统，这3层分别是：客户层；Web层(应用逻辑层)；数据存储层(见图2)。

这种结构无疑是富有生命力的，监控台使用浏览器直接与银行Intranet连接，监控服务器(监控服务器由Application Server和DB Servet两台服务器组成)在接入Intranet之前与一个Web Server连接，再通过Web Server接入Internet。通过Internet在监控服务器与监控台之间建立物理连接。

2.3 应用系统结构

自助设备监控系统是监控前端自助设备运行状态，交易情况的网上应用系统，他的数据来自于数据采集模块。前端自助设备运行时发送状态交易数据到前置机、主机系统，由前置机、主机系统进行处理，并将状态数据、交易情况记入数据库或LOG文件中。如图3所示，由监控系统数据采集模块定时采集数据库或LOG文件中的数据到监控数据库中，监控应用系统负责对监控数据统一处理，并通过监控客户端实时请求发送到监控客户端进行显示及其他处理。

3 RMI技术在监控系统中的应用

中国银行天津分行在每个地区都下设支行，每个支行负责管理本地区的ATM网点，因此各个支行之间网点ATM自助设备的状态、交易信息不能共享．那么各个地区的监控客户端就只能通过本地区支行的监控服务器实时监控本地区的ATM网点的自助终端设备，为了使身处各个地区的监控客户端都能够监控各个支行所辖的ATM网点自助终端设备，就必须采用分布式的监控系统。每个支行都设置一台监控服务器，与各自所在支行的前置系统相连接，利用RMI技术将实时监控、远程控制、查询统计组件注册为远程对象，监控客户机在任何支行的监控服务器上的注册服务表用远程对象的名字查找相应远程对象，然后调用他的方法，就可以像监控本地区的ATM自助终端设备那样监控其他地区的ATM自助终端设备。

下面本文将以对ATM状态的实时监控如何借助RMI技术实现做以讨论^[5]。

3．1 定义远程接口

在Java中，远程对象是实现远程接口的类的实例，远程接口声明每个要远程调用的方法。在需要创建一个远程对象的时候，通过传递一个接口来隐藏基层的实施细节，客户通过接口句柄发送消息即可。远程接口具有如下特点：

(1)远程接口必须为public属性。

(2)远程接口必须扩展接口java．rmi．Remote。

(3)除与应用程序本身特定的例外之外，远程接口中的每个方法都必须在自己的throws从句中声明java．rmi．RemoteException。

(4)作为参数或返回值传递的一个远程对象(不管是直接，还是本地对象中嵌入)必须声明为远程接口，而不应声明为实施类。

下面是对ATM状态实时监控的远程接口ATM_StatusShow_Interface的定义。

3．2 实现远程接口^[6]

远程对象实现类必须扩展远程对象java．rmi．UnicastRemoteObject类，并实现所定义的远程接口。远程对象的实现类中包含实现每个远程接口所指定的远程方法的代码。这个类也可以含有附加的方法，但客户只能使用远程接口中的方法。因为客户是指向接口的一个句柄，而不是他的哪个类。必须为远程对象定义构造函数，即使只准备定义一个默认构造函数，用他调用基础类构造函数。

3．3 编写服务器类

通过ATM_StatusShow_Server创建一个远程对象的实例，并通过java．rmi．registry．LocateRegistry类的createRegistry方法从指定端口号启动注册服务程序，注册服务程序的缺省运行端口为1099。必须将远程对象名字绑定到对远程对象的引用上。

3．4 编写使用远程服务的客户机类。

客户机类的主要功能有2个：一是通过Naming．lookup方法来构造注册服务程序stub程序实例；二是调用服务器远程对象上的远程方法。

3．5 为远程对象实现创建根和干

要创建存根程序和主架文件，应以包含远程对象实现的已编译类包全名运行rmic编译器。存根(Stub)是远程对象在客户端的代理，他将RMI调用传递给服务器端的主架(Skeleton)，后者负责将该调用传递给实际的远程方法：

运行rmic，RMI目录下就会多出2个新类：

ATM_StatusShow_Impl_Stub．class

ATM_StatusShow_Impl_Skel．class

他们分别对应的是存根(stub)和主架(skeleton)。

4 结 论

本系统在中国银行天津分行的支持下已投入使用，经过多次测试和实际运行，用户对于本系统的评价比较满意。在运行速度和运行稳定性上都能达到要求。对于用户的日常工作负担起到了较大减轻的作用，提高了工作效率，简化了沟通手续，丰富了查询能力，使统计结果更加实时、灵活和准确。从技术角度上看，本系统采用RMI技术非常好地解决了分布式应用的问题。

代码如下：

<script type="text/javascript">
<!--
     function startSort(){
          var a=document.getElementById('s').value;
          a=a.split(',')
          a.sort();
          document.getElementById('r1').value=a;
          a.sort(function(a,b){return a.localeCompare(b)});
          document.getElementById('r2').value=a;
     }
         
//-->
</script>
<p>包含汉字的字符串数组(用逗号","隔开)：<br />
<textarea id="s" style="width: 100%; overflow: scroll; word-wrap: normal;" rows="10">张韶涵,b土,abort,张学友,something,苹果,五月天,刘德华,香蕉,apple,范玮琪,阿桑</textarea></p>

<p style="text-align: center"><input type="button" value="排序测试" onclick="startSort()" style="width: 300px" /></p>

<p>默认排序结果：<br />
<textarea id="r1" style="width: 100%; overflow: scroll; word-wrap: normal;" rows="10"></textarea></p>

<p>汉字拼音顺序排序结果：<br />
<textarea id="r2" style="width: 100%; overflow: scroll; word-wrap: normal;" rows="10"></textarea></p>