`

Prototype 如何取得属性值

prototypeAjax应用服务器jQuery浏览器 
阅读更多
前一阵子都是用jquery，现在有需求要用prototype，身不由己，感觉很不适应。比较之下，也认为Jquery更合理一些 

Form.Element.getValue(element) ? String | Array
Form#Element.getValue() ? String | Array
$('stop_freq_disp').getValue()
$$('input#stop_freq_disp').readAttribute(element, attribute)






var form = $('contact');
var input = form['company'];

Form.Element.getValue(input);

// but, the preferred call is:
$(input).getValue(); // we used the $() method so the node gets extended

// you can also use the shortcut
$F(input);



1.1. Prototype是什么?

或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的jsScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。

如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。

我也一起提供了这个包的对象，类，方法和扩展的 非官方参考 。

1.2. 关联文章

高级jsScript指南

1.3. 通用性方法

这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。

1.3.1. 使用 $()方法

$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。

比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。 

<HTML>
			<HEAD>
			<TITLE> Test Page </TITLE>
			<script src="prototype-1.3.1.js"></script>
			<script>
			function test1()
			{
			var d = $('myDiv');
			alert(d.innerHTML);
			}
			function test2()
			{
			var divs = $('myDiv','myOtherDiv');
			for(i=0; i<divs.length; i++)
			{
			alert(divs[i].innerHTML);
			}
			}
			</script>
			</HEAD>
			<BODY>
			<div id="myDiv">
			<p>This is a paragraph</p>
			</div>
			<div id="myOtherDiv">
			<p>This is another paragraph</p>
			</div>
			<input type="button" value=Test1 onclick="test1();"><br>
			<input type="button" value=Test2 onclick="test2();"><br>
			</BODY>
			</HTML>

这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候， 它变得非常有用。

1.3.2. 使用$F()方法

$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。 

<script>
			function test3()
			{
			alert(  $F('userName')  );
			}
			</script>
			<input type="text" id="userName" value="Joe Doe"><br>
			<input type="button" value=Test3 onclick="test3();"><br>

1.3.3. 使用$A()方法

$A()方法把接收到的参数转换成一个Array对象。

这个方法加上对Array类的扩展，可以很容易的转换或者复制任意的列举列表到Array对象， 一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里，可以被更广泛高效的使用， 看下面的例子。 

<script>
			function showOptions(){
			var someNodeList = $('lstEmployees').getElementsByTagName('option');
			var nodes = $A(someNodeList);
			nodes.each(function(node){
			alert(node.nodeName + ': ' + node.innerHTML);
			});
			}
			</script>
			<select id="lstEmployees" size="10" >
			<option value="5">Buchanan, Steven</option>
			<option value="8">Callahan, Laura</option>
			<option value="1">Davolio, Nancy</option>
			</select>
			<input type="button" value="Show the options" onclick="showOptions();" >

1.3.4. 使用$H()方法

$H()方法把对象转化成可枚举的貌似联合数组Hash对象。 

<script>
			function testHash()
			{
			//let's create the object
			var a = {
			first: 10,
			second: 20,
			third: 30
			};
			//now transform it into a hash
			var h = $H(a);
			alert(h.toQueryString()); //displays: first=10&second=20&third=30
			}
			</script>



1.3.5. 使用$R()方法

$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一个简单快捷的使用方式。

ObjectRange类文档里面有完整的解释。 同时，我们来看看一个简单的例子， 来演示通过each方法遍历的用法。 那个方法的更多解释在Enumerable对象文档里面。 

<script>
			function demoDollar_R(){
			var range = $R(10, 20, false);
			range.each(function(value, index){
			alert(value);
			});
			}
			</script>
			<input type="button" value="Sample Count" onclick="demoDollar_R();" >

1.3.6. 使用Try.these()方法

Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。

在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。 
<script>
			function getXmlNodeValue(xmlNode){
			return Try.these(
			function() {return xmlNode.text;},
			function() {return xmlNode.textContent;)
			);
			}
			</script>

1.4. Ajax 对象

上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。

我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。

Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。

1.4.1. 使用 Ajax.Request类

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程， 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。 


<?xml version="1.0" encoding="utf-8" ?>
			<ajax-response>
			<response type="object" id="productDetails">
			<monthly-sales>
			<employee-sales>
			<employee-id>1234</employee-id>
			<year-month>1998-01</year-month>
			<sales>$8,115.36</sales>
			</employee-sales>
			<employee-sales>
			<employee-id>1234</employee-id>
			<year-month>1998-02</year-month>
			<sales>$11,147.51</sales>
			</employee-sales>
			</monthly-sales>
			</response>
			</ajax-response>



用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。 
<script>
			function searchSales()
			{
			var empID = $F('lstEmployees');
			var y = $F('lstYears');
			var url = 'http://yoursever/app/get_sales';
			var pars = 'empID=' + empID + '&year=' + y;
			var myAjax = new Ajax.Request(
			url,
			{method: 'get', parameters: pars, onComplete: showResponse}
			);
			}
			function showResponse(originalRequest)
			{
			//put returned XML in the textarea
			$('result').value = originalRequest.responseText;
			}
			</script>
			<select id="lstEmployees" size="10" onchange="searchSales()">
			<option value="5">Buchanan, Steven</option>
			<option value="8">Callahan, Laura</option>
			<option value="1">Davolio, Nancy</option>
			</select>
			<select id="lstYears" size="3" onchange="searchSales()">
			<option selected="selected" value="1996">1996</option>
			<option value="1997">1997</option>
			<option value="1998">1998</option>
			</select>
			<br><textarea id=result cols=60 rows=10 ></textarea>

你看到传入 Ajax.Request构造方法的第二个对象了吗？ 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。

这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。

也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用， 相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

我们的例子没有用任何有趣的方式处理这个 XML响应， 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

更完全的解释，请参照 Ajax.Request 参考 和 Ajax选项参考。

1.4.2. 使用 Ajax.Updater 类

如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。 



<script>
			function getHTML()
			{
			var url = 'http://yourserver/app/getSomeHTML';
			var pars = 'someParameter=ABC';
			var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
			}
			</script>
			<input type=button value=GetHtml onclick="getHTML()">
			<div id="placeholder"></div>



你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项， 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。

我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。 

<script>
			function getHTML()
			{
			var url = 'http://yourserver/app/getSomeHTML';
			var pars = 'someParameter=ABC';
			var myAjax = new Ajax.Updater(
			{success: 'placeholder'},
			url,
			{method: 'get', parameters: pars, onFailure: reportError});
			}
			function reportError(request)
			{
			alert('Sorry. There was an error.');
			}
			</script>
			<input type=button value=GetHtml onclick="getHTML()">
			<div id="placeholder"></div>

如果你的服务器逻辑是返回jsScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段jsScript代码。为了使这个对象对待响应为jsScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。

分享到：
| 关于Rails的验证错误提示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js资料prototype 属性

    JavaScript中的`prototype`属性是一个非常重要的概念，它与面向对象编程和对象的继承密切相关。`prototype`属性允许我们在创建对象时共享属性和方法，从而提高了代码的复用性。 首先，`prototype`属性用于访问一个...

    知识共享-Spring注入属性值案例(雷惊风).

    ### Spring框架中的属性值注入详解 #### 一、Spring框架简介 Spring框架是一个开源的Java平台，用于构建企业级应用程序。它提供了全面的基础架构支持，包括依赖注入（Dependency Injection, DI）、面向切面编程...

    prototype

    在JavaScript中，`prototype`属性是一个特殊的关键字，用于链接构造函数和它的原型对象。然而，在Prototype框架中，“prototype”通常指的是框架本身，它提供了一系列增强的API，使得处理DOM元素、执行Ajax请求等...

    Prototype中文帮助文档

    Prototype 为Array和Hash对象添加了许多实用的方法，如`Array.each()`遍历数组，`Array.include()`将元素添加到数组，`Hash.keys()`获取哈希的所有键，以及`Hash.values()`获取所有值。这些方法极大地提高了处理数组...

    JS：prototype用法

    2. **`prototype`属性**：每个函数都有一个`prototype`属性，该属性是一个对象，包含了由构造函数创建的所有实例共享的属性和方法。 **基本使用示例**： - **数字相加**：可以通过`Number.prototype.add`为所有...

    Prototype1.5.1使用手册

    1. Object.extend：这是Prototype库的核心功能之一，允许用户向任何对象添加新的属性或方法，实现类继承的概念。 2.$$：这个快捷函数用于选择DOM元素，支持CSS选择器，类似于jQuery的$函数。 二、DOM操作 1.$$函数...

    Prototype详解

    ### Prototype详解：深入理解JavaScript库的核心功能与Ajax应用 #### 一、Prototype简介与核心功能解析 ##### 1. Prototype是什么？ Prototype是一个由Sam Stephenson创建的JavaScript库，旨在简化和标准化...

    prototype 开发应用手册，笔记，prototype.js文件下载

    1. Object.extend：这是Prototype中最基本的扩展方法，用于将一个对象的属性复制到另一个对象上，实现对象的继承。例如，我们可以创建一个新对象并继承自现有对象： ```javascript var MyObject = Object.extend({}...

    Prototype模式

    由于复制的对象是原有对象的一个副本，它们之间共享相同的属性值，但可以有不同的状态。 **原型模式的优点：** 1. **性能提升**：通过复制已有对象，减少了创建新对象的开销，特别是在需要创建大量相似对象时。 2. ...

    prototype.js简介

    7. **字符串和对象操作** - prototype.js 也增强了String和Object对象，例如`String.prototype.parseColor()`解析颜色值，`Object.toJSON()`将对象转换成JSON格式。 通过学习和使用prototype.js，开发者可以编写出...

    prototype开发笔记.doc

    `$A()` 或 `Array.from()` 是一个创建数组副本的方法，它可以将任何具有length属性的对象转换为数组，这对于处理类似数组的对象非常有用。 1.3.4. 使用 `$H()` 方法 `$H()` 创建了一个Hash对象，这是Prototype特有...

    Prototype使用学习手册指南

    - **功能**：取得表单元素的值。 - **示例**：`Form.Element.getValue('text1');` - **`Form.Element.serialize(elementId)`** - **功能**：将表单元素的值序列化为字符串。 - **示例**：`Form.Element....

    prototype.js 1.6中文手册、prototype.js 1.6英文手册、

    `Object.clone()`则用于创建一个对象的浅复制，保留原始对象的所有属性，但不包括引用类型的值。 ### 2. DOM操作 Prototype.js 提供了一套丰富的DOM操作接口，使得与HTML元素的交互更为简便。例如，`Element....

    prototype-1.4.0源码解读.js

    Prototype 提供了诸如`String.prototype.parseColor`、`Function.prototype.bind`等工具，前者用于解析颜色字符串，后者实现函数绑定，确保函数的`this`值始终指向预期的对象。 通过分析Prototype 1.4.0的源码，...

    prototype-1.6.0.2.js.rar

    2. **Function.prototype.bind**：让函数拥有指定的上下文（this值），解决了JavaScript中this动态绑定的问题。 3. **Element**和**$$**：提供了一套强大的DOM操作接口，Element对象可以对HTML元素进行各种操作，$$...

    编写基于Prototype的Javascript动画类

    可以实现一个计算中间值的函数，如线性、ease-in、ease-out或ease-in-out等缓动效果。 3. **时间管理**：使用`setTimeout`或`setInterval`来定时更新元素的样式，从而实现动画效果。同时，需要管理好这些定时器，...

    prototype-1.5.0

    6. **Function 类**：Prototype 对 `Function` 类进行了扩展，提供了如 `bind()` 方法，使函数可以改变它的上下文（即 `this` 的值），还有 ` curry()` 和 `delay()` 方法，分别用于固定参数和延迟执行函数。...

    getter-in-value-prototype.rar_prototype

    当我们谈论“getter in value prototype”时，我们关注的是如何在对象的原型链上定义和调用getter函数，这是一个用于获取对象属性值而不直接暴露该属性的方法。 getter函数是一种特殊的属性，它在访问对象属性时...

Magicbox
Global site tag (gtag.js) - Google Analytics