Java代码

1. <input  jwcid="price@TextField" type="text" value="ognl:picture.price"  translator="translator:number,pattern=##.##"  validators="validators:min=0" displayName="价格" class="input_text"/>  

<input  jwcid="price@TextField" type="text" value="ognl:picture.price"  translator="translator:number,pattern=##.##"  validators="validators:min=0" displayName="价格" class="input_text"/>

Java代码

1. protected void rewindFormComponent(IMarkupWriter writer, IRequestCycle cycle) {   
2.        //从请求中得到参数值   
3.         String value = cycle.getParameter(getName());   
4.   
5.         try {   
6.              //用translator来转换值   
7.             Object object = getTranslatedFieldSupport().parse(this, value);   
8. //用validators来验证值   
9.             getValidatableFieldSupport().validate(this, writer, cycle, object);   
10.             //赋值给容器或者页面   
11.             setValue(object);   
12.         } catch (ValidatorException e) {   
13.             getForm().getDelegate().record(e);   
14.         }   
15.     }  

protected void rewindFormComponent(IMarkupWriter writer, IRequestCycle cycle) {
//从请求中得到参数值
String value = cycle.getParameter(getName());
try {
//用translator来转换值
Object object = getTranslatedFieldSupport().parse(this, value);
//用validators来验证值
getValidatableFieldSupport().validate(this, writer, cycle, object);
//赋值给容器或者页面
setValue(object);
} catch (ValidatorException e) {
getForm().getDelegate().record(e);
}
}

* initialize():页面初始化
* pageBeginRender() ("rewind"):getRequestCycle().isRewinding()为true
* rewind of the form / setting of properties:所有表单组件调用rewindFormComponent来取值赋值
* Deferred listeners (for Submit components):调用Submit组件的listener
* Form's listener：调用Form组件的listener
* pageEndRender() ("rewind"): getRequestCycle().isRewinding()为true
* pageBeginRender() (normal): getRequestCycle().isRewinding()为false
* pageEndRender() (normal): getRequestCycle().isRewinding()为false

Java代码

1. public abstract void setPictures(List<Picture> pictures);   
2. public abstract void setPictureInList();//用于For中的value   
3. public abstract void setPicture(Picture picture);//用于表单创建   
4. public abstract Picture getPicture();   
5. public void pageBeginRender(PageEvent event) {   
6. if(getPicture()==null){   
7. setPicture(new Picture());   
8. }   
9. setPictures(getPictureService().findAll());   
10. }  

public abstract void setPictures(List<Picture> pictures);
    public abstract void setPictureInList();//用于For中的value
    public abstract void setPicture(Picture picture);//用于表单创建
    public abstract Picture getPicture();
    public void pageBeginRender(PageEvent event) {
    if(getPicture()==null){
    setPicture(new Picture());
    }
    setPictures(getPictureService().findAll());
    }

Java代码

1. public void pageBeginRender(PageEvent event) {   
2. if(getPicture()==null){   
3. setPicture(new Picture());   
4. }   
5. if (!event.getRequestCycle().isRewinding()) {   
6. setPictures(getPictureService().findAll());   
7. }   
8. }  

public void pageBeginRender(PageEvent event) {
    if(getPicture()==null){
    setPicture(new Picture());
    }
    if (!event.getRequestCycle().isRewinding()) {
    setPictures(getPictureService().findAll());
    }
    }

public class StringConverter implements Converter {
 public Object getAsObject(FacesContext context, UIComponent component,
   String newValues) throws ConverterException {
  String newstr = "";
  if (newValues == null) {
   newValues = "";
  }
  byte[] byte1 = null;
  try {
   byte1 = newValues.getBytes("ISO-8859-1");
   newstr = new String(byte1, "GB2312");
   UIInput input=(UIInput)component;//
   input.setSubmittedValue(newstr);
  } catch (UnsupportedEncodingException e) {
   e.printStackTrace();
  }

  return newstr;

 }

 public String getAsString(FacesContext context, UIComponent component,
   Object Values) throws ConverterException { 
  return (String) Values;
 }
}

2、注册转换器
faces-config.xml片段
<converter>
  <converter-id>util.stringconverter</converter-id>
  <converter-class>util.StringConverter</converter-class>
</converter>

3、在页面使用转换器
<h:inputText id="account" value="#{util.account}" required="true" styleClass="input" > 
 <f:converter converterId="utilstringconverter"/>

 * csr 文件的生成：
%Java_Home%\bin\keytool -certreq -alias localhost-weblogic -sigalg MD5withRSA -file ./testServer.csr -keystore ./testKey.jks

 * 注意： http 的默认端口是80，https 的默认端口是433，ftp 的默认端口是21。
2．部署keystore 文件
在 <http://hostname:7001/console>  中配置刚才生成的 testKey.jks 文件。

1.1.2 Tomcat 下面SSL配置

1．生成 keystoreFile：
 * keystoreFile 文件的生成：
%Java_Home%\bin\keytool -genkey -alias localhost-weblogic -keyalg RSA -validity 365 -keystore ./testKey.jks

Example for inner test：
[root@localhost ~]#
/home/tomcat/jdk1.5.0_12/bin/keytool -genkey -alias localhost-tomcat -keyalg RSA -validity 365 -keystore /home/tomcat/apache-tomcat-5.5.23/conf/VCMarketKey.jks
Enter keystore password:  someday2007
What is your first and last name?
  [Unknown]:  lifenote
What is the name of your organizational unit?
  [Unknown]:  Java
What is the name of your organization?
  [Unknown]:  Sunxc
What is the name of your City or Locality?
  [Unknown]:  Beijing
What is the name of your State or Province?
  [Unknown]:  Beijing
What is the two-letter country code for this unit?
  [Unknown]:  ZH
Is CN=lifenote, OU=Java, O=Sunxc, L=Beijing, ST=Beijing, C=ZH correct?
  [no]:  y

Enter key password for <localhost-tomcat>
        (RETURN if same as keystore password):  someday2007
[root@localhost ~]#

 * csr 文件的生成：
%Java_Home%\bin\keytool -certreq -alias localhost-weblogic -sigalg MD5withRSA -file ./testServer.csr -keystore ./testKey.jks

 * 注意： http 的默认端口是80，https 的默认端口是433，ftp 的默认端口是21。

2．部署keystore 文件
  打开 server.xml 文件，修改内容如下：
 
 * 只需去掉 server.xml 中对SSL定义的注释，在加上 keystoreFile、keystorePass 这两个属性即可。
  <Service
      name="Catalina">
    <Connector
        port="8080"
  ...
    </Connector>
   
 <!-- Define a SSL HTTP/1.1 Connector on port 8443 --------------------- 要加入的内容在这里 -->
    <Connector port="8443" maxHttpHeaderSize="8192"
               maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
               enableLookups="false" disableUploadTimeout="true"
               acceptCount="100" scheme="https" secure="true"
               clientAuth="false" sslProtocol="TLS"
      keystoreFile="e:/temp_E/ssl/testKey.jks"
      keystorePass="aaaaaa"/>

    <Connector
        port="8009"
  ...
    </Connector>
 ...
Example for inner test：
    <Connector port="443" maxHttpHeaderSize="8192"
               maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
               enableLookups="false" disableUploadTimeout="true"
               acceptCount="100" scheme="https" secure="true"
               clientAuth="false" sslProtocol="TLS"
      keystoreFile="/home/tomcat/apache-tomcat-5.5.23/conf/VCMarketKey.jks"
      keystorePass="password"/>

 注意需默认要使用 443 而不是 8443，要使用8443要在apache中配置，保证从apache请求tomcat 采用 <https://ip:8443/>... 的格式。

1.1.3 使用http访问WebService s的客户端配置
Servlet服务器配置好SSL之后，客户端可以使用https访问了。
对于用户使用浏览器访问https的方式，浏览器会弹出安装证书的对话框，确认之后可以正常使用https访问。
 对于WebService 通过https方式访问，按照一下步骤：
1． WebService客户端要先取得keyStore文件；
2． 虚拟机系统使用 System.setProperties(…) 设置keyStore信息；
3． 使用 url=<https://ip:port/...> 访问WebService服务

后面一个很容易理解，它等价于function f(){};定义一个函数f。但前面一个就不常见了：这其实是创建一个对象，在{}中可以指定对象的成员，比如上面的Prototype，就是一个对象，有两个成员，第一个是版本号，第二个是一个空方法（函数）。像这种不用定义类，就能直接创建对象的功能可能只有js能做到。后面一种语法其实还有一个功能，就是定义一个类f。如果你在函数体中用了this，那么this后面的变量就是类的成员。
不仅this可以定义类成员，还有一种语法：
function c(){
 member1:value,
 member2:function(){}
}

这等价于:
function c(){
 this.member1=value;
 this.member2=function(){};
}

需要注意的是，用前一种办法时，最后一个成员的最后不能加逗号，我想这种语法应该和数组有关。
在js里，函数和类是没有区别的，都可以new，new的作用是把函数体的语句都执行一遍，然后返回一个对象。如果函数里有this，那么this后面的变量会作为对象成员；如果没有，那么new的作用只是返回一个没有任何成员的空对象。所以你用typeof查看一个所谓类的类型时，仍然会返回function。在js里也基本没有类型的概念，所有变量的声明都用var，即使是函数，也是如此。函数，其实也只是一个变量。
说函数是变量，可能很多人不解。但是你试试下面的做法：
function fTest(){
 var a=1;
 alert(a);
}
alert(fTest);

你会发现显示的是fTest这个函数的函数体，所以我们可以认为，所谓函数，仅仅是js引擎可以解析的一段代码字符串。函数名变量存储的只是这个字符串。说的更准确一点，函数名是一个指针变量，它存储的是这个代码字符串在内存中的位置。这样就不难理解将函数作为参数传递，可以作为值返回了，这是以后会大量使用的技术。因为类也是函数，所以理解了函数，也就理解了类。
虽然在js里函数和类没有区别，但是类的概念却可以方便我们进行程序设计，于是prototype很有创意的创建了一个全局对象Class：
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

Class是一个全局对象，它的唯一方法就是create，作用返回一个函数，前面已经讲过函数作为返回值的机制，这里不再遨述。返回的函数包括一条语句：
this.initialize.apply(this, arguments);

