prototype.js1.5.0开发者手册 译文+添加注释(一)

本人辛苦翻译的，转载或引用请短信通知下，谢谢！

prototype.js1.5.0开发者手册 2007-09-13 by lin49940 本人为学习的目的而翻译的

   

目录                                                           

1. Prototype是什么?

2. 关联文章

3. 通用性方法

      使用$()方法

      使用$$()方法

      使用$F()方法

      使用$A()方法

      使用$H()方法

      使用$R()方法

      使用Try.these()方法

4. strings高级应用

      String替换

      String模板

5. Ajax 对象

      使用 Ajax.Request类

      使用 Ajax.Updater 类

 

 

 

Prototype是什么?                                                   

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

当我几年前尝试使用这个库，我注意到文档显然不是它的强项，像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。我想当我学习它的时候记写笔记然后分享给其他人将会很不错。

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

当你再在阅读这些例子和文档时，熟悉Ruby的开发者将会注意到Ruby的一些内建类和本类库扩展实现之间非常相似。这并不奇怪，因为prototype.js是Ruby on Rails框架的延续，并直接受到Ruby on Rails框架需求的影响。

在浏览器支持方面， prototype.js 尝试支持Internet Explorer (Windows) 6.0+, Mozilla Firefox 1.5+, Apple Safari 1.0+, and Opera 9+。受支持的浏览器能让共享他们渲染引擎的其他浏览器也能很好地得到支持，像Camino, Konqueror, IceWeasel, Netscape 6+, SeaMonkey等等。

                                                                                                                                                                                      top

 关联文章                                                                      

高级 JavaScript指南

top

通用性方法                                                                  

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

top

 使用 $()方法

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

比起DOM中的方法，这个更胜一筹。返回的元素对象将增加一些额外的方法。这些额外的方法能简化许多任务，像隐藏或显示元素，取得元素的大小，让元素滑动等等。你能对返回的元素对象添加一个或一组额外的方法，添加方法参照 Element.Methods 参考。此外，如果返回的元素是一个 form 对象，它使用的通用方法请参照Form.Methods参考，如果返回的元素是 form 表单field (input, select, or textarea)，它使用的通用方法请参照Form.Element.Methods参考。

< html >
< head >
< title >  Test Page  </ title >
<script src="prototype.js"></script >   //prototype.js每个例子都是必需的

< script > ...
    function test()...{
        var d = $('myDiv');
        alert(d.innerHTML);
        d.hide();
        d.show();
        d.addClassName('active');
    }
</ 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 ="Test $()"  onclick ="test();" />< br />  

</ body >
</ html >

本来想在重点地方用红色字体标识的，可惜这里做不了啊

因为有返回参数传入的id的那个元素能添加很多新的方法，而这些方法最后都是返回元素本身，所以你可以用链式地调用这些方法，让代码更加紧凑：
   
   

    
    

     
     
     
     //change the text, the CSS class, and make the element visible 
    
    
    
    

     
       //链式调用方法，每个方法返回的都是$('messageDiv')这个元素，所以可以再调用其他方法           
$('messageDiv').update('Your order was accepted.').addClassName('operationOK').show();
    
    
   
   

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

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

< HTML >
< HEAD >
< TITLE >  Test Page  </ TITLE >
< script  src ="prototype.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 >

 

top

 使用 $$()方法

如果你网页的内容结构中一贯使用单独的CSS样式，$$()方法将对你有很大的作用，它能解析一个或多个CSS过滤表达式，类似于那些定义CSS规则，并返回匹配这些CSS过滤器的元素。（简单的说是返回使用了某个css样式的元素）

它是多么简单，傻瓜式的用法。下面的例子将证实这点。

< script  src ="prototype.js" ></ script >
< script > ...
function test$$()...{
    /**//*
      in case CSS is not your forte, the expression below says
      'find all the INPUT elements that are inside 
      elements with class=field that are inside a DIV
      with id equal to loginForm.'
    */
    var f = $$('div#loginForm .field input');
    var s = '';
    for(var i=0; i<f.length; i++)...{
        s += f[i].value + '/';
    }
    alert(s); // shows: "joedoe1/secret/"
    
    //now passing more than one expression

        //f返回的是一个Array对象，依次添加参数相关的元素到Array对象中，如添加第一个后才添加第二个
    f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
    s = '';
    for(var i=0; i<f.length; i++)...{
        s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
    }
    alert(s); //shows: "joedoe1/secret/User name:/Password:/"
}


</ script >

< div  id ='loginForm' >
     < div  class ='field' >
         < span  class ='fieldName' > User name: </ span >
         < input  type ='text'  id ='txtName'  value ='joedoe1' />
     </ div >
     < div  class ='field' >
         < span  class ='fieldName' > Password: </ span >
         < input  type ='password'  id ='txtPass'  value ='secret'  />
     </ div >
     < input  type ='submit'  value ='login'  />
