`
wutao33543
  • 浏览: 64699 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

prototype 学习手记(2)

阅读更多
对于客户端和服务器端的通讯,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学习笔记

    这篇"prototype学习笔记"可能探讨了如何利用原型链实现面向对象编程的关键技术。以下是对这个主题的详细解析。 首先,理解`prototype`的基本含义是关键。在JavaScript中,每个函数都有一个`prototype`属性,这个...

    prototype1.6.0prototype1.6.0prototype1.6.0prototype1.6.0

    这个页面可能展示了如何在实际项目中集成和使用Prototype库,或者包含了一系列用例和示例代码,供学习者参考。 "jspage_file"可能是一个文件夹,里面包含与"jsPage.html"相关的资源,如CSS样式表、图像或者其他...

    Prototype Ajax学习范例

    这个"Prototype Ajax学习范例"提供了一系列实例,旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax,即异步JavaScript和XML(Asynchronous JavaScript and XML),是一种在无需刷新整个网页的情况下...

    Prototype.js学习从简单开始

    ### Prototype.js学习从简单开始:元素定位与DOM操作 #### 引言 随着Web开发的不断进化,Ajax技术成为提升用户体验的重要工具。Prototype.js作为一款轻量级的JavaScript框架,以其简洁的API和广泛的适用性,成为了...

    Prototype整理的学习资料

    2. **JavaScript中的Prototype** 在JavaScript中,每个对象都有一个内置的`__proto__`属性,指向其构造函数的原型(Prototype)。通过原型,对象可以继承并共享其他对象的属性和方法。JavaScript使用原型链实现继承...

    prototype帮助中文文档

    这份“prototype帮助中文文档”是学习和掌握Prototype的关键资源,无论你是初学者还是经验丰富的开发者,都可以从中受益匪浅。通过深入研究文档和实践应用,你可以更好地利用Prototype来提升你的前端开发效率和代码...

    Prototype学习笔记(最新整理)

    ### Prototype学习笔记(最新整理) #### 1. Prototype是什么? Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化客户端脚本编程,使开发者能够轻松创建动态的、交互式的Web应用程序。该库通过提供一...

    prototype学习

    在JavaScript中,`...理解并掌握`prototype`对于深入学习JavaScript至关重要,它能够帮助开发者构建更高效、可维护的代码。在实际开发中,正确使用`prototype`可以有效地实现代码重用和对象继承,提高程序的性能。

    Prototype_1.4.doc,Prototype_1.5.1.chm 中文版

    2. "Prototype_1.4.doc" - 这个文件可能是Prototype 1.4版本的文档,以.doc格式呈现,可能包含详细的类库介绍、方法和属性说明,以及可能的使用案例。 **知识点详解** 1. **Prototype库基础**:Prototype库提供了...

    【prototype学习】基于prototype的tree(纯数据驱动OO)

    这篇博客"【prototype学习】基于prototype的tree(纯数据驱动OO)"探讨了如何使用`prototype`属性来构建一个树形结构(Tree)的数据驱动对象导向(Object-Oriented,简称OO)程序。在JavaScript中,`prototype`用于...

    Prototype-1.6.0 中文版\英文版\Prototype.js

    2. **DOM操作**:Prototype提供了强大的DOM操作接口,如`Element`和`Selectors`,使得选取和操作页面元素变得非常简单。例如,`$`函数可以快速获取DOM元素,而`$$`函数则能根据CSS选择器选取一组元素。 3. **数组...

    Prototype String对象 学习

    【Prototype String对象学习】 在JavaScript中,Prototype是一个库,它扩展了JavaScript的内置对象,包括String对象。这里的“Prototype String对象”是指Prototype库为JavaScript原生的String对象添加的一些额外...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握Prototype框架的开发者们的重要资源。 Prototype 1.6中文手册: 手册详细介绍了Prototype框架的1.6版本,这是一个非常...

    prototype_PrototypeJS1.6_

    2. **DOM操作**:PrototypeJS提供了一系列便捷的DOM操作方法,如`$(selector)`作为文档选择器,类似于jQuery中的功能,可以快速获取DOM元素。还有`Element`对象的方法,如`show()`, `hide()`, `toggle()`, 用于控制...

    Prototype1.5.1使用手册

    2.Function.prototype.bindAsEventListener:与bind类似,但同时确保事件处理函数的事件对象作为第一个参数传递。 五、数组操作 1.Array.prototype.each:遍历数组并执行指定函数,类似于forEach。 2.Array....

    prototype

    然而,随着现代浏览器原生支持的增强以及新的JavaScript标准库的发展,开发者也应关注学习如ES6+等新技术,以保持代码的现代化和最佳实践。尽管如此,Prototype在历史上的贡献及其对Web开发领域的影响是不可忽视的,...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    总结来说,这个压缩包是学习和使用Prototype JavaScript库的宝贵资源。通过阅读手册,你可以了解如何利用Prototype进行DOM操作、事件处理、Ajax通信和动画效果。而源代码文件`prototype-1.6.0.3.js`则让你可以直接在...

Global site tag (gtag.js) - Google Analytics