限制输入框的长度(汉字解决方案)

<script>
function getStringUTFLength(str) {
     var value = str.replace(/[^/x00-/xff]/g, "  ");
     return value.length;
}

function leftUTFString(str,len) {
     if(getStringUTFLength(str)<=len)
         return str;
     var value = str.substring(0,len);

     while(getStringUTFLength(value)>len) {
        value = value.substring(0,value.length-1);
    }
     return value;
}

function count() {
     var value = document.getElementById( "licenseother").value;
    value = value.replace(/[/u4e00-/u9fa5]/g, "  ");
     //alert(value.length);
     if(value.length>=255) {
        with(window.event) {
            cancelBubble =  true;
            keyCode=0;
            returnValue =  false;
        }
        document.getElementById( "licenseother").value = leftUTFString(document.getElementById( "licenseother").value,8);
    }
    document.getElementById( "result").value = 255-getStringUTFLength(document.getElementById( "licenseother").value);
}
</script>
<table width= "100%">
<tr><td>
本输入框限制输入255个字符(汉字计算为2个字符：)
</td></tr>
<tr><td>
<textarea cols=80 rows=3 wrap= "virtual" id= "licenseother" οnkeypress= "count()" οnkeyup= "count()" οnblur= "count();" onChange= "count();"></textarea>

</td></tr>
<tr><td>
剩余字符数：<input type= "text" size= "3" id= "result" value= "255">
</td></tr>
</table>
}

---