前面讲过，new一个函数时，会执行函数里的代码，最后返回对象。所以当使用Class.create()创建了一个函数，再new这个返回的函数时，首先会执行这条语句。后面可以看到，这其实是为了调用类的构造函数。
就是这样，Class成为了整个prototype的类型创建模型，并且能很好的把类和函数在代码上区分开来。Class.create()仅仅是返回一个空类，而且它会默认为这个类是具有initialize方法的，所以要使用这个类，至少需要有一个构造函数，这就需要使用到类的继承。类只是一个函数，那么函数怎么继承呢？看起来匪夷所思，javascript能做到这一点，prototype使得实现更为优雅，至于它是怎么做到的，且听下回分解。
AJAX之旅(2)：javascript中类的深入研究－实现和继承
上回说到了类的定义，prototype通过一个全局对象Class从形式上将函数和类区别开来。既然是类，那么就有抽象类，具体类，类的继承，同时，类的成员可以有实例成员和静态成员。下面来看一下prototype是怎么做到这些的。
先看prototype中的以下的代码：

var Abstract = new Object();
 Object.extend = function(destination, source) {
   for (property in source) {
     destination[property] = source[property];
   }
   return destination;
 }
 Object.prototype.extend = function(object) {
   return Object.extend.apply(this, [this, object]);
 }
第一个声明了一个对象Abstract，Object其实是一个函数，他没有任何成员，所以是一个空类，所以Abstract也就没有任何成员。这个暂时不说，后面可以看到这是抽象类的基础。先解释以下这个语法：
function.member=function(){}
在这种情况下，function一般都是已经定义过的，这条语句的作用是给function增加一个静态成员member，member的内容是等号后面的。如上面第二段代码Object.extend=……，就是给Object这个类增加了一个静态方法extend。ok，我们知道了怎样给一个类定义静态成员，那么你一定很想知道实例成员怎么定义，很简单，在类名和成员名之间加上prototype：

function.prototype.member=function(){}
 
prototype不仅可以这么使用，还可以：
 function.prototype={
  member1:function(){……},
  member2:"abc",
  member3:function(){……}
 }
这样就是实现了实例成员的定义。但prototype代表什么意思呢？在第一篇我说过，直接用{}括起来，表示一个对象，如Prototype，Class都是这样定义的全局对象。而看下面一种用法，prototype后面就是一个{}的结构，难道它也是对象？是的，没错，prototype其实也是一个对象！在javascript里，一个对象我们可以任意增加它的成员，用如下的语法：
object.member=function(){……};
只要经过这样的定义，一个对象就可以立刻具有member这个方法！javascript就是这么神奇！
好，我们现在知道了prototype是一个对象，而function是一个函数或者类，那么我们可以认为prototype是任何一个类（函数）都内部保留的一个静态成员。它的功能就是存储这个类的所有成员指针，但这些成员都只是原型，没有经过初始化，这也符合prototype的原义。你可以随时通过prototype这个对象来扩充成员。在new一个类时，prototype的成员就经过初始化，然后赋给了实例化的对象。
上面第三段代码Object.prototype.extend=……，就是给Object增加了一个实例方法extend，实例方法中就可以引用this指针，指向由这个类实例化的对象本身。当然，这个对象就具有成员extend。
继续之前，先了解一下两个语句：
for(var p in object){}
 method.apply(object,arguments);
第一句：列举出一个变量的所有成员，如果是函数，那么是所有静态成员；如果是对象，那就是所有实例成员，p的类型是一个字符串。表示成员的名称。引用一个成员不仅可以用variabel.member，还可以用variabel["member"]。反过来，赋值也是如此。这就给枚举一个变量的成员带来了很大方便。
第二条语句：将method这个方法应用到object去执行，参数是arguments这个数组。注意：method并不是object的成员。但是，我们可以认为这条语句执行的意思就是：object.method(arguments)。这是一个很重要的方法，后面会经常用到，你也会逐渐熟悉它的。
下面继续extend，它是一个非常重要的方法，可以看到它既是类Object的静态成员，也是其实例成员，那它有什么作用呢？让我们来看：它接收两个参数，destination和source，如果destination和source都是类，那么它的功能是把类source的所有静态成员都复制给类destination，如果destination和source都是对象，那么是把所有实例成员都复制过来。这时destination中如果已经有同名成员，那么这个成员将被覆盖。也就是说让destination具有了source的所有成员，并且函数返回这个destination。下面看extend作为Object的实例成员：
Object.prototype.extend = function(object) {
   return Object.extend.apply(this, [this, object]);
 }
开始有点晕了，不过不要急，还是可以看懂的，apply语法刚刚已经讲过了，它的调用者是一个方法，而Object.extend是一个静态方法，它被应用到this上面，也就是Object的实例，假设为obj，后面方括号是一个数组，包括两个成员，this和object。这个数组实际上就是Object静态成员extend的arguments参数。那么这条语句就相当于执行
obj.extend(this,object);
this不解释了，表示本身。object是什么？参数，恩，是实例方法extend传来的参数，不要混淆。extend呢？obj并没有定义extend实例成员，但通过apply，它可以把Object的静态成员extend拿来使用，再看一下extend的函数体：
Object.extend = function(destination, source) {
   for (property in source) {
     destination[property] = source[property];
   }
   return destination;
 }
因为obj是对象，object也是对象，即destination和source都是对象，于是函数的作用就是使obj具有object的所有成员。并且会返回obj。听起来有点拗口，但逻辑很简单：让obj“继承于”object！很好，我们看到了继承，但你肯定会问，对象的继承，第一次听说啊，我们讲继承都是讲的类的继承。没错，现在的确还没有看到真正的类继承，但已经近在眼前了：类不就是有个prototype吗，而prototype是对象！
好，想到这一点，类的继承语法看似很简单了：
b.prototype.extend(a.prototype);
让b继承a。
可是事实却没那么简单：prototype是存放方法原型指针，extend方法没有初始化，不能使用！要使用extend，就必须实例化一个对象。还是看看prototype是怎么做的吧：
b.prototype=(new a()).extend(b.prototype);
很高明的办法！充分说明了函数其实也是一个变量的道理。先实例化a对象，然后在它基础上调用extend，将所有的成员b.prototype的成员覆盖到a的对象，然后把这个a对象再赋值给b.prototype。完成了b从a继承的工作。在实际使用中，一般的用法都是：
b.prototype=(new a()).extend({});
因为让一个b继承自a，通常b之前都是一个未定义的类，所以后面的{}中其实就可以定义类成员。当然，你也可以先定义，再继承，只是和传统概念有所区别了。

AJAX之旅（3）：javascript中的事件设计模式
今天暂时抛开prototype1.3.1，分享一下我的javscript事件设计心得。其实现的技术基础在于函数的本质，这在前面两篇中有详细叙述（更多请关注：http://www.x2design.net）。
javascript内置的对象都有事件功能，比如button就有onclick事件，input就有onchange事件。那么如何在我们自定义的类中实现事件呢？很简单：
var myClass=Class.create();
myClass.prototype={
 show:function(){
  //statement
  onshow();
 },
 onshow:function(){}
}
这段代码其实就是实现了onshow事件，在myClass实例show的时候触发，你可以给onshow绑定一个函数，从而使用事件功能。在javascript中，内置的对象事件使用方法都是如此，其内部实现应该也是基于这样的模式。但是，这样的实现却有两个突出的问题：
1.只能绑定一个回调函数。如果要实现多绑定，必须自己写很多代码来封装要回调的函数到一个函数中。
2.不能传递参数。因为onshow只能赋给函数名，即函数体本身，并不能传递参数进去，为了传递参数，我曾写过一篇：《用外壳包装法给javascript触发器传递参数》，可见，同样需要写很多代码。
那么，这些问题怎么解决呢？javascript内置对象的事件使用我们就暂时不管，来考虑一下怎么在自己实现的类中避免如上两个问题。实现之前，先来考虑下面这个问题，或许有助于理解实现这个功能的意义：
我的页面需要用javascript进行一些初始化，但初始化必须在页面载入完成之后进行。通常我们会将代码放到html文件最下面。但此时，在页面载入完成之前，页面上的按钮点击需要调用必须经过初始化的方法，如果不作判断，那么就很容易出现脚本错误。因为还没有初始化，一个简单的想法是：用一个bool变量loaded来判断，初始为false，初始化完成后为true，那么按钮点击时遇到false就简单返回。这实现固然简单，但有可能造成用户发现点击无效，而不知其所以然。所以完善的做法应该是能捕获这个方法，将其绑定到页面载入完成事件上，当页面载入完成后自动调用。
好，现在看事件设计模式的实现代码：
var myClass=Class.create();
myClass.prototype={
 initialize:function(){
  this.initEvent=new Object();
 },
 init:function(){
  //初始化要执行的语句
 
  //下面是调用绑定的回调函数
  for(var p in this.initEvent){
   //extend是内置方法，不可作为回调关键字
   if(p=="extend")continue;
   this.initEvent[p].apply(_object,[]);
  }
 },
 attachOnInit:function(_key,_object,_method,_arguments){
  this.initEvent[_key]=createFunction(_object,_method,_arguments);
 },
}
function createFunction(_object,_method,_arguments){
 return function(){
  _method.apply(_object,_arguments);
 }
}
这段代码就实现了一个类myClass，具有init方法，触发oninit事件，使用时要想绑定一个事件，可以调用attachOnInit方法，参数的意思分别为：_key，回调参函数的唯一标识，如果重复，后者覆盖前者；_object回调函数的对象，如果是直接在script中的函数，可以传递this指针进去，即document对象；_method，要回调的函数，注意，这是一个函数名，不是字符串；_arguments，回调函数的参数数组。还有一个函数是createFunction，作用是包装一个函数，使其内置参数，这是外壳包装法那篇文章的一个通用实现。如果大家看过ajax之旅系列的前两篇文章，应该容易理解上面的代码，如果有什么问题，欢迎评论。
使用示例：
function myFunc(s){
 alert(s);
}
var myObj=new myClass();
myClass.attach("key1",this,myFunc,[123]);
myClass.init();

这就将myFunc函数绑定到myObj的init函数，执行后会弹出对话框123。
 
Ajax::prototype 源码解读 之 prototype.js 一[转载]
/**
 * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号
 */
var Prototype = {
  Version: '@@VERSION@@'
}

/**
 * 创建一种类型，注意其属性 create 是一个方法，返回一个构造函数。
 * 一般使用如下 
 *     var X = Class.create();  返回一个类型，类似于 java 的一个Class实例。
 * 要使用 X 类型，需继续用 new X()来获取一个实例，如同 java 的 Class.newInstance()方法。
 *
 * 返回的构造函数会执行名为 initialize 的方法， initialize 是 Ruby 对象的构造器方法名字。
 * 此时initialize方法还没有定义，其后的代码中创建新类型时会建立相应的同名方法。
 *
 * 如果一定要从java上去理解。你可以理解为用Class.create()创建一个继承java.lang.Class类的类。当然java不允许这样做，因为Class类是final的
 *
 */
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

