很老的帖子了, 发在
ajaxcn.org上,贴到这里,以后查找方便
最近的项目中要使用ajax, 于是对各种ajax framework在进行比较之后,最终选择了prototype.js, 由于prototype.js是一个非常基础的ajax framework, 需要根据项目需求自己来进行一些扩展, 下面就是我所做的一些扩展, 如有误, 请指正!
我实现了一个Form.Element.ValidationObserver, 这个类需要依赖Validation.js以及相应的css(validation-advice), 该类是对表单中的单个元素通过ajax结合后台进行验证,其中因为无法实现对Validation.js进行重用,所以copy了其中的一些代码, 我实在想不到更好的办法,如果有哪位有更好的做法,不吝赐教!
/*
* 对Form.Element进行扩展
*/
Object.extend(Form.Element, {
/*
* 使指定的element不可用
*/
disable: function(element) {
element = $(element);
element.disabled = 'true';
},
/*
* 使指定的element可用
*/
enable: function(element) {
element = $(element);
element.disabled = '';
},
/*
* 判断值是否为空
*/
empty: function(element){
return this.getValue(element).match(/^s*$/);
},
/*
* 判断值是否不为空
*/
notEmpty: function(element){
return !this.empty(element);
}
});
/*
* 对Element进行扩展
*/
Object.extend(Element, {
/*
* 以块状显示指定的element
*/
block: function(){
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = 'block';
}
}
});
/*
* 验证观察者, 用来实现对指定字段进行验证
* 复写Abstract.EventObserver.initialize(), 在回调函数中通过ajax发送消息进行后台验证
*/
Form.Element.ValidationObserver = Class.create();
Object.extend(Object.extend(Form.Element.ValidationObserver.prototype, Form.Element.EventObserver.prototype),{
/*
* 对Form.Element.EventObserver.initialize进行的修改, 将要注册的验证回调函数设置为创建ajax验证请求
* element 为需要验证的元素
* url 为ajax要发送请求的地址
* parameterCallback 为取得验证参数的回调函数
* 使用方法:
* new Form.Element.ValidationObserver("pol",
"http://localhost:8080/agreement/ValidatePol",
function(){return Form.Element.serialize("pol");});
*/
initialize: function(element, url, parameterCallback) {
this.element = $(element);
this.callback = function(element, value){
new Ajax.Validator(element, url, {parameters: parameterCallback()});
} this.lastValue = this.getValue();
this.registerCallback(this.element); }
})
/*
* 新增通过Ajax进行验证类
* 借鉴Validation验证类
*/
Ajax.Validator = Class.create();
Object.extend(Object.extend(Ajax.Validator.prototype, Ajax.Request.prototype),{
initialize: function(validated, url, options) {
this.element = $(validated); this.transport = Ajax.getTransport();
this.setOptions(options); var onComplete = this.options.onComplete || Prototype.emptyFunction;
this.options.onComplete = (function(transport, object) {
this.updateContent();
onComplete(transport, object);
}).bind(this); this.request(url);
},
/*
* 根据后台返回的结果, 如果返回responseText为空则表示验证通过,不显示出错信息
* 否则将返回responseText作为出错信息显示
*/
updateContent: function() {
var response = this.transport.responseText; if (!this.options.evalScripts)
response = response.stripScripts(); var id = 'advice-' + this.element.id;
var prop = '__advice';
if(Validation.isVisible(this.element) && !response == "") {
if(!this.element[prop]) {
var advice = document.createElement('div');
advice.appendChild(document.createTextNode(response));
advice.className = 'validation-advice';
advice.id = id;
advice.style.display = 'none';
this.element.parentNode.insertBefore(advice, this.element.nextSibling);
if(typeof Effect == 'undefined') {
advice.style.display = 'block';
} else {
new Effect.Appear(advice.id, {duration : 1 });
}
}
this.element[prop] = true;
} else {
try {
$(id).remove();
} catch(e) {}
this.element[prop] = '';
}
}
})
分享到:
相关推荐
根据提供的文件信息,我们可以推断出这份文档主要讨论了Prototype框架在JavaScript中的应用,特别是针对对象导向编程(OOP)的改进。以下是基于文件标题、描述、标签以及部分内容所提炼的关键知识点。 ### 关键知识...
联系本人: ###扩展api简介 ///获取该场景下所有元素 JTopo.Scene.prototype.zGetAllEle() ///将该场景转换为json形式 JTopo.Scene.prototype.zToJson() ///将json数据解析到该场景中,加载ems里面的对象以及偏移量...
这样可以自由的扩展Class的各种方法,而不用再搭理Function的原型. 举个例子, Class.empty()可以秒杀这个类生成的所有对象. 比如现在正在设计一个飞机游戏. 有个大招可以清除屏幕上的所有子弹和敌机. 那么, 哼哼..
首先,Prototype是一个轻量级的JavaScript库,它的核心设计思想是扩展JavaScript的基本类型,让JavaScript对象更加面向对象。在Prototype 1.6中,我们可以看到如`$`, `$$`, `Element`, `Event`等核心方法的增强。`$`...
这是一系列前台开发包的核心包,本包中集成了大量常用的...其功能性不仅仅吸收了JQUERY的优点也兼顾了PROTOTYPE包的特点对STRING,DOCUMENT等常用对象进行了多种常用扩展。 不过本人能力有限更加希望大牛们不惜指教!
作者本人曾经使用过诸如Moo.fx、Scriptaculous、TW-SACK、Prototype等众多框架,并参与过RICO、Yahoo YUI等项目的开发。然而,尽管有着丰富的经验,当遇到jQuery时,最初也并没有抱有太大的期待。 **why** 为何...