示例如下： <script type="text/javascript"> function getStringUTFLength(str) { var value = str.replace(/[^/x00-/xff]/g," "); return value.length; } function leftUTFString(str,len) { if(getStringUTFLength(str)<=len) return str; var value = str.substring(0,len); while(getStringUTFLength(value)>len) { value = value.substring(0,value.length-1); } return value; } function count() { var value = document.getElementById("licenseother").value; value = value.replace(/[/u4e00-/u9fa5]/g," "); //alert(value.length); if(value.length>=255) { with(window.event) { cancelBubble = true; keyCode=0; returnValue = false; } document.getElementById("licenseother").value = leftUTFString(document.getElementById("licenseother").value,8); } document.getElementById("result").value = 255-getStringUTFLength(document.getElementById("licenseother").value); } </script>

本输入框限制输入255个字符(汉字计算为2个字符：)

剩余字符数：

由 liu2liu2 发表于 01:25 PM | 评论 (5)

July 08, 2005

Ajax的小例子

<script language="Javascript" src="http://home.wangjianshuo.com/scripts/php/markit.php" type="text/javascript"> </script> 添加如下代码：

<script language=Javascript src="http://home.wangjianshuo.com/scripts/php/markit.php">
</script>

让自己的网页有了简单的批注功能

由 liu2liu2 发表于 02:05 PM | 评论 (5)

July 06, 2005

初探AjaxTags

AjaxTags项目是在现有的Struts HTML标记库的基础上，添加对AJAX支持。 AjaxTags改写了Struts标签类org.apache.struts.taglib.html.FormTag和org.apache.struts.taglib.html.BaseHandlerTag，并使用Struts的plugin技术，使得Struts提供了对AJAX的支持。 以下是jsp中简单的示例：

<html:form action="example1" ajaxRef="example1">
  First Name: <html:text property="firstName" size="25" value="Frank" />
  <br>
  Last Name: <html:text property="lastName" size="25" value="Zammetti" />
  <br>
  <html:button property="button" value="Click to do Ajax!" ajaxRef="button" />
</html:form>
Result:<br>
<span id="example1_resultLayer"> </span>

注意

和 的ajaxRef属性。 ajaxRef属性中内容是在ajax-config.xml中定义的，例如本示例的配置部分如下：

<!DOCTYPE ajaxConfig PUBLIC "ajaxConfig" "ajaxConfig">
<ajaxConfig>
  <!-- Define a custom request handler that generates XML for example 2 -->
	<handler name="CustomXMLGenerator" type="request">
		<function>customGenerateXML</function>
		<location>customXMLGenerator.js</location>
	</handler>
	<!-- Configuration for example 1 -->
	<form ajaxRef="example1">
		<element ajaxRef="button">
			<event type="onclick">
				<requestHandler type="std:QueryString">
					<target>example1.do</target>
					<parameter>firstName=firstName,lastName=lastName</parameter>
				</requestHandler>
				<responseHandler type="std:InnerHTML">
					<parameter>example1_resultLayer</parameter>
				</responseHandler>
			</event>
		</element>
	</form>
</ajaxConfig>

在配置文件中定义了该表单的属性，以及按钮触发的事件和回写结果的处理方法。采用很巧妙的封装方法实现了Struts的AJAX调用。当然Ajaxtags离实用阶段还有相对长的一段距离，但它提供了一种在现有的软件架构上高效率开发ajax应用程序的可行性方案。

由 liu2liu2 发表于 04:21 PM | 评论 (2)

May 08, 2005

关于AJAX构架的一点构想

以前搞了一个XPP的编程平台，应该来说，不是一个成功的东东。XPP本身确实解决了目前编程的诸多问题，例如页面状态保持、统一的界面风格、良好的数据效验器，但并没有考虑到数据传输的问题，虽然采用了压缩流来传递数据，但同样也增加了服务器的压力。也许对于中小型的企业应用，XPP可以作为一个被选的平台，但作为大型的企业应用，XPP表现恐怕很难实用。
在有了上次失败的经历后，考虑是否可以采用AJAX作为一个轻量级的框架(XPP的体系太过庞杂，过多在服务端考虑了前端的UI逻辑，也是这才是失败的根本)，侧重于业务逻辑层的调用，不再考虑UI层的逻辑。
AJAX主要实现的主要技术:
1、XmlHttpRequest
主要考虑是否需要支持浏览器的差异性，目前至少提供对IE和Mozilla的支持，以后是否考虑对其他浏览器进行支持？
这是是个很easy的问题，暂时不进行深入探索。

2、XML数据传输层的封装(AJAX的核心)
AJAX的核心数据传递毫无疑问只能是基于XML的，如何有效地对XML数据输送层进行封装，来保证构架良好的可用性和扩展性？这里主要是需要考虑两个方面：良好的封装性和执行效率。
我初步的想法是服务端采用类似buffalo的技术实现JAVA POJO与XML的序列化，客户端采用js实现类封装实现JAVA对象的映射(考虑采用服务器端自动生成js文件，并动态加载js对象，以提高浏览器的处理能力)，并在此基础上实现XML-PRC。

3、服务端集成
考虑AJAX与其它架构集成的方案，并保证系统良好的安全性和执行效率。

暂时处于疑问中的几个问题：
1、UI层如何表现？
采用AJAX的话，是采用js构建页面还是采用XmlHttp获取服务端返回的页面信息？

2、数据效验问题？
对于AJAX作RIA的应用，UI层的数据效验肯定是必要的，由于采用AJAX，用户绕过UI效验是很容易的事情，如果在服务端同样做数据效验的话，是否会增加代码的编写工作量？是否能够采用统一的数据效验？如何可以的话，如何实现？

目前buffalo主要有如下问题：
a. JAVA Object的序列化逻辑与RPC的业务逻辑混在一起，不利于系统的扩展
b. buffalo只支持UTF-8编码的XML，不支持GBK编码的XML
c. buffalo可以调用服务的所有方法，可能会对服务器产生一定的安全隐患

由 liu2liu2 发表于 02:17 PM | 评论 (3)

April 28, 2005

JavaScript OOP

1. 什么是JavaScript

JavaScript 是一种描述性的脚本语言(Script Language)，它可以非常自由地被嵌入到HTML 的文件之中。使用JavaScript 可以做什么呢？它的作用很简单，就是对网页浏览者当前所触发的事件进行处理或对网页进行初始化工作。它是事先在网页中编写好代码(或叫做“脚本”)，然后此代码伴随Html文件一起传送到客户端的浏览器上，由浏览器对这些代码进行解释执行，而其执行期间并没有劳驾服务器帮忙，这样就减轻了服务器的负担。
许多编程高手都瞧不起JavaScript编程，认为只是小孩子的玩意。的确，JavaScript作为一种脚本语言，比起其他语言来说，显得非常简单，没有很复杂的语法，没有庞杂的体系架构。

2. 面向对象编程(Object-Oriented Programming)

一个世界，可以完全由对象组成，而将算法所基于的世界只用对象表现出来，再进行后续代码的编写，这种编程方法就被称作面向对象的编程思想。
OOP的三大要素：
1． 封装
2． 继承
3． 多态

3. JavaScript如何实现OOP

3.1. 封装(Wrap)

JavaScript的对象封装，主要依靠function来实现。以下是一个简单的示例：

//*********************************************
// 定义Pet(宠物)对象
//*********************************************
function Pet() {
    //名称
    this.name = null;
    //颜色
    this.color = null;
    //获取名称
    this.getName = function() {
        return this.name;
    };
    //设置名称
    this.setName = function(newName) {
        this.name = newName;
    };
    //获取颜色
    this.getColor = function() {
        return this.color;
    };
    //设置颜色
    this.setColor = function(newColor) {
        this.color = newColor;
    };
    //定义一个需要实现的方法
    this.getFood = null;
    //获取宠物的描述信息
    this.toString = function() {
        return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
    };
}

3.2. 继承(inheritance)

JavaScript的继承的实现主要依靠prototype(原型)来实现，下面为Pet类编写一个子类。

//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
    //实现Pet中定义的getFood方法
    this.getFood = function() {
        return "fish";
    };
}

