Ajax

［６］Ajax

１．Ajax
通常Webアプリケーションではページ単位で画面が遷移します。これに対しＡｊａｘ（Asynchronous javaScript+XML）はページの一部分を書き換えることで、元の画面を保持しながら進めることができます。
ActiveFormで作成したプログラムをベースに、Ajaxを利用すると、どのように変化するか理解しましょう。

1-1.プロジェクトの複写
まず始めにプロジェクトAppli002を新しいプロジェクトAppli006へコピーします。

(1) Appli002上で右クリックしてコピーを選択する

(2) プロジェクト名(N)を新しいプロジェクトAppli006にする

1-2.画面とプログラムの流れ
(1) 通常の場合
プロジェクトAppli002は三角形の面積を求めるプログラムで、画面の遷移は次のようになっています。

(2) Ajaxを利用した場合
これに対しＡｊａｘは、元の画面を保持しながら進めることができます。Ajaxを利用した三角形の面積を求めるプログラムを使ってその流れを説明します。

ここで_kekka.html.erbはパーシャルerbと呼ばれ、部分的に更新を行うプログラムは約束事で先頭に”_”を付けます。

1-3.プログラムの修正
(1) 入力プログラム（index.html.erbの修正）
AjaxはJavascriptで実現しているので、まずjavascriptを対象とするビュープログラムに埋め込みます。
そのビュープログラム上で特定のフィールドを監視し、
そのフィールドが更新された場合Ajaxを利用してサーバとデータの送受信を行います。
またデータを受け取るフィールドを用意することで結果を指定の場所に表示できます。

/app/views/triangle/index.html.erb

ここでobserve_fieldを説明します。
このobserve_field はrailsのRJSテンプレートという機能を使っています。
RJSテンプレートとは、javascriptを書かなくても簡単にかける機能でパラメータ指定のみで利用できます。
:cこのフィールドを監視する
:update=>"kekka"この場所を更新する
:position=>"top"updateで指定した要素のどこに表示するか

“top”：先頭

”bottom”：最後

”before”：要素の直前

”after”：要素の直後

指定しないときは上書き
:url=>{:action=>"calculate"}どのメソッドを呼び出すか指定する
:frequency=>0.5監視間隔を指定する
:submit=>"param"データを送信するフォームまたは子要素を持つ親のidを指定する
(2) 面積を求めるプログラム（triangle_controller.rbの修正） このプログラムの最後で制御をパーシャルプログラムに移します。 
/app/controllers/triangle_controller.rb

class TriangleController < ApplicationController
  def index
  end

  def calculate
    x=params[:a].to_f
    y=params[:b].to_f
    z=params[:c].to_f
    fg="ON"
    fg="off" if x+y<=z
    fg="off" if x+z<=y
    fg="off" if y+z<=x
    if fg=="ON" then
      s=(x+y+z)/2
      area=Math.sqrt(s*(s-x)*(s-y)*(s-z))
      @result = "辺の長さ #{x}, #{y}, #{z} の三角形の面積は#{area}"
    else
      @result = "辺の長さ #{x}, #{y}, #{z} では三角形はできない"
    end
    render :partial => "kekka"
  end
end
(3) 結果表示プログラム（_kekka.html.erbの新規作成） 
/app/views/triangle/_kekka.html.erb

<%= "#{@result}" %><br/>
(4) 動作確認 プログラムを実行して動作を確認します。
← 認証機能 | index | ActiveScaffold →