prototype.js 参考（二）

使用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的所有函数

<!-- ************************************************************************************************************************************* -->

---