Rails中的Ajax初体验

最新推荐文章于 2016-03-24 14:58:05 发布

sizheng0320

最新推荐文章于 2016-03-24 14:58:05 发布

阅读量770

点赞数

分类专栏： ROR: Ruby On Rails 文章标签： ajax rails prototype xmlhttprequest action javascript

本文链接：https://blog.csdn.net/sizheng0320/article/details/3870154

版权

ROR: Ruby On Rails 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前在网上大概看了一下Ajax的内容，大概了解了它主要是使用XMLHttpRequest对象使得javascript客户端脚本与服务器端进行交互的技术。这种技术的应用如今在互联网上已经是遍地开花了，人们也在应用它的过程中对其继续进行着研究和探讨。而我对Ajax的实践，是从Rails开始的。

Rails中集成了Ajax技术，故不需要开发人员自己创建XMLHttpRequest对象、自己写各种复杂的函数，而是通过调用Rails中集成的Ajax机制，方便地实现各种效果。Rails中使用Ajax的话，目前主要是通过三种方式（以后说不定还会出现更多）：Prototype、Script.aculo.us，以及RJS。实际上，后两者都是基于Prototype库的，都要在页面中包含Prototype.js文件（该文件在Rails项目的public/javascripts目录下）。至于这三者具体都是什么东西，不是这里要讲的，网上随处可以找到资料。

我只针对Prototype和RJS做了实践——Prototype作为背景基础，RJS作为打算在项目中应用的技术。具体如下：

1、分别针对Prototype和RJS创建两个控制器：prototype_controller和rjs_controller，两个控制器中均有一个空的action，均取名为index，以作为页面的指引action。

2、分别为两个控制器建立相应的视图，即views目录下的prototype和rjs两个目录。两个目录下均建立两个视图模板：index.rhtml和_index.rhtml，后者为前者使用的局部模板。要在Rails中使用Ajax，局部模板是必须的。

3、在两个视图的index.rhtml的<head>段中，均添加对prototype库的包含：

4、在两个视图的index.rhtml的<body>段中，添加一个id为return_value的div，其中分别渲染各自的局部模板_index.rhtml，然后加一个换行：

5、接下来，在两个视图的index.rhtml的<body>段中，继续分别添加各自的链接。

Prototype中的为：

<%=link_to_remote 'Prototype Ajax Test', :url=>{:action=>"prototype_ajax", :my_name=>"sizheng"}, :update=>"return_value"%>

RJS中的为：

<%=link_to_remote 'RJS Ajax Test', :url=>{:action=>"rjs_ajax", :my_name=>"sizheng"}%>

可以看到，二者除了链接显示的内容以及调用的action不同之外，还有一个值得注意的区别：Prototype版的带有“:update=>"return_value"”，而RJS版的没有。这个区别的影响后面再说。

6、两个视图要使用的局部模板都很简单，只有一句：<%=@return_value || "hello world"%>。这句的含义是：看看@return_value变量是否为空，若不为空，则显示其值，若为空，则显示“hello world”。

7、下面就该分别为两个链接要调用的action（prototype_ajax和rjs_ajax）填写内容了。分别在prototype的控制器和RJS的控制器中添加名为prototype_ajax和rjs_ajax的action。代码如下：

def prototype_ajax my_name=params[:my_name] @return_value= "Prototype Ajax welcomes "+my_name+"!" render :partial=>"index",:layout=>false end def rjs_ajax my_name=params[:my_name] @return_value= "RJS Ajax welcomes "+my_name+"!" render :update do |page| page.replace_html 'return_value', :partial=>'index' end end

二者的大意相同，都是先取到传入的参数my_name的值，然后组合成一个字符串，保存在@return_value中，供视图使用，只是实现方式不同。

至此，两种版本的两个非常简单的Ajax页面就做好了。两种版本在打开初始页面时均显示Hello world，不同的是Prototype版的链接叫Prototype Ajax Test，RJS版的链接叫RJS Ajax Test。点击Prototype Ajax Test，则Hello world变成了“Prototype Ajax welcomes sizheng!”；点击RJS Ajax Test，则Hello world变成了“RJS Ajax welcomes sizheng!”

最后，说一下第5步中的那个问题：如果RJS版的链接中也加上“:update=>"return_value"”，则点击RJS版的链接时，“Hello world”不会变成预期的字符串，而是变成了页面中实际生成的那段Ajax的javascript代码：try { Element.update("return_value", "/n/nRJS Ajax welcomes sizheng!/n"); } catch (e) { alert('RJS error:/n/n' + e.toString()); alert('Element.update(/"return_value/", /"//n//nRJS Ajax welcomes sizheng!//n/");'); throw e }。