如果你是Ajax新手，撇开额外的资源库和辅助器的支持，我想你现在一定很想看到Ajax的神奇魅力，看看它的窍门是不是像平常描述的那样。虽然如此，要是用一大堆的代码来实现一个简单的功能，我想也是一件非常不爽的事情。
许多Javascript资源库的出现使得Ajax变得越来越简单，中间比较突出的一个就是Prototype，Rails中包含了它。我们会在第十章详细讲解Prototype，但是现在，我们来好好看看几个例子，首先，重新做一下上次那个例子，这次使用Prototype，看看新加的代码块：
<script src=
"/javascripts/prototype.js" type=
"text/javascript">
</script>
<p><a href= "#" onclick= "prototypeAlert( );">Call with Prototype</a></p>
<script type= "text/javascript">
function prototypeAlert( ) {
new Ajax.Request('/chapter2/myresponse', { onSuccess: function(request) {
alert(request.responseText);
}})
}
</script>
</script>
<p><a href= "#" onclick= "prototypeAlert( );">Call with Prototype</a></p>
<script type= "text/javascript">
function prototypeAlert( ) {
new Ajax.Request('/chapter2/myresponse', { onSuccess: function(request) {
alert(request.responseText);
}})
}
</script>
注意到第一行，这里包含了一个prototype.js的资源文件，这样引用就可以在我们的页面中使用prototype了，当你每次生成一个新的Rails应用时，一份Prototype的拷贝就放在了public/javascripts目录下面。在prototypeAlert()功能代码里，第一行初始化了一个Ajax.Request实例对象,Ajax.Request是Prototype的一个类。初始化方法中第一个参数是请求的URL地址，第二个参数是一个Javascript对象的字面量集合（key/value对），类似于hash或者是其他语言中的二维数组。在这个例子里，给出的唯一一个选项是onSuccess,实现的是一个回调的功能。
注意到这个例子中没有处理IE版本导致的XMLHttpRequest问题也没有涉及readyState的代码。因为Prototype会处理这些细节，给你一个很清爽的API。
到目前为止，所有这些实例都是创建了一个alert()，在实际的应用中，更普遍见到的是，你希望增加或者修改页面的内容。来看看这个新的迭代：
<script src="/javascripts/prototype.js" type="text/javascript">
</script>
</script>
<p><a href="#" )">Update element </a></p>
<p id="response"></p>
<script type="text/javascript">
function updateElement( ) {
new Ajax.Request('/chapter2/myresponse', { onSuccess: function(request) {
$('response').update(request.responseText);
}})
}
</script>
<p id="response"></p>
<script type="text/javascript">
function updateElement( ) {
new Ajax.Request('/chapter2/myresponse', { onSuccess: function(request) {
$('response').update(request.responseText);
}})
}
</script>
观察下跟上一个例子有什么不同：定义了一个id="response"的空段落标签，这个标签就是用来等待服务器回应之后来填充的地方。onSuccess功能代码也发生了改变，原先是调用alert(),现在将服务器回应的文本内容填充到response标签中(利用protype的update()方法，这个方法用来设置HTML内部标签的属性)。$实际上是prototype定义的一个功能代码的名字，这个方法后面跟的('response')字符串意思是返回id=这个字符串的HTML标签。
==============================================================
tip：
Prototype的$()这个功能是用的非常多的，值得仔细研究研究。本质上，它只不过是为标准的DOM方法document.getElementById做的一个封装，为了好记使用了$这个名字，看起来好象是JavaScript语法一样。但是$也不仅仅是一个封装，原因有二，第一：你可以使用许多参数，得到许多的元素。第二，每一个元素返回都会自动扩展出一个强大的方法集，具体细节参见第十章内容。
也许最重要的是，如果你传入$()一个字符串，它会返回一个ID=那个字符串的DOM元素。但是如果你传入其他类型的对象，就会简单的返回的一个未改变的DOM对象。结论就是你可以传入一个你也不知道是不是一个字符串或者是一个DOM元素的对象给$()，让Javascript接口性能更好些
=============
更新一个HTML标签的做法是一种更常见的用法，prototype可以很轻松的通过Ajax.Updater来实现。来看一下：
<script src="/javascripts/prototype.js" type="text/javascript">
</script>
</script>
<p><a href="#" )">Update with Ajax.Updater</a></p>
<p id="response2"></p>
<script type="text/javascript">
function updater( ) {
new Ajax.Updater('response2', '/chapter2/myresponse');
}
</script>
<p id="response2"></p>
<script type="text/javascript">
function updater( ) {
new Ajax.Updater('response2', '/chapter2/myresponse');
}
</script>
在这个例子中，没有用到onSuccess功能，给Ajax.Updater()传入了两个参数，一个是HTML标签的ID参数，用来更新这个标签的内容，另一个参数是请求的URL地址。Ajax.Updater请求URL地址并且自动创建一个onComplete功能，用responseText的值来更新指定的DOM元素内容。就像初期的Ajax.Request一样，最后一个参数可以作为一个选项集来使用。其中有一个选项叫做insertion.它不仅可以让你实现简单的替换标签内容功能，而且允许你在标签附近不同地方插入内容。可选的有四个插入点：Before(前面), Top(上面), Bottom（底部）和after(后面)。例如：
<script src="/javascripts/prototype.js" type="text/javascript">
</script>
</script>
<p><a href="#" )">Append to element</a></p>
<p id="response3"></p>
<script type="text/javascript">
function appendToElement( ) {
new Ajax.Updater('response3', '/chapter2/myresponse',
{ insertion:Insertion.Bottom });
}
</script>
<p id="response3"></p>
<script type="text/javascript">
function appendToElement( ) {
new Ajax.Updater('response3', '/chapter2/myresponse',
{ insertion:Insertion.Bottom });
}
</script>
当你第一次点击这个链接的时候，从服务器响应的内容会添加到页面中，前面的例子中，当你再次点击链接的时候，这段内容会被再次替换，也就说内容不会重复出现。而现在，当你再次点击链接时，服务器响应的内容会被添加在后面。
我们已经设法减少一些相当复杂的动作，最后只用了一个function和一个声明。其实也不用这么兜圈子，我们再减少代码，就用以前用过的那种简单的一个onclick属性：
<script src=
"/javascripts/prototype.js" type=
"text/javascript">
</script>
<p><a href= "#" onclick=" new Ajax.Updater('response4',
'/chapter2/myresponse', { insertion:Insertion.Bottom });">
Append to element</a></p>
<p id= "response4"></p>
</script>
<p><a href= "#" onclick=" new Ajax.Updater('response4',
'/chapter2/myresponse', { insertion:Insertion.Bottom });">
Append to element</a></p>
<p id= "response4"></p>
本文转自 fsjoy1983 51CTO博客，原文链接：http://blog.51cto.com/fsjoy/91023，如需转载请自行联系原作者
