?????????最近一段時間在使用RoR做了一個bug管理軟件，里面用到了一些ajax技術(shù)。主要是用返回html代碼段直接更新頁面的某個區(qū)域。這種方法開發(fā)起來和原來開發(fā)方式并沒什么太大的區(qū)別，大大降低了使用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 代碼段然后更新一個區(qū)域。例子：

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

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

?

<div id=”type”>

</div>

?

:update 對應(yīng)的值就是要更新的區(qū)域， : controller 對應(yīng)的是控制類， :action 對應(yīng)的是執(zhí)行控制類中的那個方法。 :id 是要傳入的參數(shù)。

?

也可以用回掉方法來接受返回回來的 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> 操作系統(tǒng)名稱 : </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 %>

這邊參數(shù)的使用和 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 的構(gòu)造器。

2. 類繼承

我們現(xiàn)在有一個 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 內(nèi)的 this.color 是從父類繼承下來的， new Circle("green",10) 的時候父類的構(gòu)造函數(shù)將首先別執(zhí)行，但這時的 color 的值是 undefine ，接著執(zhí)行子類的構(gòu)造函數(shù) color 將被賦值為 “ green”.

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