很老的帖子了, 发在
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.js的另一个显著特点是对JavaScript对象的增强。1.7.3版本继续沿用了基于类的模拟实现,通过`Class.create`和`Object.extend`等方法,开发者可以轻松构建复杂的继承层次结构。此外,它还引入了迭代器和观察...
**描述:** prototype.js 是一个JavaScript库,主要目的是为了简化JavaScript的开发,提升开发效率。它通过扩展JavaScript的基本对象和类型,提供了丰富的功能,包括类式继承、面向对象编程的支持以及一些实用的DOM...
3. **事件处理**:Prototype.js通过`Event.observe()`和`Event.stop()`等方法,对事件处理进行了优化,支持事件委托和跨浏览器的事件处理。 4. **对象操作**:Prototype.js引入了类(Class)的概念,支持类的创建、...
"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的基本功能,尤其在处理DOM(文档对象模型)操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**:...
- **对象扩展**:`prototype.js`提供了对JavaScript原生对象的扩展,如Array、String、Function等,增加了许多实用的方法,使得代码编写更为简洁。 - **DOM操作**:库中包含了一系列方便的DOM操作方法,如`Element....
Prototype.js 对JavaScript的事件处理进行了封装,提供了`observe`和`stopObserving`方法,使得绑定和解绑事件变得简单。此外,`Event.stop`可以阻止事件的冒泡,`Event.observe(window, 'load', function)`则可以...
Prototype.js 是一个开源的JavaScript库,它扩展了JavaScript语言,为开发者提供了许多便利的功能,特别是在对象操作、DOM操作和事件处理方面。1.6版本是该库的一个重要里程碑,引入了诸多改进和新特性。 ### 1. ...
Prototype.js 是一个开源JavaScript库,由Sam Stephenson于2005年创建,主要用于简化DOM(文档对象模型)操作,增强JavaScript的面向对象编程能力,以及提供实用的函数扩展。它在Web开发中扮演着重要的角色,尤其在...
Prototype.js 的核心理念是扩展 JavaScript 的内建对象,提供类(Class)系统、DOM 操作、Ajax 支持和丰富的函数工具。通过这个库,开发者可以使用类似于面向对象编程的方式来编写 JavaScript,使得代码更加结构化和...
1. **对象扩展**:Prototype.js的核心在于它对JavaScript原生对象的扩展,如Array、String、Function等。例如,它增加了数组的`each`方法,使得遍历数组变得更加简洁;String类则新增了诸如`trim`和`startsWith`等...
在JavaScript的世界里,Prototype.js是一个著名的库,它扩展了JavaScript的内置对象,为开发者提供了更加便利的编程体验。本实例将深入探讨如何利用Prototype.js来实现弹出窗口和移动窗口的功能,这对于创建交互性强...
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很...
1. **对象扩展**:Prototype.js对JavaScript的内置对象进行了扩展,如Array、String、Function等,提供了许多便利的方法。例如,Array的`each()`方法用于遍历数组,String的`camelize()`方法用于将字符串转换为驼峰...
1. **对象扩展**:Prototype.js 最显著的特点是对JavaScript原生对象的扩展。例如,它为数组、字符串、函数等添加了许多实用的方法,如`each()`、`map()`、`select()`等,使得操作数据更加方便。 2. **DOM操作**:...
`ModalBox`是Prototype.js的一个扩展,提供了一种创建模态对话框的简单方式。 创建模态弹出窗口的步骤如下: 1. **HTML结构**:首先在页面中创建一个隐藏的`div`元素,作为模态窗口的内容容器。可以通过CSS设置其...
Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了丰富的功能和便利,旨在简化和优化在浏览器环境中进行的脚本编写。1.6.0.3 版本是该库的一个稳定版本,它包含了对先前版本的改进和修复,以...
下面是Prototype.js的开发笔记,涵盖了该库的使用指南、Ajax对象、JavaScript类的扩展、对象的扩展、事件处理等多个方面。 一、Programming Guide Prototype.js是一个强大的JavaScript库,提供了许多有用的函数和...
Prototype是一个强大的JavaScript库,由Sam Stephenson创建,旨在提升JavaScript的开发效率,提供丰富的类和函数扩展,为JavaScript编程带来面向对象的特性。在本手册中,我们将深入探讨Prototype的核心概念、主要...