</ div >  
< input  type =button  value ='test  $$()' onclick ='test$$();'  />

 性能方面的简单说明。目前$$()方法的使用在prototype.js 中不被视为特别有效率。如果你打算在深层和复杂的HTML文档中频繁的使用$$()方法，那你应该考虑其他自由和有效的方法，可能只是代替$$()方法本身。

top

 使用$F()方法

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

< script  src ="prototype.js" ></ script >

< script > ...
    function test3()
    ...{
        alert(  $F('userName')  );        //show:"Joe Doe"

        }
</ script >

< input  type ="text"  id ="userName"  value ="Joe Doe" >< br />  
< input  type ="button"  value ="Test3"  onclick ="test3();" >< br />  

 top

使用$A()方法

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

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

<script src="prototype.js"></script>

< script >

     function  showOptions(){
         var  someNodeList  =  $( ' lstEmployees ' ).getElementsByTagName( ' option ' );
         var  nodes  =  $A(someNodeList);

        nodes.each( function (node){         //这里的node.vaue用$F(' node')不行啊
                                      alert(node.nodeName +' [' + node.value +   '] :  '   +  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();"   >  

top

  使用$H()方法

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

<script src="prototype.js"></script>

< 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 >

<input type="button" value="Test $H()" onclick="testHash();" /> 

top

 使用$R()方法

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

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

<script src="prototype.js"></script>

< script > ...
    function demoDollar_R()...{
        var range = $R(10, 20, false); //第三个属性为false，那20就包括在内，如果为true，则到19而已
        range.each(function(value, index)...{
            alert(value + " : " + index);
        });
    }

</ script >

< input  type ="button"  value ="Sample Count"  onclick ="demoDollar_R();"   />  

top

 使用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 >

本人做测试用的例子

< script  src ="prototype.js" ></ script >
< script > ...

    function getXmlNodeValue()...{
        var xmlNode = $('lstEmployees').getElementsByTagName('option');
        Try.these(      //如果xmlNode.text行的话，将显示第一行，如果xmlNode.textContent，则显示第二行
        function() ...{alert(xmlNode[0].text);},
        function() ...{alert(xmlNode[1].textContent);}
    );

    }
</ 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 ="getXmlNodeValue();"   >  

 top

strings高级应用                                                                     

字符串对象是非常之强大的。 Prototype.js 将在量的层次上强大和提升它。

 top

 String替换

JavaScript在字符串替换方面已经有String.replace (原文中是Replace)方法了，这个方法甚至能使用正则表达式，但是它仍然不是prototype.js 的字符串替换方案的首选。

看看新的方法 String.gsub 。通过这个方法你不仅可以查找和替换一个指定的字符串或者一个正则表达式模式，而且你在替换过程能控制更多的操作。举个例子，你能使用一个字符串模板，通过这个方法把你希望查找到的元素转换( 而不是简单的替换 )。

下面的例子是通过搜索包含字母' t ' 的单词，并把单词最后面的 't' 及其后面的字符 用 'tizzle' 替换, 这些替换后的单词看起来将很有趣。为了防止这个例子不清晰，这个正则表达式中用 (/w+) 来捕获分组。我们在替换模板字符串中可以使用 #{1} 表示捕获分组的值。

在例子中，我们捕获单词中在字母' t ' 前面的部分，并且在这部分后面添加 'tizzle'。如果我们在正则表达式中使用更多的捕获分组，我们可以通过 #{2}，#{3} 这样的方式取得捕获分组的值。(那#{0}呢，#{0}是表示匹配正则表达式模板的所有字符串，分组也包括在里面。 JScript 5.5 或更新版本中，可以用 $n 取得捕获第n个分组的值)

< script  src ="prototype.js" ></ script >

< script > ...
function talkLikeYouKnowSomething()...{
    var s = 'prototype string extensions can help you';

        ///b -单词边界, +-一个或者多个, /w-数字和字母,( )-分组
    var snoopdogfy = //b (/w+) t /w+/b/;
    var snooptalk = s.gsub(snoopdogfy, '#{1}tizzle' );
    alert(snooptalk); // shows: "prototizzle stizzle extizzle can help you"                
}
</ script >
<input type="button" value="Show the replaced words" οnclick="talkLikeYouKnowSomething();" >

我们还不能就此停住。到目前为止我们还没显示出这个字符串替换方法的强大功能，因为我们被限于模式匹配和替换上。假设我们能通过自定义的逻辑操作匹配变量(matches)，产生期待的替换值吗？答案是确定的，我们能通过在String.gsub 方法第二个参数中传入一个函数实现这个功能。这个传入的函数将接收一个带匹配文本(索引为0(index 0))和任何捕获分组值(索引为1至N(index 1 to N))的字符串数组(注意这个方法最后返回的必需是文本)。（传入的函数的匹配变量matches－带的匹配文本(matches[0])和捕获分组值(matches[1] to matches[n])的数组，如果被替换的字符串是固定的一个字符串如"the",那matches只有matches[0]="the"这个元素，如果有被替换的字符串匹配的是一个有分组的正则表达式模式，那就用到matches[1]到matches[n]的元素了，具体看正则表达式有多少分组了。在 Jscript 5.5 或更新版本中，String.replace的第二参数也可以是返回替换文本的函数）

< script  src ="prototype.js" ></ script >

< script > ...
function scamCustomers()...{
    var prices = 'book1 $12.5, magazine $5.50, pencil $1.20';
    var priceFinder = / /$([0-9.]+)/;
    var r = prices.gsub(priceFinder, jackUp);
    alert(r);//shows: "book1 $13.75, magazine $6.05, pencil $1.32"
}
    
function jackUp(matches)...{
    //increases the prices by 10%
    var price = parseFloat(matches[1]);        //matches[1]为捕获分组的值 
       return '$' + Math.round(110 * price)/100;
}
</ script >
<input type="button" value="Show the prices" onclick="scamCustomers();" > 

 top

 String模板

随着你的程序JavaScript代码总量的增加，你将渐渐发现你总是在处理相同类型的对象的集合，你需要一种格式化的方式去列出或呈现。

在你的程序中，找到一个对象清单，建立一系列基于对象的属性和一些固定格式的元素这样重复的代码并不稀奇。Prototype.js 引进Template 类，这个类的目的正好是帮你解决这样的情况。

下面的例子说明如何格式化一个HTML中购物车多个物品的清单。

< script  src ="prototype.js" ></ script >

< script > ...
function printCart()...{
    //creating a sample cart
    var cart = new Object();
    cart.items = [ ];
    //putting some sample items in the cart
    cart.items.push(...{product: 'Book 123', price: 24.50, quantity: 1});
    cart.items.push(...{product: 'Set of Pens', price: 5.44, quantity: 3});
    cart.items.push(...{product: 'Gift Card', price: 10.00, quantity: 4});
    
    //here we create our template for formatting each item
    var itemFormat = new Template(
            'You are ordering #{quantity} units ' + 
            'of #{product} at $#{price} each'
            );
    var formatted = '';
    
    for(var i=0; i<cart.items.length; i++)...{
        var cartItem = cart.items[i];
        formatted += itemFormat.evaluate(cartItem) + '<br/> /n';
    }
    
    alert(formatted);
    /**//* SHOWS:
    You are ordering 1 units of Book 123 at $24.5 each<br/>
    You are ordering 3 units of Set of Pens at $5.44 each<br/>
    You are ordering 4 units of Gift Card at $10 each<br/>
    */
}
</ script >
<input type="button" value="Show the shopping cart" onclick="printCart();" > 

更完整的新方法的清单，请参照  对String 类的扩展 

top 

Ajax 对象                                                                             

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

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

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

 top 

 使用 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  src ="prototype.js" ></ script >

< script > ...
    function searchSales()
    ...{
        var empID = $F('lstEmployees');
        var y = $F('lstYears');
        var url = 'http://yourserver/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} 表示一个匿名对象的真实写法(a.k.a. JSON).。他表示你传入的这个对象有一个名为 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 对象自己(a.k.a. XHR)而第二个参数将会是已执行的X-JSON响应HTTP Header(如果存在)。你将会用这个XMLHttpRequest 对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。如果你想返回一些脚本或JSON格式的数据，X-JSON header 将对你非常有用。

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

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

有另一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行，而不管是哪个 AJAX 调用引发它，那么你可以使用新的 Ajax.Responders 对象。

假设你想要在一个 AJAX 调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件句柄来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。看下面的例子。

< script  src ="prototype.js" ></ script >

< script > ...
    var myGlobalHandlers = ...{
        onCreate: function()...{
            Element.show('systemWorking');
        },

        onComplete: function() ...{
            if(Ajax.activeRequestCount == 0)...{
                Element.hide('systemWorking');
            }
        }
    };

    Ajax.Responders.register(myGlobalHandlers);
</ script >

< div  id ='systemWorking' >< img  src ='spinner.gif' > Loading... </ div >

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

 top 

 使用 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 >

如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象能识别JavaScript的响应，你只需在最后参数的对象构造方法中简单加入evalScripts: true; 到属性清单中。但有个问题值得注意，这些脚本块不会被加入到Page的脚本中。正如optins参数对象中名为 evalScripts 选项属性的描述，这些脚本将被执行。" 有什么区别? "，你可能会这样问。我们假定请求URL返回的东西像这样:

< 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关键字来声明这个变量呢。因为那样做创建出来的函数将只是当前脚本块的一个局部变量（至少在IE中是这样）。不写var关键字，创建出来的对象的作用域就是我们所期望的window。

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

 

 

---

下一部分：prototype.js1.5.0开发者手册 译文+添加注释(二)

查考文章：http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html

                   https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html

英文原版：http://www.sergiopereira.com/articles/prototype.js.html