使用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>
如果你的服务器逻辑是连同HTML 标记返回JavaScript 代码, Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript,你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。但是值得提醒的是,像这个选项名evalScripts暗示的,这些脚本会被执行,但是它们不会被加入到Page的脚本中。“有什么区别?”,可能你会这样问。我们假定请求地址返回的东东像这样:
<script language="javascript" type="text/javascript">
function sayHi(){
alert('Hi');
}
</script>
<input type=button value="Click Me" onclick="sayHi()">
如果你以前这样尝试过,你知道这些脚本不会如你所期望的那样工作,原因是这段脚本会被执行,但像上面这样的脚本执行并不会创建一个名叫sayHi的函数,它什么也不做。如果要创建一个函数,我们应当把代码改成下面这个样子:
<script language="javascript" type="text/javascript">
sayHi = function(){
alert('Hi');
};
</script>
<input type=button value="Click Me" onclick="sayHi()">
为什么我们在上面的代码中不使用var关键字来声明这个变量呢(指sayHi ),因为那样做创建出来的函数将只是当前脚本块的一个局部变量(至少在IE中是这样)。不写var关键字,创建出来的对象的作用域就是我们所期望的window。
更多相关知识,请参看 Ajax.Updater reference 和options reference.
枚举... 噢!噢!
你知道,我们都是这样来做循环的,建一个Array,用elements组织它们,再建一个循环结构(例如for,foreach,while)通过index数字来访问每一个element,再用这个element做一些动作。
当你想到这时,你会发现几乎每次写循环代码你都会迟早用到一个Array。那么,如果Array对象能够提供更多的功能给它们的迭代器使用不是很爽吗?确实是这样,事实上很多的编程语言都在它们的Array或其它类似的结构中(如Collections,Lists)提供一些这样的功能。
现在好了,prototype.js了给我们一个 Enumerable对象,它实现了很多和可迭代数据进行交互的窍门。和原有的JS对象相比prototype.js更上一层楼,它对Array 类s扩展了所有枚举要用的函数。
循环, Ruby样式的
在标准的javascript中,如果你想把一个array中的所有elements显示出来,你可以像下面代码这样写得很好:
<script>
function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
for(i=0;i<simpsons.length;i++){
alert(simpsons[i]);
}
}
</script>
<input type="button" value="Show List" onclick="showList();" >
使用我们新的最好的朋友,prototype.js,我们可以把它生写成这样
function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
simpsons.each( function(familyMember){
alert(familyMember);
});
}
你可能会想“非常奇怪的方式...相对旧的,这种语法太怪异了”。哦,在上面的例子,确实什么也没有,在这个简单得要死例子中,也没有改变太多啊,尽管如此,请继续读下去。
在继续下面内容之前,你注意到那个被做为一个参数传递给each函数的函数?我们把它理解成迭代器函数。
Your arrays on steroids
就如我们上面提到的,把你的Array中的elements当成相同的类型使用相同的属性和函数是很通用(Common,不知该翻译成通用还是庸俗)的。让我们看看怎么样利用我们新的马力强劲的Arrays的迭代功能吧。
依照标准找到一个element。
<script>
function findEmployeeById(emp_id){
var listBox = $('lstEmployees')
var options = listBox.getElementsByTagName('option');
options = $A(options);
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML); //displays the employee name
}
</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="Find Laura" onclick="findEmployeeById(8);" >
现在我们再下一城,看看如何过滤一个Array中的元素,从每个元素中得到我们想要的成员。
<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}
</script>
<p id="someText">
This <a href="http://othersite.com/page.html">text</a> has
a <a href="#localAnchor">lot</a> of
<a href="#otherAnchor">links</a>. Some are
<a href="http://wherever.com/page.html">external</a>
and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">
上面的代码仅仅是一点小小的实践让人爱上这种语法。请参看 Enumerable和Array的所有函数
<!-- ************************************************************************************************************************************* -->
分享到:
相关推荐
**描述:** prototype.js 是一个JavaScript库,主要目的是为了简化JavaScript的开发,提升开发效率。它通过扩展JavaScript的基本对象和类型,提供了丰富的功能,包括类式继承、面向对象编程的支持以及一些实用的DOM...
二、Prototype.js手册PDF Prototype.js手册PDF是学习和查阅Prototype.js API的重要资源。它详细介绍了每个函数的用法、参数及返回值,包括示例代码,帮助开发者快速理解和应用。手册通常包含以下几个部分: 1. **...
《Prototype.js 1.4-1.6:JavaScript 动态原型框架的探索与实践》 Prototype.js 是一个广泛使用的JavaScript库...总的来说,Prototype.js 1.4-1.6[全]是一份宝贵的资源,对于JavaScript开发者来说具有很高的参考价值。
**Prototype.js 1.6 知识点详解** Prototype.js 是一个开源的JavaScript库,它扩展了JavaScript语言,为开发者提供..."prototypeAPI"这个文件可能包含了Prototype.js的API参考文档,是学习和查阅该库功能的重要资源。
### 二、Prototype.js中的重要概念 1. **Selectors**:Prototype.js 使用CSS选择器语法来选取DOM元素,这使得从复杂的HTML结构中选取元素变得简单,如`$$('div.some-class')`。 2. **Element和Form Methods**:...
《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...
Prototype.js是最早期的JavaScript框架之一,它的设计目标是增强JavaScript的基本功能,使得JavaScript的面向对象编程更加简洁和强大。Prototype的核心特性包括: 1. **对象扩展**:Prototype通过扩展JavaScript的...
二、Prototype.js高级特性 1. **Ajax**:Prototype.js的Ajax模块极大地方便了异步数据交互。`Ajax.Request`和`Ajax.Updater`类用于发送HTTP请求,处理响应数据,实现了页面局部更新。 2. **Selectors API**:...
Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了丰富的功能和便利,旨在简化和优化在浏览器环境中进行的脚本编写。1.6.0.3 版本是该库的一个稳定版本,它包含了对先前版本的改进和修复,以...
二、Prototype.js参考 Prototype.js提供了许多有用的函数和方法,以帮助开发者快速构建Web应用程序。下面是Prototype.js的参考手册: 2.1. JavaScript 类的扩展 Prototype.js提供了许多JavaScript类的扩展,例如...
万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端...
Prototype.js 是一个JavaScript框架,它扩展了JavaScript语言,提供了许多实用的功能,以简化JavaScript开发。CHM(Compiled HTML Help)是微软的一种帮助文件格式,通常用于软件的用户手册或技术文档,这里用于存放...
开发者网站: http://prototype.conio.net/ prototype学习资料包括: prototype14参考 prototype 1.3 源码解读.txt prototype 1.5 参考图 prototype 1.5pre1.js prototype 1.4.js
Prototype.js 参考 - **2.1 JavaScript 类的扩展**:Prototype.js 扩展了原生 JavaScript 类,提供了额外的功能。 - **2.2 对 Object 类的扩展**:增加了一些新的静态方法,如 `Object.extend()` 用于合并两个对象...
《Prototype开发者手册(中文版)》是一本专为JavaScript开发者准备的重要参考资料,它详细介绍了Prototype JavaScript框架的使用方法和核心概念。Prototype是一个广泛使用的开源JavaScript库,它的目标是简化...
《prototype.js 说明文档》是关于JavaScript库prototype.js的详细指南,主要涵盖了其核心概念、通用方法以及Ajax对象的使用等内容。Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化和增强JavaScript...
总结来说,《prototype.js源码及PDF文档》是JavaScript开发者的一份宝贵参考资料,它不仅提供了实际的代码示例,还有详细的理论指导,对于提升JavaScript技能和深入理解Prototype框架有极大的帮助。无论是初学者还是...
这份帮助文档不仅是一份API参考,更是一份学习Prototype.js的宝贵资料。 1. **对象与类的扩展** Prototype.js 1.6引入了类的模拟,通过`Class.create()`方法可以创建类。它还提供了`Object.extend()`方法用于对象...
【描述】:本文档主要涵盖了Prototype.js库的编程指南,包括其核心概念、通用方法、Ajax对象以及对JavaScript原生类型和DOM对象的扩展。Prototype.js是一个由Sam Stephenson编写的JavaScript库,旨在简化Web 2.0应用...
4. prototype.js:Prototype是一个广泛使用的JavaScript库,它扩展了JavaScript的基本对象,为开发Web应用程序提供了便利。Prototype的核心特性包括DOM操作、Ajax支持以及强大的对象操作功能。其中,JSON支持是...