/**
 * 创建一个对象，从变量名来思考，本意也许是定义一个抽象类，以后创建新对象都 extend 它。
 * 但从其后代码的应用来看， Abstract 更多是为了保持命名空间清晰的考虑。
 * 也就是说，我们可以给 Abstract 这个对象实例添加新的对象定义。
 *
 * 从java去理解，就是动态给一个对象创建内部类。
 */
var Abstract = new Object();

/**
 * 获取参数对象的所有属性和方法，有点象多重继承。但是这种继承是动态获得的。
 * 如：
 *     var a = new ObjectA(), b = new ObjectB();
 *     var c = a.extend(b);
 * 此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是，c instanceof ObjectB 将返回false。
 */
Object.prototype.extend = function(object) {
  for (property in object) {
    this[property] = object[property];
  }
  return this;
}

/**
 * 这个方法很有趣，它封装一个javascript函数对象，返回一个新函数对象，新函数对象的主体和原对象相同，但是bind()方法参数将被用作当前对象的对象。
 * 也就是说新函数中的 this 引用被改变为参数提供的对象。
 * 比如：
 *     <input type="text" id="aaa" value="aaa">
 *     <input type="text" id="bbb" value="bbb">
 *     .................
 *     <script>
 *         var aaa = document.getElementById("aaa");
 *         var bbb = document.getElementById("bbb");
 *         aaa.showValue = function() {alert(this.value);}
 *         aaa.showValue2 = aaa.showValue.bind(bbb);
 *     </script>
 *  那么，调用aaa.showValue 将返回"aaa", 但调用aaa.showValue2 将返回"bbb"。
 *
 * apply 是ie5.5后才出现的新方法(Netscape好像很早就支持了)。
 * 该方法更多的资料参考MSDN http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp
 * 还有一个 call 方法，应用起来和 apply 类似。可以一起研究下。
 */
Function.prototype.bind = function(object) {
  var method = this;
  return function() {
    method.apply(object, arguments);
  }
}

/**
 * 和bind一样，不过这个方法一般用做html控件对象的事件处理。所以要传递event对象
 * 注意这时候，用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参数形式的定义。
 * 如同 java 两个过载的方法。
 */
Function.prototype.bindAsEventListener = function(object) {
  var method = this;
  return function(event) {
    method.call(object, event || window.event);
  }
}

/**
 * 将整数形式RGB颜色值转换为HEX形式
 */
Number.prototype.toColorPart = function() {
  var digits = this.toString(16);
  if (this < 16) return '0' + digits;
  return digits;
}

/**
 * 典型 Ruby 风格的函数，将参数中的方法逐个调用，返回第一个成功执行的方法的返回值
 */
var Try = {
  these: function() {
    var returnValue;
   
    for (var i = 0; i < arguments.length; i++) {
      var lambda = arguments[i];
      try {
        returnValue = lambda();
        break;
      } catch (e) {}
    }
   
    return returnValue;
  }
}

/*--------------------------------------------------------------------------*/

/**
 * 一个设计精巧的定时执行器
 * 首先由 Class.create() 创建一个 PeriodicalExecuter 类型，
 * 然后用对象直接量的语法形式设置原型。
 *
 * 需要特别说明的是 rgisterCallback 方法，它调用上面定义的函数原型方法bind, 并传递自己为参数。
 * 之所以这样做，是因为 setTimeout 默认总以 window 对象为当前对象，也就是说，如果 registerCallback 方法定义如下的话：
 *     registerCallback: function() {
 *         setTimeout(this.onTimerEvent, this.frequency * 1000);
 *     }
 * 那么，this.onTimeoutEvent 方法执行失败，因为它无法访问 this.currentlyExecuting 属性。
 * 而使用了bind以后，该方法才能正确的找到this，也就是PeriodicalExecuter的当前实例。
 */
var PeriodicalExecuter = Class.create();
PeriodicalExecuter.prototype = {
  initialize: function(callback, frequency) {
    this.callback = callback;
    this.frequency = frequency;
    this.currentlyExecuting = false;
   
    this.registerCallback();
  },
 
  registerCallback: function() {
    setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000);
  },
 
  onTimerEvent: function() {
    if (!this.currentlyExecuting) {
      try {
        this.currentlyExecuting = true;
        this.callback();
      } finally {
        this.currentlyExecuting = false;
      }
    }
   
    this.registerCallback();
  }
}

/*--------------------------------------------------------------------------*/

/**
 * 这个函数就 Ruby 了。我觉得它的作用主要有两个
 * 1.  大概是 document.getElementById(id) 的最简化调用。
 * 比如：$("aaa") 将返回上 aaa 对象
 * 2.  得到对象数组
 * 比如: $("aaa","bbb") 返回一个包括id为"aaa"和"bbb"两个input控件对象的数组。
 */
function $() {
  var elements = new Array();
 
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;
     
    elements.push(element);
  }
 
  return elements;
}

Ajax::prototype 源码解读 之 prototype.js 二[转载]
/**
 * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象
 */
var Ajax = {
  getTransport: function() {
    return Try.these(
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')},
      function() {return new XMLHttpRequest()}
    ) || false;
  },
 
  emptyFunction: function() {}
}

/**
 * 我以为此时的Ajax对象起到命名空间的作用。
 * Ajax.Base 声明为一个基础对象类型
 * 注意 Ajax.Base 并没有使用 Class.create() 的方式来创建，我想是因为作者并不希望 Ajax.Base 被库使用者实例化。
 * 作者在其他对象类型的声明中，将会继承于它。
 * 就好像 java 中的私有抽象类
 */
Ajax.Base = function() {};
Ajax.Base.prototype = {
  /**
   * extend (见prototype.js中的定义) 的用法真是让人耳目一新
   * options 首先设置默认属性，然后再 extend 参数对象，那么参数对象中也有同名的属性，那么就覆盖默认属性值。
   * 想想如果我写这样的实现，应该类似如下：
     setOptions: function(options) {
      this.options.methed = options.methed? options.methed : 'post';
      ..........
     }
     我想很多时候，java 限制了 js 的创意。
   */
  setOptions: function(options) {
    this.options = {
      method:       'post',
      asynchronous: true,
      parameters:   ''
    }.extend(options || {});
  }
}

/**
 * Ajax.Request 封装 XmlHttp
 */
Ajax.Request = Class.create();

/**
 * 定义四种事件(状态)， 参考http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp
 */
Ajax.Request.Events =
  ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'];

/**
 *
 */
Ajax.Request.prototype = (new Ajax.Base()).extend({
  initialize: function(url, options) {
    this.transport = Ajax.getTransport();
    this.setOptions(options);
 
    try {
      if (this.options.method == 'get')
        url += '?' + this.options.parameters + '&_=';
   
     /**
      * 此处好像强制使用了异步方式，而不是依照 this.options.asynchronous 的值
      */
      this.transport.open(this.options.method, url, true);
     
     /**
      * 这里提供了 XmlHttp 传输过程中每个步骤的回调函数
      */
      if (this.options.asynchronous) {
        this.transport.onreadystatechange = this.onStateChange.bind(this);
        setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10);
      }
             
      this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      this.transport.setRequestHeader('X-Prototype-Version', Prototype.Version);

      if (this.options.method == 'post') {
        this.transport.setRequestHeader('Connection', 'close');
        this.transport.setRequestHeader('Content-type',
          'application/x-www-form-urlencoded');
      }
     
      this.transport.send(this.options.method == 'post' ?
        this.options.parameters + '&_=' : null);
                     
    } catch (e) {
    }   
  },
     
  onStateChange: function() {
    var readyState = this.transport.readyState;
   /**
    * 如果不是 Loading 状态，就调用回调函数
     */
    if (readyState != 1)
      this.respondToReadyState(this.transport.readyState);
  },
 
  /**
   * 回调函数定义在 this.options 属性中，比如:
      var option = {
         onLoaded : function(req) {...};
         ......
      }
      new Ajax.Request(url, option);
   */
  respondToReadyState: function(readyState) {
    var event = Ajax.Request.Events[readyState];
    (this.options['on' + event] || Ajax.emptyFunction)(this.transport);
  }
});

/**
 * Ajax.Updater 用于绑定一个html元素与 XmlHttp调用的返回值。类似与 buffalo 的 bind。
 * 如果 options 中有 insertion(from dom.js) 对象的话, insertion 能提供更多的插入控制。
 */
Ajax.Updater = Class.create();
Ajax.Updater.prototype = (new Ajax.Base()).extend({
  initialize: function(container, url, options) {
    this.container = $(container);
    this.setOptions(options);
 
    if (this.options.asynchronous) {
      this.onComplete = this.options.onComplete;
      this.options.onComplete = this.updateContent.bind(this);
    }
   
    this.request = new Ajax.Request(url, this.options);
   
    if (!this.options.asynchronous)
      this.updateContent();
  },
 
  updateContent: function() {
    if (this.options.insertion) {
      new this.options.insertion(this.container,
        this.request.transport.responseText);
    } else {
      this.container.innerHTML = this.request.transport.responseText;
    }

    if (this.onComplete) {
      setTimeout((function() {this.onComplete(this.request)}).bind(this), 10);
    }
  }
});
Ajax::prototype 源码解读 之 prototype.js 三[转载]
/**
 * 针对 页面元素对象 的工具类，提供一些简单静态方法
 */
var Field = {
  /**
   * 清除参数引用对象的值
   */
  clear: function() {
    for (var i = 0; i < arguments.length; i++)
      $(arguments[i]).value = '';
  },

  /**
   * 使参数引用对象获取焦点
   */
  focus: function(element) {
    $(element).focus();
  },
 
  /**
   * 判断参数引用对象值是否为空，如为空，返回false, 反之true
   */
  present: function() {
    for (var i = 0; i < arguments.length; i++)
      if ($(arguments[i]).value == '') return false;
    return true;
  },
 
  /**
   * 使选中参数引用对象
   */
  select: function(element) {
    $(element).select();
  },

  /**
   * 使参数引用对象处于可编辑状态
   */
  activate: function(element) {
    $(element).focus();
    $(element).select();
  }
}

/*--------------------------------------------------------------------------*/

/**
 * 表单工具类
 */
