对于客户端和服务器端的通讯,prototype提供了如下技术手段:
Ajax.PeriodicalUpdater
Ajax.Request
Ajax.Responders
Ajax.Response
Ajax.Updater
在调用过程中,prototype支持一些常用的option选型,和回调事件
Common options
Common callbacks
除此之外,对于特定的对象,还有一些特定的option和事件
1. Ajax.Request
Request应当是最基本的对象,调用语法:
new Ajax.Request(url[, options])
用于创建一个AJAX request对象,发送http请求,获取http response.
在options中,可以定义:
a) request header属性 和 参数,例如:
{ method: ''get'',
encoding: ''UTF-8'',
parameters: { username: $F(''username'') }
}
b) 回调事件和方法,例如:
{
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
}
Life cycle of XMLHtpRequest:
1) Created
2) Initialized
3) Request sent
4) Response being received (can occur many times, as packets come in)
5) Response received, request complete
Order of callbacks:
1) onCreate
2) onUninitialized (maps on Created)
3) onLoading (maps on Initialized)
4) onLoaded (maps on Request sent)
5) onInteractive (maps on Response being received)
6) onXYZ (numerical response status code), onSucess or onFailure
7) onComplete
2. Ajax.Response
从1.6版本开始提供
对xmlHttpRequest对象进行了包装,处理跨浏览器问题,并添加了对JSON的支持
作为第一个参数,传递给各个callback方法
属性:
status (Number) http status code
statusText (String)
readyState (Number)
responseText (String)
responseXML (document Object or null) applicable when content-type=application/xml
responseJSON (Object, Array or null) applicable when content-type=application/json
headerJSON (Object, Array or null) applicable for X_JSON header
request (Object) the request object (instance of Ajax.Request or Ajax.Updater)
transport (Object) the native xmlHttpRequest object
方法:
getHeader(name) String or null 找不到时返回null,不会抛出Exception
getAllHeaders() String or null 用换行分割
getResponseHeader(name) String 可能抛Exception
getAllResponseHeaders() String 多个item,用换行分隔,可能抛Exception
3. Ajax.Responders
语法:
Ajax.Responders.register(responder)
Ajax.Responders.unregister(responder)
用于对页面中所有的request进行某些公共的操作,例如,记录当前活动的AJAX request数量
Prototype自动注册了如下操作:
Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
});
如果要取消注册,也需要先定义responder对象。因此,一般在注册时保留responder对象的reference
问题:
注册/取消注册,key是什么?responder对象?还是???
4. Ajax.Updater
语法:
new Ajax.Updater(container, url[, options])
用途:
指定一个对象,修改其内容
样例:
new Ajax.Updater(''items'', ''/items'', {
parameters: { text: $F(''text'') }
});
说明:
onComplete回调方法会在对象内容被修改后再被触发。
附加参数:
1. 缺省情况下,对象内容会被新的内容替代。但可以设置为插入,以及插入的位置
例如:
new Ajax.Updater(''items'', ''/items'', {
parameters: { text: $F(''text'') },
insertion: Insertion.Bottom
});
v1.6.0之后,不再使用Insertion.Bottom这类方式,可以直接使用''top'',''bottom'',''before'', ''after''
2.evalScripts
当其为true, 所有<script>内容将被evaluated.
<script>内容相对于被执行eval()方法,其中的局部变量只再eval()期间有效,不影响页面其他部分。
但如果在其中定义了JavaScript方法,则必须创建function对象,例如:
coolFunc = function() { ... }
而不能使用如下定义:
function coolFunc() { ... }
其他:
Updater还可以根据request是否成功,修改不同的目标对象,例如:
new Ajax.Updater({ success: ''items'', failure: ''notice'' }, ''/items'', {
parameters: { text: $F(''text'') },
insertion: Insertion.Bottom
});
问题:
修改不同目标对象时,处理策略是否只能相同?
如果创建两个Updater对象,一个只处理success,一个只处理failure,是否可以解决这个问题?
5. Ajax.PeriodicalUpdater
语法:
new Ajax.PeriodicalUpdater(container, url[, options])
文章出处:DIY部落(http://www.diybl.com/course/1_web/webjs/2008515/116422.html)
分享到:
相关推荐
Prototype学习笔记(一)(二)涵盖了这一主题的深入探讨,旨在帮助开发者更好地理解和利用这个特性。在本篇文章中,我们将详细阐述Prototype的核心概念、作用以及如何在实际编程中应用。 首先,Prototype是...
这篇"prototype学习笔记"可能探讨了如何利用原型链实现面向对象编程的关键技术。以下是对这个主题的详细解析。 首先,理解`prototype`的基本含义是关键。在JavaScript中,每个函数都有一个`prototype`属性,这个...
这个"Prototype Ajax学习范例"提供了一系列实例,旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax,即异步JavaScript和XML(Asynchronous JavaScript and XML),是一种在无需刷新整个网页的情况下...
### Prototype.js学习从简单开始:元素定位与DOM操作 #### 引言 随着Web开发的不断进化,Ajax技术成为提升用户体验的重要工具。Prototype.js作为一款轻量级的JavaScript框架,以其简洁的API和广泛的适用性,成为了...
2. **JavaScript中的Prototype** 在JavaScript中,每个对象都有一个内置的`__proto__`属性,指向其构造函数的原型(Prototype)。通过原型,对象可以继承并共享其他对象的属性和方法。JavaScript使用原型链实现继承...
这份“prototype帮助中文文档”是学习和掌握Prototype的关键资源,无论你是初学者还是经验丰富的开发者,都可以从中受益匪浅。通过深入研究文档和实践应用,你可以更好地利用Prototype来提升你的前端开发效率和代码...
### Prototype学习笔记(最新整理) #### 1. Prototype是什么? Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化客户端脚本编程,使开发者能够轻松创建动态的、交互式的Web应用程序。该库通过提供一...
在JavaScript中,`...理解并掌握`prototype`对于深入学习JavaScript至关重要,它能够帮助开发者构建更高效、可维护的代码。在实际开发中,正确使用`prototype`可以有效地实现代码重用和对象继承,提高程序的性能。
2. "Prototype_1.4.doc" - 这个文件可能是Prototype 1.4版本的文档,以.doc格式呈现,可能包含详细的类库介绍、方法和属性说明,以及可能的使用案例。 **知识点详解** 1. **Prototype库基础**:Prototype库提供了...
这篇博客"【prototype学习】基于prototype的tree(纯数据驱动OO)"探讨了如何使用`prototype`属性来构建一个树形结构(Tree)的数据驱动对象导向(Object-Oriented,简称OO)程序。在JavaScript中,`prototype`用于...
2. **DOM操作**:Prototype提供了强大的DOM操作接口,如`Element`和`Selectors`,使得选取和操作页面元素变得非常简单。例如,`$`函数可以快速获取DOM元素,而`$$`函数则能根据CSS选择器选取一组元素。 3. **数组...
这个页面可能展示了如何在实际项目中集成和使用Prototype库,或者包含了一系列用例和示例代码,供学习者参考。 "jspage_file"可能是一个文件夹,里面包含与"jsPage.html"相关的资源,如CSS样式表、图像或者其他...
【Prototype String对象学习】 在JavaScript中,Prototype是一个库,它扩展了JavaScript的内置对象,包括String对象。这里的“Prototype String对象”是指Prototype库为JavaScript原生的String对象添加的一些额外...
这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握Prototype框架的开发者们的重要资源。 Prototype 1.6中文手册: 手册详细介绍了Prototype框架的1.6版本,这是一个非常...
2. **DOM操作**:PrototypeJS提供了一系列便捷的DOM操作方法,如`$(selector)`作为文档选择器,类似于jQuery中的功能,可以快速获取DOM元素。还有`Element`对象的方法,如`show()`, `hide()`, `toggle()`, 用于控制...
2.Function.prototype.bindAsEventListener:与bind类似,但同时确保事件处理函数的事件对象作为第一个参数传递。 五、数组操作 1.Array.prototype.each:遍历数组并执行指定函数,类似于forEach。 2.Array....
然而,随着现代浏览器原生支持的增强以及新的JavaScript标准库的发展,开发者也应关注学习如ES6+等新技术,以保持代码的现代化和最佳实践。尽管如此,Prototype在历史上的贡献及其对Web开发领域的影响是不可忽视的,...
总结来说,这个压缩包是学习和使用Prototype JavaScript库的宝贵资源。通过阅读手册,你可以了解如何利用Prototype进行DOM操作、事件处理、Ajax通信和动画效果。而源代码文件`prototype-1.6.0.3.js`则让你可以直接在...