//声明Cat的原型，即Cat的父类
Cat.prototype = new Pet;

多层次继承
//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}

//声明PersianCat的原型，即PersianCat的父类
PersianCat.prototype = new Cat;
3.3.    重载(override)与多态(Polymorphism)
//重载Pet的toString方法
PersianCat.prototype.toString = function() {
    return "It's just a persian cat.";
};

注意：Override和Overload的区别，JavaScript是不支持Overload的，原因是……你自己想想吧。

JavaScript是一种弱类型的语言，所以不要把它与C++、JAVA等语言进行比较。

4. 附录

4.1. 完整的示例

4.1.1. Pet.js

//*********************************************
// 定义Pet(宠物)对象
//*********************************************
function Pet() {
    //名称
    this.name = null;
    //颜色
    this.color = null;
    //获取名称
    this.getName = function() {
        return this.name;
    };
    //设置名称
    this.setName = function(newName) {
        this.name = newName;
    };
    //获取颜色
    this.getColor = function() {
        return this.color;
    };
    //设置颜色
    this.setColor = function(newColor) {
        this.color = newColor;
    };
    //定义一个需要实现的方法
    this.getFood = null;
    //获取宠物的描述信息
    this.toString = function() {
        return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
    };
}

//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
    //实现Pet中定义的getFood方法
    this.getFood = function() {
        return "fish";
    };
}

//声明Cat的原型，即Cat的父类
Cat.prototype = new Pet;

//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}

//声明PersianCat的原型，即PersianCat的父类
PersianCat.prototype = new Cat;

//重载Pet的toString方法
PersianCat.prototype.toString = function() {
    return "It's just a persian cat.";
};

//*********************************************
// 定义Dog(狗)对象
//*********************************************
function Dog() {
    //实现Pet中定义的getFood方法
    this.getFood = function() {
        return "bone";
    };
}

//声明Dog的原型，即Dog的父类
Dog.prototype = new Pet;

4.1.2. Pet.htm

<script language="javascript" src="Pet.js" >
</ script >
< script language="javascript">
//定义一个Cat对象
var cat = new Cat();
cat.setName("MiMi");
cat.setColor("white");

//定义一个Dog对象
var dog = new Dog();
dog.setName("WangWang");
dog.setColor("yellow");

//定义一个PersianCat对象
var persianCat = new PersianCat();

//定义数组，保存上面的三个对象
var pets = new Array(3);
pets[0] = cat;
pets[1] = dog;
pets[2] = persianCat;

//测试程序
for(var i=0,size=pets.length;i<size;i++) {
    alert(pets[i].toString());
}
</script>

4.1.3. 运行结果

弹出三个对话框，分别如下：
The pet is MiMi,it's white,and it likes fish.
The pet is WangWang,it's yellow,and it likes bone.
It's just a persian cat.
本示例在IE6.0下测试通过。