var Form = {
  /**
   * 将表单元素序列化后的值组合成 QueryString 的形式
   */
  serialize: function(form) {
    var elements = Form.getElements($(form));
    var queryComponents = new Array();
   
    for (var i = 0; i < elements.length; i++) {
      var queryComponent = Form.Element.serialize(elements[i]);
      if (queryComponent)
        queryComponents.push(queryComponent);
    }
   
    return queryComponents.join('&');
  },
 
  /**
   * 得到表单的所有元素对象
   */
  getElements: function(form) {
    form = $(form);
    var elements = new Array();

    for (tagName in Form.Element.Serializers) {
      var tagElements = form.getElementsByTagName(tagName);
      for (var j = 0; j < tagElements.length; j++)
        elements.push(tagElements[j]);
    }
    return elements;
  },
 
  /**
   * 将指定表单的元素置于不可用状态
   */
  disable: function(form) {
    var elements = Form.getElements(form);
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      element.blur();
      element.disable = 'true';
    }
  },

  /**
   * 使表单的第一个非 hidden 类型而且处于可用状态的元素获得焦点
   */
  focusFirstElement: function(form) {
    form = $(form);
    var elements = Form.getElements(form);
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      if (element.type != 'hidden' && !element.disabled) {
        Field.activate(element);
        break;
      }
    }
  },

  /*
   * 重置表单
   */
  reset: function(form) {
    $(form).reset();
  }
}

/**
 * 表单元素工具类
 */
Form.Element = {
  /**
   * 返回表单元素的值先序列化再进行 URL 编码后的值
   */
  serialize: function(element) {
    element = $(element);
    var method = element.tagName.toLowerCase();
    var parameter = Form.Element.Serializers[method](element);
   
    if (parameter)
      return encodeURIComponent(parameter[0]) + '=' +
        encodeURIComponent(parameter[1]);                   
  },
 
  /**
   *  返回表单元素序列化后的值
   */
  getValue: function(element) {
    element = $(element);
    var method = element.tagName.toLowerCase();
    var parameter = Form.Element.Serializers[method](element);
   
    if (parameter)
      return parameter[1];
  }
}

/**
 * prototype 的所谓序列化其实就是将表单的名字和值组合成一个数组
 */
Form.Element.Serializers = {
  input: function(element) {
    switch (element.type.toLowerCase()) {
      case 'hidden':
      case 'password':
      case 'text':
        return Form.Element.Serializers.textarea(element);
      case 'checkbox': 
      case 'radio':
        return Form.Element.Serializers.inputSelector(element);
    }
    return false;
  },
 
  inputSelector: function(element) {
    if (element.checked)
      return [element.name, element.value];
  },

  textarea: function(element) {
    return [element.name, element.value];
  },

  /**
   * 看样子，也不支持多选框(select-multiple)
   */
  select: function(element) {
    var index = element.selectedIndex;
    var value = element.options[index].value || element.options[index].text;
    return [element.name, (index >= 0) ? value : ''];
  }
}

/*--------------------------------------------------------------------------*/

/**
 * Form.Element.getValue 也许会经常用到，所以做了一个快捷引用
 */
var $F = Form.Element.getValue;

/*--------------------------------------------------------------------------*/

/**
 * Abstract.TimedObserver 也没有用 Class.create() 来创建，和Ajax.Base 意图应该一样
 * Abstract.TimedObserver 顾名思义，是套用Observer设计模式来跟踪指定表单元素，
 * 当表单元素的值发生变化的时候，就执行回调函数
 *
 * 我想　Observer 与注册onchange事件相似，不同点在于 onchange 事件是在元素失去焦点的时候才激发。
 * 同样的与 onpropertychange 事件也相似，不过它只关注表单元素的值的变化，而且提供timeout的控制。
 *
 * 除此之外，Observer 的好处大概就在与更面向对象，另外可以动态的更换回调函数，这就比注册事件要灵活一些。
 * Observer 应该可以胜任动态数据校验，或者多个关联下拉选项列表的连动等等
 *
 */
Abstract.TimedObserver = function() {}

/**
 * 这个设计和 PeriodicalExecuter 一样，bind 方法是实现的核心
 */
Abstract.TimedObserver.prototype = {
  initialize: function(element, frequency, callback) {
    this.frequency = frequency;
    this.element   = $(element);
    this.callback  = callback;
   
    this.lastValue = this.getValue();
    this.registerCallback();
  },
 
  registerCallback: function() {
    setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000);
  },
 
  onTimerEvent: function() {
    var value = this.getValue();
    if (this.lastValue != value) {
      this.callback(this.element, value);
      this.lastValue = value;
    }
   
    this.registerCallback();
  }
}

/**
 * Form.Element.Observer 和 Form.Observer 其实是一样的
 * 注意 Form.Observer 并不是用来跟踪整个表单的，我想大概只是为了减少书写(这是Ruby的一个设计原则)
 */
Form.Element.Observer = Class.create();
Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({
  getValue: function() {
    return Form.Element.getValue(this.element);
  }
});

Form.Observer = Class.create();
Form.Observer.prototype = (new Abstract.TimedObserver()).extend({
  getValue: function() {
    return Form.serialize(this.element);
  }
});
Ajax::prototype 源码解读 之 prototype.js 四[转载]
/**
 * 根据 class attribute 的名字得到对象数组，支持 multiple class
 *
 */
document.getElementsByClassName = function(className) {
  var children = document.getElementsByTagName('*') || document.all;
  var elements = new Array();
 
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
      if (classNames[j] == className) {
        elements.push(child);
        break;
      }
    }
  }
 
  return elements;
}

/*--------------------------------------------------------------------------*/

/**
 * Element 就象一个 java 的工具类，主要用来 隐藏/显示/销除 对象，以及获取对象的简单属性。
 *
 */
var Element = {
  toggle: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      element.style.display =
        (element.style.display == 'none' ? '' : 'none');
    }
  },

  hide: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      element.style.display = 'none';
    }
  },

  show: function() {
    for (var i = 0; i < arguments.length; i++) {
      var element = $(arguments[i]);
      element.style.display = '';
    }
  },

  remove: function(element) {
    element = $(element);
    element.parentNode.removeChild(element);
  },
   
  getHeight: function(element) {
    element = $(element);
    return element.offsetHeight;
  }
}

/**
 * 为 Element.toggle 做了一个符号连接，大概是兼容性的考虑
 */
var Toggle = new Object();
Toggle.display = Element.toggle;

/*--------------------------------------------------------------------------*/

/**
 * 动态插入内容的实现，MS的Jscript实现中对象有一个 insertAdjacentHTML 方法(http: //msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp)
 * 这里算是一个对象形式的封装。
 */
Abstract.Insertion = function(adjacency) {
  this.adjacency = adjacency;
}

Abstract.Insertion.prototype = {
  initialize: function(element, content) {
    this.element = $(element);
    this.content = content;
   
    if (this.adjacency && this.element.insertAdjacentHTML) {
      this.element.insertAdjacentHTML(this.adjacency, this.content);
    } else {
     /**
      * gecko 不支持 insertAdjacentHTML 方法，但可以用如下代码代替
      */
      this.range = this.element.ownerDocument.createRange();
     /**
      * 如果定义了 initializeRange 方法，则实行，这里相当与定义了一个抽象的 initializeRange 方法
      */
      if (this.initializeRange) this.initializeRange();
      this.fragment = this.range.createContextualFragment(this.content);

     /**
      * insertContent 也是一个抽象方法，子类必须实现
      */
      this.insertContent();
    }
  }
}

/**
 * prototype 加深了我的体会，就是写js 如何去遵循　Don’t Repeat Yourself (DRY) 原则
 * 上文中 Abstract.Insertion 算是一个抽象类，定义了名为　initializeRange 的一个抽象方法
 * var Insertion = new Object()　建立一个命名空间
 * Insertion.Before|Top|Bottom|After 就象是四个java中的四个静态内部类，而它们分别继承于Abstract.Insertion，并实现了initializeRange方法。
 */
var Insertion = new Object();

Insertion.Before = Class.create();
Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({
  initializeRange: function() {
    this.range.setStartBefore(this.element);
  },
 
  /**
   * 将内容插入到指定节点的前面, 与指定节点同级
   */
  insertContent: function() {
    this.element.parentNode.insertBefore(this.fragment, this.element);
  }
});

Insertion.Top = Class.create();
Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({
  initializeRange: function() {
    this.range.selectNodeContents(this.element);
    this.range.collapse(true);
  },
 
  /**
   * 将内容插入到指定节点的第一个子节点前，于是内容变为该节点的第一个子节点
   */
  insertContent: function() { 
    this.element.insertBefore(this.fragment, this.element.firstChild);
  }
});

Insertion.Bottom = Class.create();
Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({
  initializeRange: function() {
    this.range.selectNodeContents(this.element);
    this.range.collapse(this.element);
  },
 
  /**
   * 将内容插入到指定节点的最后，于是内容变为该节点的最后一个子节点
   */
  insertContent: function() {
    this.element.appendChild(this.fragment);
  }
});

Insertion.After = Class.create();
Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({
  initializeRange: function() {
    this.range.setStartAfter(this.element);
  },

  /**
   * 将内容插入到指定节点的后面, 与指定节点同级
   */
  insertContent: function() {
    this.element.parentNode.insertBefore(this.fragment,
      this.element.nextSibling);
  }
});

Ajax::prototype 源码解读 之 prototype.js 五[转载]
prototype 还有两个源码文件 effects.js compat.js 就不贴出来了。两者并不常用，effects.js 看example 做花哨的效果还不错，不过代码中没有太多新鲜的东西。

需要指出的就是
compat.js 中 Funcation.prototype.apply 的实现有两个错误（应该是拼写错误）， 我分别贴出来，大家比较一下就清楚了。

to_char(sysdate, 'dd') 查看今天是几号to_char(sysdate, 'ww') 查看这是这个月第几个星期

to_char(sysdate, 'mm')  查看这是一年中第几个月

to_char(sysdate, 'yyyy') 查看年份last_day(to_date('2007-02-01','YYYY-MM-DD'))查看一个月的最后一天，add_months(sysdate,10)查看若干个月后的今天，next_day(sysdate,'星期五')给个日期查看后面的最近的星期几的日期，不过这个星期五要是换成英文居然有问题，第2个参数可以是数字1-7，分别表示周日到周六。

下面贴个全的，需要的时候顺便查一下。

一、PL/SQL单行函数和组函数详解

