?????????最近一段時間在使用RoR做了一個bug管理軟件，里面用到了一些ajax技術。主要是用返回html代碼段直接更新頁面的某個區域。這種方法開發起來和原來開發方式并沒什么太大的區別，大大降低了使用ajax的難度。

RoR 中提供了一些方法來簡化 Ajax 的使用。

1．?? Javascript_include_tag

這是一個引入 javascript 文件的方法 , 如果使用 <%=javascript_include_tag(:defaults)%> 那么將引入 controls.js,dragdrop.js,effects.js,prototype.js 這四個 js 文件。使用 <%=javascript_include_tag(“common”)%> 將引入在 public/javascripts/ 下的 common.js 文件。

?

2．?? link_to_remote

這是一個很方便使用的方法，它可以返回一段 html 代碼段然后更新一個區域。例子：

??? <%= link_to_remote ( " 編輯 " , :update => "type" , :url =>{

:controller => "types" , :action => "edit" , :id =>type.id}%>

?

<div id=”type”>

</div>

?

:update 對應的值就是要更新的區域， : controller 對應的是控制類， :action 對應的是執行控制類中的那個方法。 :id 是要傳入的參數。

?

也可以用回掉方法來接受返回回來的 html 代碼或者是 xml. 例子：

??? <%= link_to_remote ( " 編輯 " , :url =>{ :action => "edit" , :id =>submodule.id},

???????????? :complete => "showEditModuleDialog(request)" )%>

?

function showEditModuleDialog (request){

???? alert(request.responseText);

???? alert(request.responseXML);

}

?

3．?? form_remote_tag

這個方法可以使你提交一個 form 而不用提交整個頁面。例子：

<%=form_remote_tag( :update => "bugsetting" , :url =>{ :controller => "systems" ,?

:action => "create" })%>

? ?? <table>

??? <tr>

??????? <td> 操作系統名稱 : </td>

??????? <td> <%= text_field 'system', 'name'? %></td>

??? </tr>

??? <tr>

??????? <td> 錯誤等級說明 : </td>

??????? <td> <%= text_field 'system', 'description'? %></td>

??? </tr>

??? <tr>

??????? <td colspan ="2">

??????????? <input type ="submit" value=" 保存 " />

??????? </td>

??? </tr>

</table>

<%= end_form_tag %>

這邊參數的使用和 link_to_remote 的使用是一樣的。

1. 定義類

在 javascript 中定義類的方式有好幾種， prototype 也提供了一種定義類的方法。

??? var Shape = Class.create();

??? Shape.prototype = {

?????? initialize:function(color){

?????????? this.color = color;

?????????? alert('in initialize');

?????? },

?????? draw:function(){

?????????? alert("in draw");

?????????? alert(this.color);

?????? }

??? }

??? var shape = new Shape('red');

shape.draw();

initialize 是 Shape 的構造器。

2. 類繼承

我們現在有一個 Circle 繼承了 Shape 并增加了半徑的屬性。代碼如下：

??? var Circle = Class.create();

??? Circle.prototype = Object.extend(new Shape(),{

?????? initialize:function(color,radius){

?????????? alert('in Circle initialize');

?????????? this.color = color;

?????????? this.radius = radius;

?????? },

?????? drawCircle:function(){

?????????? alert("in drawCircle");

?????????? alert("color:"+this.color);

?????????? alert("radius:"+this.radius);

?????? }

??? })

???

??? var circle = new Circle("green",10);

??? circle.drawCircle();

??? circle.draw();

Circle 內的 this.color 是從父類繼承下來的， new Circle("green",10) 的時候父類的構造函數將首先別執行，但這時的 color 的值是 undefine ，接著執行子類的構造函數 color 將被賦值為 “ green”.

????????這本書前幾章講述了Ajax基礎，并舉出了幾個常見的Ajax例子。后面幾章主要是介紹幾款工具的使用，例如：jsdoc,jsunit等。就像本書上說的本書主要關注的是前臺，對于如何和后臺交互沒有做進一步的講解。例子使用的后臺都是servlet?？戳擞X得這是一本還不錯的Ajax入門的書。