函数是一种有零个或多个参数并且有一个返回值的程序。在SQL中Oracle内建了一系列函数，这些函数都可被称为SQL或PL/SQL语句，函数主要分为两大类：单行函数和组函数。

本文将讨论如何利用单行函数以及使用规则。
1、SQL中的单行函数

SQL和PL/SQL中自带很多类型的函数，有字符、数字、日期、转换、和混合型等多种函数用于处理单行数据，因此这些都可被统称为单行函数。这些函数均可用于SELECT,WHERE、ORDER BY等子句中，例如下面的例子中就包含了TO_CHAR,UPPER,SOUNDEX等单行函数。

SELECT ename,TO_CHAR(hiredate,'day,DD-Mon-YYYY')FROM empWhere UPPER(ename) Like 'AL%'ORDER BY SOUNDEX(ename)

单行函数也可以在其他语句中使用，如update的SET子句，INSERT的VALUES子句，DELET的WHERE子句,认证考试特别注意在SELECT语句中使用这些函数，所以我们的注意力也集中在SELECT语句中。

2、NULL和单行函数

在如何理解NULL上开始是很困难的，就算是一个很有经验的人依然对此感到困惑。NULL值表示一个未知数据或者一个空值，算术操作符的任何一个操作数为NULL值，结果均为提个NULL值,这个规则也适合很多函数，只有CONCAT,DECODE,DUMP,NVL,REPLACE在调用了NULL参数时能够返回非NULL值。在这些中NVL函数时最重要的，因为他能直接处理NULL值，NVL有两个参数:NVL(x1,x2),x1和x2都式表达式，当x1为null时返回X2,否则返回x1。

下面我们看看emp数据表它包含了薪水、奖金两项，需要计算总的补偿。

column name emp_id salary bonuskey type pk nulls/unique nn,u nnfk table datatype number number numberlength 11.2 11.2

不是简单的将薪水和奖金加起来就可以了，如果某一行是null值那么结果就将是null，比如下面的例子：

update empset salary=(salary+bonus)*1.1

这个语句中，雇员的工资和奖金都将更新为一个新的值，但是如果没有奖金，即 salary + null,那么就会得出错误的结论，这个时候就要使用nvl函数来排除null值的影响。

所以正确的语句是：

update empset salary=(salary+nvl(bonus,0)*1.1

3、单行字符串函数

单行字符串函数用于操作字符串数据，他们大多数有一个或多个参数，其中绝大多数返回字符串。

ASCII()

c1是一字符串，返回c1第一个字母的ASCII码，他的逆函数是CHR()

SELECT ASCII('A') BIG_A,ASCII('z') BIG_z FROM empBIG_A BIG_z65 122

CHR()[NCHAR_CS]

i是一个数字，函数返回十进制表示的字符。

select CHR(65),CHR(122),CHR(223) FROM empCHR65 CHR122 CHR223A z B

CONCAT(,)

c1,c2均为字符串，函数将c2连接到c1的后面，如果c1为null,将返回c2.如果c2为null,则返回c1，如果c1、c2都为null，则返回null。他和操作符||返回的结果相同

select concat('slobo ','Svoboda') username from dualusernameslobo Syoboda
INITCAP()

c1为一字符串。函数将每个单词的第一个字母大写其它字母小写返回。单词由空格，控制字符，标点符号限制。

select INITCAP('veni,vedi,vici') Ceasar from dualCeasarVeni,Vedi,Vici

INSTR(,[,[,]])

c1,c2均为字符串，i,j为整数。函数返回c2在c1中第j次出现的位置，搜索从c1的第i个字符开始。当没有发现需要的字符时返回0,如果i为负数，那么搜索将从右到左进行，但是位置的计算还是从左到右，i和j的缺省值为1。

select INSTR('Mississippi','i',3,3) from dualINSTR('MISSISSIPPI','I',3,3)11select INSTR('Mississippi','i',-2,3) from dualINSTR('MISSISSIPPI','I',3,3)2

INSTRB(,[,i[,j])

与INSTR()函数一样，只是他返回的是字节，对于单字节INSTRB()等于INSTR()。

LENGTH()

c1为字符串，返回c1的长度，如果c1为null，那么将返回null值。

select LENGTH('Ipso Facto') ergo from dualergo10

LENGTHb()

与LENGTH()一样，返回字节。

lower()

返回c的小写字符，经常出现在where子串中。

select LOWER(colorname) from itemdetail WHERE LOWER(colorname) LIKE '%white%'COLORNAMEWinterwhite

LPAD(,[,])

c1,c2均为字符串，i为整数。在c1的左侧用c2字符串补足致长度i,可多次重复，如果i小于c1的长度，那么只返回i那么长的c1字符，其他的将被截去。c2的缺省值为单空格，参见RPAD。

select LPAD(answer,7,'') padded,answer unpadded from question;PADDED UNPADDED Yes YesNO NOMaybe maybe

LTRIM(,)

把c1中最左边的字符去掉，使其第一个字符不在c2中，如果没有c2，那么c1就不会改变。

select LTRIM('Mississippi','Mis') from dualLTRppi

RPAD(,[,])

在c1的右侧用c2字符串补足致长度i,可多次重复，如果i小于c1的长度，那么只返回i那么长的c1字符，其他的将被截去。c2的缺省值为单空格,其他与LPAD相似。

RTRIM(,)

把c1中最右边的字符去掉，使其第后一个字符不在c2中，如果没有c2，那么c1就不会改变。

REPLACE(,[,])

c1,c2,c3都是字符串，函数用c3代替出现在c1中的c2后返回。

select REPLACE('uptown','up','down') from dualREPLACEdowntown

STBSTR(,[,])

c1为一字符串，i,j为整数，从c1的第i位开始返回长度为j的子字符串，如果j为空，则直到串的尾部。

select SUBSTR('Message',1,4) from dualSUBSMess

SUBSTRB(,[,])

与SUBSTR大致相同，只是I,J是以字节计算。

SOUNDEX()

返回与c1发音相似的词。

select SOUNDEX('dawes') Dawes SOUNDEX('daws') Daws, SOUNDEX('dawson') from dualDawes Daws DawsonD200 D200 D250

TRANSLATE(,,)

将c1中与c2相同的字符以c3代替

select TRANSLATE('fumble','uf','ar') test from dualTEXTramble

TRIM([[]] from c3)

将c3串中的第一个，最后一个，或者都删除。

select TRIM(' space padded ') trim from dual TRIMspace padded

UPPER()

返回c1的大写，常出现where子串中

select name from dual where UPPER(name) LIKE 'KI%'NAMEKING

4、单行数字函数

单行数字函数操作数字数据，执行数学和算术运算。所有函数都有数字参数并返回数字值。所有三角函数的操作数和值都是弧度而不是角度，oracle没有提供内建的弧度和角度的转换函数。

ABS()

返回n的绝对值

ACOS()

反余弦函数，返回-1到1之间的数。n表示弧度

select ACOS(-1) pi,ACOS(1) ZERO FROM dualPI ZERO3.14159265 0

ASIN()

反正弦函数，返回-1到1，n表示弧度

ATAN()

反正切函数，返回n的反正切值，n表示弧度。

CEIL()

返回大于或等于n的最小整数。

COS()

返回n的余玄值，n为弧度

COSH()

返回n的双曲余玄值，n 为数字。

select COSH(<1.4>) FROM dualCOSH(1.4)2.15089847

EXP()

返回e的n次幂，e=2.71828183.

FLOOR()

返回小于等于N的最大整数。

LN()

返回N的自然对数，N必须大于0

LOG(,)

返回以n1为底n2的对数

MOD()

返回n1除以n2的余数
POWER(,)

返回n1的n2次方

ROUND(,)

返回舍入小数点右边n2位的n1的值，n2的缺省值为0，这回将小数点最接近的整数，如果n2为负数就舍入到小数点左边相应的位上，n2必须是整数。

select ROUND(12345,-2),ROUND(12345.54321,2) FROM dualROUND(12345,-2) ROUND(12345.54321,2)12300 12345.54

SIGN()

如果n为负数，返回-1,如果n为正数，返回1，如果n=0返回0

SIN()

返回n的正玄值,n为弧度。

SINH()

返回n的双曲正玄值,n为弧度。

SQRT()

返回n的平方根,n为弧度

TAN()

返回n的正切值,n为弧度

TANH()

返回n的双曲正切值,n为弧度

TRUNC(,)

返回截尾到n2位小数的n1的值，n2缺省设置为0，当n2为缺省设置时会将n1截尾为整数，如果n2为负值，就截尾在小数点左边相应的位上。

5、单行日期函数

单行日期函数操作DATA数据类型，绝大多数都有DATA数据类型的参数，绝大多数返回的也是DATA数据类型的值。

ADD_MONTHS(,)

返回日期d加上i个月后的结果。i可以使任意整数。如果i是一个小数，那么数据库将隐式的他转换成整数，将会截去小数点后面的部分。

LAST_DAY()

函数返回包含日期d的月份的最后一天

MONTHS_BETWEEN(,)

返回d1和d2之间月的数目,如果d1和d2的日的日期都相同，或者都使该月的最后一天，那么将返回一个整数，否则会返回的结果将包含一个分数。

NEW_TIME(,,)

d1是一个日期数据类型，当时区tz1中的日期和时间是d时，返回时区tz2中的日期和时间。tz1和tz2时字符串。

NEXT_DAY(,)

返回日期d后由dow给出的条件的第一天，dow使用当前会话中给出的语言指定了一周中的某一天，返回的时间分量与d的时间分量相同。

select NEXT_DAY('01-Jan-2000','Monday') "1st Monday",NEXT_DAY('01-Nov-2004','Tuesday')+7 "2nd Tuesday") from dual;1st Monday 2nd Tuesday03-Jan-2000 09-Nov-2004

ROUND([,])

将日期d按照fmt指定的格式舍入，fmt为字符串。

SYADATE

函数没有参数，返回当前日期和时间。

TRUNC([,])

返回由fmt指定的单位的日期d
6、单行转换函数

单行转换函数用于操作多数据类型，在数据类型之间进行转换。

CHARTORWID()

c 使一个字符串，函数将c转换为RWID数据类型。

SELECT test_id from test_case where rowid=CHARTORWID('AAAA0SAACAAAALiAAA')

CONVERT(,[,])

c尾字符串，dset、sset是两个字符集，函数将字符串c由sset字符集转换为dset字符集，sset的缺省设置为数据库的字符集。

HEXTORAW()

x为16进制的字符串，函数将16进制的x转换为RAW数据类型。

RAWTOHEX()

x是RAW数据类型字符串，函数将RAW数据类转换为16进制的数据类型。

ROWIDTOCHAR()

函数将ROWID数据类型转换为CHAR数据类型。

TO_CHAR([[,)

x是一个data或number数据类型，函数将x转换成fmt指定格式的char数据类型，如果x为日期nlsparm=NLS_DATE_LANGUAGE 控制返回的月份和日份所使用的语言。如果x为数字nlsparm=NLS_NUMERIC_CHARACTERS 用来指定小数位和千分位的分隔符，以及货币符号。

NLS_NUMERIC_CHARACTERS ="dg", NLS_CURRENCY="string"

TO_DATE([,[,)

c表示字符串，fmt表示一种特殊格式的字符串。返回按照fmt格式显示的c,nlsparm表示使用的语言。函数将字符串c转换成date数据类型。

TO_MULTI_BYTE()

c表示一个字符串，函数将c的担子截字符转换成多字节字符。

TO_NUMBER([,[,)

c表示字符串，fmt表示一个特殊格式的字符串，函数返回值按照fmt指定的格式显示。nlsparm表示语言，函数将返回c代表的数字。

TO_SINGLE_BYTE()

将字符串c中得多字节字符转化成等价的单字节字符。该函数仅当数据库字符集同时包含单字节和多字节字符时才使用

7、其它单行函数

BFILENAME(,)

dir是一个directory类型的对象，file为一文件名。函数返回一个空的BFILE位置值指示符，函数用于初始化BFILE变量或者是BFILE列。

DECODE(,,[,,,[])

x是一个表达式，m1是一个匹配表达式，x与m1比较，如果m1等于x，那么返回r1,否则,x与m2比较，依次类推m3,m4,m5....直到有返回结果。

DUMP(,[,[,[,]]])

x是一个表达式或字符，fmt表示8进制、10进制、16进制、或则单字符。函数返回包含了有关x的内部表示信息的VARCHAR2类型的值。如果指定了n1,n2那么从n1开始的长度为n2的字节将被返回。

EMPTY_BLOB()

该函数没有参数，函数返回 一个空的BLOB位置指示符。函数用于初始化一个BLOB变量或BLOB列。

EMPTY_CLOB()

该函数没有参数，函数返回 一个空的CLOB位置指示符。函数用于初始化一个CLOB变量或CLOB列。

GREATEST()

exp_list是一列表达式，返回其中最大的表达式，每个表达式都被隐含的转换第一个表达式的数据类型，如果第一个表达式是字符串数据类型中的任何一个，那么返回的结果是varchar2数据类型，同时使用的比较是非填充空格类型的比较。
LEAST()

exp_list是一列表达式，返回其中最小的表达式，每个表达式都被隐含的转换第一个表达式的数据类型，如果第一个表达式是字符串数据类型中的任何一个，将返回的结果是varchar2数据类型，同时使用的比较是非填充空格类型的比较。

UID

该函数没有参数，返回唯一标示当前数据库用户的整数。

USER

返回当前用户的用户名

USERENV()

基于opt返回包含当前会话信息。opt的可选值为：

ISDBA　 会话中SYSDBA脚色响应，返回TRUE

SESSIONID 　返回审计会话标示符

ENTRYID 返回可用的审计项标示符

INSTANCE在会话连接后，返回实例标示符。该值只用于运行Parallel 服务器并且有 多个实例的情况下使用。

LANGUAGE返回语言、地域、数据库设置的字符集。

LANG返回语言名称的ISO缩写。

TERMINAL为当前会话使用的终端或计算机返回操作系统的标示符。

VSIZE()            x是一个表达式。返回x内部表示的字节数。

二、SQL中的组函数

组函数也叫集合函数，返回基于多个行的单一结果，行的准确数量无法确定，除非查询被执行并且所有的结果都被包含在内。与单行函数不同的是，在解析时所有的行都是已知的。由于这种差别使组函数与单行函数有在要求和行为上有微小的差异.

1、组(多行)函数

与单行函数相比，oracle提供了丰富的基于组的，多行的函数。这些函数可以在select或select的having子句中使用，当用于select子串时常常都和GROUP BY一起使用。

AVG([{DISYINCT|ALL}])

返回数值的平均值。缺省设置为ALL

SELECT AVG(sal),AVG(ALL sal),AVG(DISTINCT sal) FROM scott.empAVG(SAL) AVG(ALL SAL) AVG(DISTINCT SAL)1877.94118 1877.94118 1916.071413

COUNT({*|DISTINCT|ALL} )

返回查询中行的数目，缺省设置是ALL,*表示返回所有的行。

MAX([{DISTINCT|ALL}])

返回选择列表项目的最大值，如果x是字符串数据类型，他返回一个VARCHAR2数据类型，如果X是一个DATA数据类型，返回一个日期，如果X是numeric数据类型，返回一个数字。注意distinct和all不起作用，应为最大值与这两种设置是相同的。

MIN([{DISTINCT|ALL}])

返回选择列表项目的最小值。

STDDEV([{DISTINCT|ALL}])

返回选者的列表项目的标准差，所谓标准差是方差的平方根。

SUM([{DISTINCT|ALL}])

返回选择列表项目的数值的总和。

VARIANCE([{DISTINCT|ALL}])

返回选择列表项目的统计方差。

2、用GROUP BY给数据分组

正如题目暗示的那样组函数就是操作那些已经分好组的数据，我们告诉数据库用GROUP BY怎样给数据分组或者分类，当我们在SELECT语句的SELECT子句中使用组函数时，我们必须把为分组或非常数列放置在GROUP BY子句中，如果没有用group by进行专门处理，那么缺省的分类是将整个结果设为一类。

select stat,counter(*) zip_count from zip_codes GROUP BY state;ST ZIP_COUNT-- ---------AK 360AL 1212AR 1309AZ 768CA 3982

在这个例子中，我们用state字段分类;如果我们要将结果按照zip_codes排序,可以用ORDER BY语句，ORDER BY子句可以使用列或组函数。

select stat,counter(*) zip_count from zip_codes GROUP BY state ORDER BY COUNT(*) DESC;ST COUNT(*)-- --------NY 4312PA 4297TX 4123CA 3982

3、用HAVING子句限制分组数据

现在你已经知道了在查询的SELECT语句和ORDER BY子句中使用主函数，组函数只能用于两个子串中，组函数不能用于WHERE子串中，例如下面的查询是错误的：

错误SELECT sales_clerk,SUN(sale_amount) FROM gross_sales WHERE sales_dept='OUTSIDE' AND SUM(sale_amount)>10000 GROUP BY sales_clerk

这个语句中数据库不知道SUM()是什么，当我们需要指示数据库对行分组，然后限制分组后的行的输出时，正确的方法是使用HAVING语句：

SELECT sales_clerk,SUN(sale_amount) FROM gross_sales WHERE sales_dept='OUTSIDE' GROUP BY sales_clerkHAVING SUM(sale_amount)>10000;

4、嵌套函数

函数可以嵌套。一个函数的输出可以是另一个函数的输入。操作数有一个可继承的执行过程。但函数的优先权只是基于位置，函数遵循由内到外，由左到右的原则。嵌套技术一般用于象DECODE这样的能被用于逻辑判断语句IF....THEN...ELSE的函数。

嵌套函数可以包括在组函数中嵌套单行函数，或者组函数嵌套入单行函数或组函数中。比如下面的例子：

SELECT deptno, GREATEST(COUNT(DISTINCT job),COUNT(DISTINCT mgr) cnt,COUNT(DISTINCT job) jobs,COUNT(DISTINCT mgr) mgrsFROM empGROUP BY deptno;DEPTNO CNT JOBS MGRS------ --- ---- ----10 4 4 220 4 3 430 3 3 2

2、Foreach 和For一样使用

3、Hidden组件 总是多余S的处理
 <input jwcid="@Hidden" type="hidden" value="ognl:blahblah" encode="false"/>

4、 Insert 组件
e.g.
    <input type="text" jwcid="name@Insert" value="ognl:user.name"/>
    页面表现时,将会到页面类中寻找getUser().getName()方法获取初值并输出
    相当于在页面上显示数据.

5、 TextField 组件
e.g.
    <input type="text" jwcid="username@TextField" value="ognl:username"/>
    页面表现时,将会到页面类中寻找getUsername()方法获取初值
    *如果是修改信息页面,通常初始值要在页面表现之前由setUsername()手动设置从数据库中读取出来的值
    表单提交时,通过setUsername()写入新值(即用户输入值),在类中通过getUsername()获取新值
    相当于在修改个人信息时,首先读出用户名赋予文本框(用户名)初值,用户修改时填入新值,后台获取之
    *Hidden属性区分是普通文本输入框(默认false)和密码输入框(hidden="ognl:true")
    readonly属性设置只读 readonly="true"为只读(后台可读取)
    *disabled属性设置是否可写 diabled="true"为不可写(后台也不可读取)

6、 TextArea 组件
e.g.
    <textarea jwcid="content@TextArea" value="ognl:content" cols="40" rows="10"></textarea>
    页面表现时,将会到页面类中寻找getContent()方法获取初值
    工作原理同TextField

7、 RadioGroup/Radio 组件
e.g.
    <span jwcid="headImage@RadioGroup" selected="ognl:headImage">
      <input jwcid="@Radio" type="radio" value="1"/>头像1
      <input jwcid="@Radio" type="radio" value="2"/>头像2
      <input jwcid="@Radio" type="radio" value="3"/>头像3
      <input jwcid="@Radio" type="radio" value="4"/>头像4
      <input jwcid="@Radio" type="radio" value="5"/>头像5
      <input jwcid="@Radio" type="radio" value="6"/>头像6
    </span>
    RadioGroup为每一个Radio提供一个唯一的ID。RadioGroup跟踪当前被选中的属性值，并且只有一个Radio能够被选中.
    页面提交时，RadioGroup组件就利用OGNL表达式向headImage字段写入被选中的Radio组件的value参数值.
    页面表现时(修改页面),将会到页面类中寻找getHeadImage()方法获取初值,然后寻找@Radio组件中与其相同的组件并勾选上.

8、 PropertySelection 组件
    使用PropertySelection组件必须要构造一个类来实现IPropertySelectionModel接口，并且重写该接口的5个方法.
    public int getOptionCount() //提供下拉菜单的长度
    public Object getOption(int index) //提供select标签的option
    public String getLabel(int index) //提供select标签的Label值，也就是下拉菜单显示的内容
    public String getValue(int index) //提供select标签的value值
    public Object translateValue(String value) //selected后的返回值，value值未必就是我们需要的返回值，可以在这个方法里面对返回的value做对应的转换或修改.
e.g.1. 性别下拉框
    <select jwcid="gender@ProPertySelection" name="genderSelect" value="ognl:gender" model="supportedGender">
      <option selected>先生</option>
      <option>女士</option>
    </select>

代码
GenderSelectionModel.java  
public class GenderSelectionModel implements IPropertySelectionModel {  
 
    public static final String male = "先生";  
 
    public static final String female = "女士";  
 
    public static final String[] genderOptions = { male, female };  
 
    public int getOptionCount() {  
        return genderOptions.length;  
    }  
 
    public Object getOption(int index) {  
        return this.translateValue(genderOptions[index]);  
    }  
 
    public String getLabel(int index) {  
        return genderOptions[index].toString();  
    }  
 
    public String getValue(int index) {  
        return genderOptions[index];  
    }  
 
    public Object translateValue(String value) {  
        if (value.equals("先生")) {  
            return "1";  
        } else {  
            return "0";  
        }  
    }  
} 

代码
ModUserInfo.java  
public IPropertySelectionModel getSupportedGender() {  
    return new GenderSelectionModel();  
} 

    存入数据库中"1"代表先生,"0"代表女士,通过translateValue(String value)方法转换
    页面表现时,通过model属性给出的IPropertySelectionModel获取下拉选项,即getSupportedGender().
    然后通过getGender()方法获取初值,比如获取"0",则在页面显示时寻找value值为"0"的选项即为"女士",并选择之作为初始选择项.

e.g.2. 日志类型下拉框
    <select jwcid="logType@PropertySelection" name="typeSelect" value="ognl:logType" model="supportedType">
      <option>心情日记</option>
      <option>情感天地</option>
      <option>生活感触</option>
    </select>

代码
TypeSelectionModel.java  
public class TypeSelectionModel implements IPropertySelectionModel {  
      
    private List typeList = new ArrayList();  
 
    public TypeSelectionModel(List typeList) {  
        this.typeList = typeList;  
    }  
 
    public int getOptionCount() {  
        return typeList.size();  
    }  
 
    public Object getOption(int index) {  
        return ((LogType)typeList.get(index)).getValue();  
    }  
 
    public String getLabel(int index) {  
        return ((LogType) typeList.get(index)).getName();  
    }  
 
    public String getValue(int index) {  
        return ((LogType) typeList.get(index)).getValue();  
    }  
 
    public Object translateValue(String value) {  
        return value;  
    }  
} 

代码
ModLog.java  
public IPropertySelectionModel getSupportedType() {  
    TypeSelectionModel typeSelectionModel =   
                           new TypeSelectionModel(loadType(getUser().getUserId()));  
    return typeSelectionModel;  
}  
 
private List loadType(int userid) {  
    ...//从数据库载入该用户的日志类型列表  
} 

    页面表现时,通过model属性给出的IPropertySelectionModel获取下拉选项,即getSupportedType().
    然后通过value属性给出的初始值即,getLogType()方法获取初值,比如获取"2",则在页面显示时寻找value值为"2"的选项即为"生活感触",并选择之作为初始选择项.

9、 Form组件
e.g.
    <form jwcid="logForm@Form">
      ...
    </form>
    Form的监听(listener)方法可以有两种方式:
      1. 在Form组件中声明.
        <form jwcid="logForm@Form" listener="ognl:listener:onLogin">
          ...
        </form>
      2. 在submit类型组件中声明.
        <input type="submit" jwcid="onLogin@Submit" listener="listener:onLogin" value="发表"/>或者
        <span jwcid="@ImageSubmit" image="..." listener="listener:onLogin"><img src="..." width="" height=""/></span>
      前一种方式当Form中只要有submit就会触发监听方法,后一种方式是Form中有多个submit,各自实现不同的监听方法.

G) Foreach 组件
e.g.
    <span jwcid="@Foreach" source="ognl:logList" value="ognl:item">
    循环组件,遍历source参数,在表现其内容前更新value参数,将Foreach组件所包含的内容重复表现,其中可以通过value参数获取所需显示内容.
    本例中,页面表现时通过getLogList()方法获取日志列表,循环取出其中数据更新item(日志对象)并予以显示.其中item需要在页面规范(.page)文件中声明:
    <property name="item"/>
    *class参数用来寻找类似CSS的文件对Foreach进行修饰.
    Foreach组件: class="ognl:beans.evenOdd.next"
    Page文件: <bean name="evenOdd" class="org.apache.tapestry.bean.EvenOdd"/>
    CSS文件: tr.odd{background-color: #ffffff;}tr.even{background-color: #eeeeee;}

10、 Conditional 组件
e.g.
    <span jwcid="@Conditional" condition='ognl:item.sex.equals("1")'>先生</span>
    <span jwcid="@Conditional" condition='ognl:item.sex.equals("0")'>女士</span>
    conditional参数为true时运行Conditional组件中的HTML模板内容.
    在Tapestry4.0以后就不支持该组件了, 可以使用其他组件来实现:
    1. Contrib:Choose和Contrib:When
    <library id="contrib" specification-path="classpath:/org/apache/tapestry/contrib/Contrib.library"/>(.application文件中引入Contrib类包)
    <span jwcid="@contrib:Choose">
      <span jwcid="@contrib:When" condition='ognl:user.gender.equals("1")'>先生</span>
      <span jwcid="@contrib:When" condition='ognl:user.gender.equals("0")'>女士</span>
    </span>
    2. If组件
    <span jwcid="@If" condition='ognl:item.sex.equals("1")'>先生</span>
    <span jwcid="@If" condition='ognl:item.sex.equals("0")'>女士</span>
    3. Else组件
    <span jwcid="@Else">man</span>

【============================ts的函数执行顺序========================================】
对之前的该文章进行了一些修正，主要是针对finishLoad()方法。
我觉得对初学者会有一些帮助。
下面这几个函数是我在使用的，它们的执行顺序依次从上到下。
1.protected void finishLoad() {} ***
2.public void pageValidate(PageEvent event) {}
3.public void activateExternalPage(Object[] parameters, IRequestCycle cycle) {}
4.public void pageBeginRender(PageEvent event) {}
// 如果有表单提交，则将form中的各字段的值赋给页面类
5. ...... 赋值
6.public void submit() // 表单提交等用listenter:调用的方法
7.protected void prepareForRender(IRequestCycle cycle) {}
----------------------------------------------------
1.protected void finishLoad() {}
这个函数最先执行，但是它实际上没有什么用处（我感觉）。因为：
　　这个函数只在页面池中没有某一个页面类、需要生成一个新的页面对象时才调用。这里就有一个陷阱：如果你的tomcat启动时使用了-Dorg.apache.tapestry.disable-caching=true(为了调试方便而设)，那么你每次刷新页面时，它都会执行（因为每个request都会新生成一个页面类对象），造成了它总是执行的假象。在实际的部署时，会使用caching，则这个函数执行的机会很少。所以要注意。
　　初始化的代码放在4 pageBeginRender()中
2.public void pageValidate(PageEvent event) {}
如果实现了PageValidateListener接口，则可以在这里进行验证，比如访问权限等。执行完1后，它就开始执行。
3.public void activateExternalPage(Object[] parameters, IRequestCycle cycle) {}
如果实现了IExternalPage接口，则可以从这里取得由外面传过来的参数。执行2后，执行到这里。在这里可以把那些参数取出，赋给页面类。
4.public void pageBeginRender(PageEvent event) {}
执行完3后，将执行本函数。但是这时从客户端传过来的参数还没有被赋值(如果提交了表单的话)。这里可以进行一些初始化操作。
5.执行完4后，如果有表单提交，在这里将会取出那些值，赋给对应的字段。(注意：只是将表单中有的值赋过来)
6.public void submit()
如果有表单提交的话，在这里将进行对应的操作。因为此时各字段已经取好值了，所以可以拿来直接用。
7.protected void prepareForRender(IRequestCycle cycle) {}
最后才执行这个方法。我们可以在其中进行为了在页面上显示数据而进行的操作，比如取得什么对象什么的，因为这里页面类的属性赋值已经结束，可以直接拿来使用了。
注意：如果执行了6，则还要执行4，再执行7。如果没有6，4完了就直接是7。
以上是我所总结的执行顺序，不当之处请指出。      

-----------------------------------------------------
最开始学tapestry的时候，觉得“怎么有这么多地方需要持久啊”。原来以前只知道pageBeginRender这个函数，什么初始化操作都放在它里面。可是它是在赋值之前执行，所以拿到的字段多都是空的，却都以为是没有持久化的缘故。所以在客户端里放了一大堆的@Hidden，或者session中持久，非常麻烦，，，对tapestry也产生的怀疑。现在才知道那些需要取得客户端传来的参数的代码，最好放在prepareForRender里，很多不必要的持久都可以省掉了

下载本文源码: ajaxform_gbk.zip 6KB

更新:
2007-01-03
修复了 AJAXFormer 中第二个参数 resultDiv 处理不当的问题;
增加了从服务器端返回脚本并加以执行的功能;
增加了表单提交后网络出错的错误显示功能.
这些新功能都已经放在示例页面中了.

测试通过: Resin 3.0.18, Tomcat 5.0.30, 5.5.20; 浏览器: IE 6/Firefox 2.0.

上一篇文章 JSP 中 AJAX 的表单提交中文问题的简单解决方案 主要是针对 UTF-8 版本的进行处理的, 鉴于中国大陆地区大部分还是用 GBK 编码写 JSP, 因此本文就针对 GBK 的实践结果进行介绍.

有朋友提到 当AJAX遭遇GBK的尴尬 里说当 AJAX 使用 GBK 编码后, 表单提交将出现乱码. 如前文所述, 只要全部采用 UTF-8 编码, 是没有任何问题的. 那么都用 GBK 呢?

首先要讲的是我们的文章还是一样的原则: 尽可能少的改动原来的代码来解决中文乱码问题. 所以本文的示例没有用过滤器等方法.

那么使用 GBK 编码到底有没有乱码问题呢?

第一个关键点就是 AJAX 的表单提交代码必须正确的按照 HTTP 规范实现, 即要保持原来的 GET/POST 方式不变, 也要保持里面的内容和浏览器提交的内容一摸一样. 以下内容摘自我编写的内部培训教材:

----------------- 引用开始 -----------------

首先必须要介绍一下 HTTP 协议和 GET, POST 的工作方式.

当用户在Web浏览器地址栏中输入一个带有http://前缀的URL并按下Enter后,或者在Web页面中某个以http://开头的超链接上单击鼠标,HTTP事务处理的第一个阶段--建立连接阶段就开始了.HTTP的默认端口是80.
随着连接的建立,HTTP就进入了客户向服务器发送请求的阶段.客户向服务器发送的请求是一个有特定格式的ASCII消息,其语法规则为:

请求消息的顶端是请求行,用于指定方法,URL和HTTP协议的版本,请求行的最后是回车换行.方法有GET,POST,HEAD,PUT,DELETE等.
在请求行之后是若干个报头(Header)行.每个报头行都是由一个报头和一个取值构成的二元对,报头和取值之间以":"分隔;报头行的最后是回车换行. 常见的报头有Accept(指定MIME媒体类型),Accept_Charset(响应消息的编码方式),Accept_Encoding(响应消息的字符集),User_Agent(用户的浏览器信息)等.
在请求消息的报头行之后是一个回车换行,表明请求消息的报头部分结束.在这个\n之后是请求消息的消息实体(Entity Body).
Web服务器在收到客户请求并作出处理之后,要向客户发送应答消息.与请求消息一样,应答消息的语法规则为:

应答消息的第一行为状态行,其中包括了HTTP版本号,状态码和对状态码进行简短解释的消息;状态行的最后是回车换行.状态码由3位数字组成,有5类:

• 1XX 保留
• 2XX 表示成功
• 3XX 表示URL已经被移走
• 4XX 表示客户错误
• 5XX 表示服务器错误

例如:415,表示不支持改媒体类型;503,表示服务器不能访问.最常见的是200,表示成功.常见的报头有:Last_Modified(最后修改时间),Content_Type(消息内容的MIME类型),Content_Length(内容长度)等.
在报头行之后也是一个回车换行,用以表示应答消息的报头部分的结束,以及应答消息实体的开始.
下面是一个应答消息的例子:

那么 GET 和 POST 有什么区别? 区别就是一个在 URL 请求里面附带了表单参数和值, 一个是在 HTTP 请求的消息实体中. 用下面的例子可以很容易的看到同样的数据通过GET和POST来发送的区别, 发送的数据是 username=张三 :

　GET 方式, 浏览器键入 http://localhost?username=张三

POST 方式:

比较一下上面的两段文字, 您会发现 GET 方式把表单内容放在前面的请求头中, 而 POST 则把这些内容放在请求的主体中了, 同时 POST 中把请求的 Content-Type 头设置为 application/x-www-form-urlencoded. 而发送的正文都是一样的, 可以这样来构造一个表单提交正文:

encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....

注: encodeURIComponent 返回一个包含了 charstring 内容的新的 String 对象（Unicode 格式）， 所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。 例如，空格返回的是 "%20" 。 字符的值大于 255 的用 %uxxxx 格式存储。参见 JavaScript 的 encodeURIComponent() 方法.

下面就讨论一下如何在 JavaScript 中执行一个 GET 或者 POST 请求. 如果您用过 Java, 那么您可能熟悉下列的用 java.net.URLConnection 类进行 POST 操作的代码(参考 Java Tip 34: POSTing via Java ):
　

以上的代码向 somepage 发送了一次 POST 请求, 数据为 name = Buford Early, email = buford@known-space.com.
用JavaScript 来执行 POST/GET 请求是同样的原理, 下面的代码展示了分别用 XMLHttpRequest 对象向 somepage 用 GET 和 POST 两种方式发送和上例相同的数据的具体过程:
GET 方式

POST 方式

至此希望你已经能够理解如何用 JavaScript 中的 XMLHttpRequest 对象来执行 GET/POST 操作, 剩下的工作就是您如何来构造这些提交的参数了, 最后我给出一个将现有的 form 提交代码修改为异步的 AJAX 提交的代码(注意目前作者还不知道如何让 file 上传表单域也能异步上传文件). 首先请看两个 JavaScript 函数:

// form - the form to submit

            // resultDivId - the division of which to display result text in, in null, then

            // create an element and add it to the end of the body

            function ajaxSubmitForm(form, resultDivId) {

            var elements = form.elements;// Enumeration the form elements

            var element;

            var i;

            

            var postContent = "";// Form contents need to submit

            

            for(i=0;i<elements.length;++i) {

            var element=elements[i];

            

            if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {

            postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";

            }

            else if(element.type=="select-one"||element.type=="select-multiple") {

            var options=element.options,j,item;

            for(j=0;j<options.length;++j){

            item=options[j];

            if(item.selected) {

            postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";

            }

            }

            } else if(element.type=="checkbox"||element.type=="radio") {

            if(element.checked) {

            postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";

            }

            } else if(element.type=="file") {

            if(element.value != "") {

            postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";

            }

            } else {

            postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";

            }

            }

            

            alert(postContent);

            

            ajaxSubmit(form.action, form.method, postContent);

            }

            

            // url - the url to do submit

            // method - "get" or "post"

            // postContent - the string with values to be submited

            // resultDivId - the division of which to display result text in, in null, then

            // create an element and add it to the end of the body

            function ajaxSubmit(url, method, postContent, resultDivId)

            {

            var loadingDiv = document.getElementById('loading');

            // call in new thread to allow ui to update

            window.setTimeout(function () {

            loadingDiv.innerText = "Loading....";

            loadingDiv.style.display = "";

            }, 1);

            

            // code for Mozilla, etc.

            if (window.XMLHttpRequest)

            {

            xmlhttp=new XMLHttpRequest();

            }

            // code for IE

            else if (window.ActiveXObject)

            {

            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

            }

            

            if(xmlhttp) {

            xmlhttp.onreadystatechange = function() {

            // if xmlhttp shows "loaded"

            if (xmlhttp.readyState==4)

            {

            if(resultDivId) {

            document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;

            } else {

            var result = document.createElement("DIV");

            result.style.border="1px solid #363636";

            result.innerHTML = xmlhttp.responseText;

            document.body.appendChild(result);

            }

            

            loadingDiv.innerHTML =

            "Submit finnished!";

            }

            

            };

            

            if(method.toLowerCase() == "get") {

            xmlhttp.open("GET", url + "?" + postContent, true);

            xmlhttp.send(null);

            } else if(method.toLowerCase() == "post") {

            xmlhttp.open("POST", url, true);

            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xmlhttp.send(postContent);

            }

            } else {

            loadingDiv.innerHTML =

            "Can't create XMLHttpRequest object, please check your web browser.";

            }

            

            }

函数 ajaxSubmitForm 将表单要提交的内容进行封装, 然后调用 ajaxSubmit 函数来执行真正的异步提交, 表单提交后所返回的结果则显示在给定的 DIV 容器中或者没有指定参数时用 DOM 对象动态生成一个 DIV 容器来显示结果并添加到页面末尾. 这样, 对原来的表单只需要改动一个地方就可以将原来的表单提交改为异步模式, 即在 form 标签里加入: onSubmit="ajaxSubmitForm(this);return false;" 即可, return false 确保表单不会被浏览器同步提交. 完整的例子请看这里.

----------------- 引用结束 -----------------

OK, 希望至此为止您已经理解了如何用 AJAX 来正确的执行 GET/POST. 如果这个问题您解决了, 可是说后台的乱码问题就和你直接通过表单提交几乎没有区别了. 这个方法的具体封装已经在附件的 ajax_common.js 中了.

至此也该贴出来我们的 GBK 编码的客户端页面的内容了:

那么第二个关键点就是服务器端的表单数据读取了.这个问题跟具体的服务器有很大关系. 对于 Resin 服务器来说, 问题很少, 基本上不论是 POST 和 GET, 出乱码的概率都比较小. 但是 Tomcat 就不敢恭维了, 这大概也是开源产品和商业产品的区别, 缺乏前后一致性和兼容性, 因为开源的不需要提供技术支持. Tomcat 的 GET/POST 的编码处理方式不同的版本都不一样, 就像 Eclipse/Netbeans 新版本从来不需要兼容老版本的插件 API 一样, Hibernate/Struts/Spring 也是一样, 所以学 Java 的很累. 当然, 这就是免费/开源的代价. 跑题了. 因此我们的服务器端代码大部分都是对 Tomcat 的乱码问题的解决(POST的没有问题, 主要是 GET 方法的).

booleanisTomcat=application.getServerInfo().toLowerCase().indexOf("tomcat") !=-1; 这一句主要针对 Tomcat 进行处理, 如果是 GET 方法的话, 就需要将表单参数从 ISO8859-1 转换到 UTF-8 (注意不是 GBK, 貌似 Tomcat 很喜欢 UTF-8?). 其它的地方和原来的 UTF-8 版本的没有区别. 当然如果您的站点应该用过滤器来更方便的解决这个问题.

小结:

1. 使用一致的字符集很重要, 要么全是 GBK, 要么全是 UTF-8, 如果有条件, 就全部用 UTF-8, 那样工作量是最小的;

2. 用 AJAX 提交的时候一定要按照 HTTP 的规范来, 做到和浏览器尽量兼容, 尤其是 POST 的时候不要再往 URL 地址里加参数了, 你那样是违规! 后果就是有的服务器会不搭理你传递的这些参数! 还是如我所讲, 参数提交之前要用 encodeURIComponent() 来转化, 这也是为了符合浏览器的习惯做法.

3. 后台如果读取参数有乱码, 就尽量多在 ISO8859-1, GBK, UTF-8 中间多转换几次试试, 可以试试偶写的那个 changeEncoding() 方法, 把几个转换后的表单值都列出来, 一定有一个是正确的, 总是可以解决问题的. 这个本来不应该是偶们的任务, 但是写服务器的人是老美, 尤其是 Tomcat 作者, 只熟悉 ISO8859-1.

4. 鉴于 TOMCAT 读取 POST 参数的时候很少出问题, 因此建议AJAX提交表单的时候多用 POST 方法, 尽量不用 GET.

运行截屏:

其它的一些资料可以参考Blogjava上的一篇原创文章: [原创]struts,ajax乱码解决方案

欢迎发表建议和更好的观点. 谢谢! 重申本文无意代替您的 AJAX 框架, 不过在你抓狂的时候可以考虑看看他们表单提交的代码, 改改它!

本人翻译的 XMLHttpRequest 对象介绍:

The XMLHttpRequest Object Reference XMLHttpRequest 对象参考

Methods 方法

Properties 属性