Displaying articles with tag ria

AJAX on Rails(2)

Posted by PunNeng, Sat Mar 04 22:27:00 UTC 2006

ต่อจากคราวที่แล้ว มาต่อกันด้วยการใช้ form_remote_tag จะมีลักษณะเหมือนกันกับ link_to_remote แต่คราวนี้มันจะไปทำงานร่วมกับ form แทน มาดูตัวอย่างกันดีกว่า

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

<html>
  <head>
    <title>Ajax List Demo</title>
    <%= javascript_include_tag "prototype" %>
  </head>
  <body>
    <h3>Add to list using Ajax</h3>
    <%= form_remote_tag(:update => "my_list",
                       :url => { :action => :add_item },
                       :position => "top" ) %>
      New item text:
      <%= text_field_tag :newitem %>
      <%= submit_tag "Add item with Ajax" %>
    <%= end_form_tag %>
    <ul id="my_list">
      <li>Original item... please add more!</li>
    </ul>
  </body>
</html>

มันจะเหมือนกับการประกาศ <form>.....</form> แต่ปุ่ม submit แทนที่พอจิ้มแล้ว มันจะต้องสั่งไปที่ file อันนึง แล้วมันจะ redirect ไปหน้านั้น แต่อันนี้มันจะยิงไปที่ method ที่เราสั่งแทน มันก็ไม่เกิดการ refresh ขึ้น โดย parameter ที่ส่งไปไนั้น จะมี id ของ tag ที่เราจะทำการ update อันถัดไปจะเป็น url ก็คือ method ที่เราจะสั่งให้มันทำงาน และอีกตัวนึงที่จะมีก็ได้ หรือไม่มีก็ได้ คือ ตำแหน่ง จะได้หน้าตาแบบนี้มา แล้วมาดูที่ฝั่ง controller กันบ้าง

  1
  2
  3
  4
  5
  6
  7
  8

class ListdemoController < ApplicationController
  def index
  end

  def add_item
    render_text "<li>" + params[:newitem] + "</li>"
  end
end

add_item จะทำการคุม list เมื่อรับค่า newitem เข้ามาจาก form หน้าตาจะเป็นแบบนี้เมื่อทำเสร็จแล้ว

โย่

ส่วนสำคัญอีกอันนึงคือการใช้ตัวคอยตรวจจับอย่าง Observers ตัว Observers จะมีหน้าที่คอยตรวจจับการเปลี่ยนแปลงของ tag ที่เราต้องการจะตรวจจับ เมื่อมีการเปลี่ยนแปลงมันจะไปเรียกให้ method ใน controller ให้ทำงาน เช่น

  1
  2
  3
  4
  5
  6
  7
  8

<label for="searchtext">Live Search:</label>
<%= text_field_tag :searchtext %>
<%= observe_field(:searchtext,
                 :frequency => 0.25,
                 :update => :search_hits,
                 :url => { :action => :live_search }) %>
<p>Search Results:</p>
<div id="search_hits"></div>

ในนี้จะมี textfield มาตัวนึง ซึ่งมันจะถูกตรวจทุกๆ 0.25 วินาที เมื่อมีการเปลี่ยนแปลง ตัว live_search จะถูกเรียกให้ทำงาน ในกรณีที่ไม่ใส่ค่า :frequency มันจะสั่ง method ให้ทำงานในทุกๆ ครั้งที่มีการเปลี่ยนแปลง ดูตัวอย่างเท่ๆ ได้ที่ http://blog.curthibbs.us/ จะมี searchbox อยู่ ลองใช้ดูละกัน

website

เอาละ คงจะรู้จัก AJAX กันมากขึ้น จากที่ผมเคยว่าไปแล้ว และก็อันนี้ ของใหม่ ที่ทำบน Rails สำหรับคนที่ต้องการจะใช้ ควรจะพิจารณาในหลายๆ ด้านก่อน อย่าคิดว่าจะใช้เพียงเพราะว่าความเท่อย่างเดียว เพราะสิ่งที่มันไม่ค่อยดีกับ AJAX ก็มีเหมือนกัน กล่าวคือ เมื่อเราต้องการจะ bookmark มันไง ถ้าหากว่าเราทำนั่นๆๆ นี่ๆๆ ไปหมดแล้ว แล้วอยากจะเก็บ link มันเอาไว้ มันก็จะเก็บไว้นะ แต่พอที่เรามาที่ link นี้อีกที มันก็จะกลับสู่หน้าแรก แล้วที่ทำๆๆ มาล่ะ ? อีกอันคือปุ่ม back บนหน้า browser เพราะเมื่อเรารู้สึกว่า มันผิดแล้ว อยากจะ back กลับไปจังเลย ถ้าจิ้มละก็ มันก็จะไป link ที่เราเคยมา นั่นหมายความว่า เปลี่ยนหน้าไปเลย เพราะ url มันก็เป็นอันเดิม พอสั่ง back มันก็กลับไป url ก่อนหน้าที่เราเคยเข้ามา

หรือในกรณีที่เราอยากจะทำการสร้างใหม่ทั้งหน้า
เหนื่อยตายเลย แบบนี้ เราจะนิยมโหลดหน้ามันมาใหม่เลยดีกว่า เพราะจะได้ไม่ต้องมาสั่งลบ html dom แล้วสั่งสร้างหน้าของเราใหม่อีกที แต่ในกรณีนี้ เราอาจจะใช้ iframe เข้าช่วยได้

ก็คงจะแล้วแต่ทุกท่านละกัน ใช้งานอะไร ก็ให้มันเหมาะสมกับงานละกัน

ข้อมูลจาก http://www.onlamp.com

แก้ไขล่าสุด วันที่ 3 กรกฏาคม 2550 เวลา 21.58 น.

0 comments | Filed Under: Ruby on Rails | Tags: ria

AJAX on Rails

Posted by PunNeng, Wed Mar 01 04:11:00 UTC 2006

ช่วงนี้ กระแส AJAX มาแรงมากครับ เข้าไปท่องเว็บบอร์ดที่ไหน ก็ต้องเจอ AJAX กันทุกเว็บบอร์ด แม้กระทั่งในนี้ก็ยังมี เหอๆ สำหรับท่านที่เพิ่งมาอ่านใหม่ ถ้ายังไม่เข้าใจว่า AJAX คืออะไร search เอานะครับ

อย่างที่บอกไปแล้ว ช่วงนี้ผมทำ Ruby on Rails อยู่ รู้สึกทึ่งกับความสามารถของ Rails มากมาย มันเป็น magic บนเว็บเลยนะ อะไรมันจะง่ายขนาดนี้

1 feature ที่ผมพบคือ AJAX on Rails นี่แหละ มันสร้างความมหัศจรรย์ ให้กับผมมาก จากตอนแรกที่เราต้องส่ง XML โยนกันไปโยนกันมาระหว่าง backend ไปยัง frontend แล้วพอรับ XML ชุดนั้นมาแล้ว เราจะต้องไปเขียนสั่ง html dom ให้ทำนั่น วาดนี่ ลบอันนั้น โอ้ย สาระพัด เปลืองพลังงานมากมายเลยครับ แต่ AJAX on Rails ช่วยให้พลังถดถอยน้อยมากมายยยย เราไม่ต้องไปสนใจ XML อะไรนั่นแล้ว หรือต้องมานั่งสั่ง html dom ให้ทำงานตามความต้องการ มันจะมี API สำหรับจัดการ html dom ทั้งหมด

มาดูหลักการคร่าวๆ ของ Rails ที่ไปจัดการกับ AJAX ดีก่า

Rails มันมี library ต่างๆ นานา ไว้จัดการกับ AJAX อยุ่แล้ว สบายมากๆ เพียงแค่เรียกใช้ method ที่จัดไว้ให้ ก็เรียบร้อยแล้ว มาดู process รวมๆ ก่อน เหมือนๆ กันทุกเว็บ

  1. user ทำอะไรบางอย่างบนหน้าเว็บ ก็คือ event ต่างๆ นั่นเอง เช่น กดปุ่ม กด link หรือเปลี่ยนแปลง data ใน textfield
  2. แล้วมันก็จะทำการส่งแบบ asynchronously ไปยัง server โดยผ่าน XMLHttpRequest
  3. แล้ว serverside ก็จะทำการอะไรสักอย่าง ที่เรากำหนดไว้ แล้วส่งกลับมายังหน้าเว็บของเราโดย XML
  4. แล้วตัว JavaScript (จะถูกสร้างโดย Rails อย่างอัติโนมัติ) ก็จะทำการ update หน้าเว็บโดยใช้ข้อมูลจาก XML ที่รับมานี่แหละ

แต่ที่เราจะมาดูคือ มาดูว่า Rails มันมีการจัดการหน้าเว็บของเราที่มันแสนง่าย ยังไง

link_to_remote

อย่างที่บอกไป Rails มันจะมีพวก library ที่บรรจุ method ต่างๆ ที่ไว้จัดการกับหน้าเว็บ ซึ่งหนึ่งในนั้นก็คือ link_to_remote มาค่อยๆ พิจารณาหน้า page ง่ายๆ ก่อนดีกว่า คือหน้านี้จะมี link สำหรับแสดงเวลา ใน app ก็จะทำการใช้ AJAX ทาง link_to_remote นี่แหละ ในการที่จะรับค่าเวลากลับมา index.rhtml

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16

<html>
  <head>
    <title>Ajax Demo</title>
    <strong><%= javascript_include_tag "prototype" %></strong>
  </head>
  <body>
    <h1>What time is it?</h1>
    <div id="time_div">
      I don't have the time, but
      <strong><%= link_to_remote( "click here",
                         :update => "time_div",
                         :url =>{ :action => :say_when }) %></strong>
      and I will look it up.
    </div>
  </body>
</html>

อันนี้จะมีสอง method ก็คือ javascriptincludetag() มันจะนำ Prototype ซึ่งเป็น framework อีกตัวหนึ่งของ JavaScript เข้ามาให้ Rails ทำการเรียกใช้ ตัวถัดมาก็คือ link_to_remote() ในการเรียกใช้ form ก็จะมี 3 parameter คือ

  1. text ที่จะแสดงบนปุ่ม
  2. id ของ html dom ที่จะทำการ update
  3. ตัว action ซึ่งมันจะไปเรียก method ที่เราเขียนไว้ใน Controller

ก่อนคลิก แล้วมาดูที่ตัว Controller กันต่อ (หลายๆ คนอาจจะงง แต่ไม่นานหรอกคับ เดี๋ยวจะว่าเกี่ยวกับ Ruby on Rails ต่ออีก)

  1
  2
  3
  4
  5
  6
  7
  8

class DemoController < ApplicationController
  def index
  end

  def say_when
    render_text "<p>The time is <b>" + DateTime.now.to_s + "</b></p>"
  end
end

ผลที่ได้หลังจากคลิก หน้า index นี้ ก็ไม่มีอะไรมาก ก็จะมี link ให้คลิกเพื่อแสดงเวลา ตัว say_when method ก็จะทำการ render ให้ใหม่ จริงๆแล้ว process เดิมๆ ของ AJAX ก็ยังคงอยู่ ไม่ว่าจะเป็น XMLHttpRequest หรือตอนส่งค่ากลับมาเป็น XML แต่ตัว Rails นี่แหละ ทำให้เราไม่ต้องไปเสียเวลาจัดการกับส่วนนี้ สบายที่สุด

ยังมี optional parameter อยู่อีกตัวนึง

  1
  2
  3
  4

<%= link_to_remote( "click here",
                   :update => "time_div",
                   :url => { :action => :say_when },
                   :position => "after" ) %>

ตัวที่เพิ่มเข้ามาคือ position ก็จะมีค่าที่เป็นไปได้คือ before, after, top, และ bottom before กะ after จะทำนอก tag ที่เราระบุ id แต่ top กะ buttom จะทำใน tag ที่เราระบุ id เช่นกัน ผลลัพธ์

ยาวจัง ยังไม่จบครับ คราวหน้ามีต่อ

ข้อมูลจาก http://www.onlamp.com

แก้ไขล่าสุด วันที่ 3 กรกฏาคม 2550 เวลา 21.58 น.

0 comments | Filed Under: Ruby on Rails | Tags: ria

Ajax

Posted by PunNeng, Wed Dec 21 23:45:00 UTC 2005

เคยรำคาญการ refresh บนเว็บหรือเปล่าครับ ลองเปรียบเทียบ app บน pc ของเราดูนะ มันเปลี่ยนนั่น เปลี่ยนนี่ โดยที่ไม่ต้องมีการ refresh หน้าใหม่ อย่าง MS word เวลาพิมพ์เกิน 1 หน้ากระดาษ หน้ากระดาษใหม่ ก็ขึ้นมาให้เองโดยไม่มีการ refresh หน้านั้นๆ เดี๋ยวนี้บนเว็บก็ทำได้แล้วนะครับ ลองดูตัวอย่างง่ายใน google map ใช้ arrow key ในการควบคุมเลื่อนแผนที่ขึ้นไปขึ้นมาได้ สวยงาม ดูดี มีชาติตระกูล หรือ google sugguest พอพิมพ์อะไรบางอย่างลงไป แล้วกดขึ้นหรือลง ก็จะมี suggestion โผล่มาให้ดู

ถ้าลำพังการทำให้อะไรต่างๆ บนหน้าเว็บเราเปลี่ยนไปโดยไม่ต้อง refresh แค่ JavaScript ก็พอแล้วครับ แต่ถ้าอยากจะต่อกับฐานข้อมูลล่ะ ตามปกติเวลาที่เรา request ไปยัง server แล้ว server ก็จะส่งสิ่งที่เราร้องขอไปกลับมา มันคงจะมีการ refresh บนหน้าเว็บแน่ๆ ถึงแม้จะใช้ JavaScript ควบคุมก็ตาม แต่สิ่งที่นักพัฒนาต่างๆ บนเว็บ เรียกมันว่า AJAX นี่แหละ จะช่วยจัดการปัญกาอันนี้ได้

AJAX คืออะไร

AJAX หรือ Asynchronous JavaScript and XML คือเทคนิกใหม่ในการสร้าง web application เป็นส่วนผสมระหว่าง

  • XHTML หรือ HTML และ CSS ทำหน้าที่แสดงผลบนเว็บ
  • Document Object Model(DOM) เป็นตัวช่วยให้การ output เปลี่ยนไปได้โดยอิสระ
  • XML และ XSLT เป็นตัวเก็บ data ที่เราจะเอามา output
  • XMLHttpRequest เป็นตัวช่วยในการดึง content ออกมาแสดง(ในความเป็นจริงจะใช้ XML เป็นหลัก แต่มันก็ดึงอย่างอื่นได้ด้วย)
  • และ JavaScript เป็นตัวเชื่อมโยงทั้งหมดในตอนต้น เข้าด้วยกัน

มาดู หลักง่ายของ web app ทั่วๆ ไปกันก่อน User ทำอะไรบางอย่างบนหน้าเว็บ แล้วฝั่ง client จะติดต่อไปยัง server ว่าจะทำนั่นทำนี่ แล้ว server ก็จะประมวลผล ยัดนู่น ดึงนี่ออกจาก database แล้วส่งค่ากลับมายัง client ตามรูปฝั่งซ้าย แต่ทางฝั่งขวาที่เป็น AJAX ก่อนที่จะมีการส่งอะไรบางอย่างไปยัง server มันจะต้องมาส่งมายัง JavaScript ก่อน แล้วจึงส่งไปยัง server อีกที แล้วตอนที่ส่งข้อมูลกลับมา ก็ต้องส่งเข้า JavaScript ก่อน ก่อนที่จะมาแสดงผลบนหน้าเว็บ

กระบวณการแบบนี้ เหมือนจะยุ่งยากสำหรับนักพัฒนาอย่างเราๆ ทีเดียว แต่ในฝั่ง user เขาไม่รู้เรื่องหรอก แต่ทำไมเราต้องทำเรื่องยุ่งยากพวกนี้ด้วยล่ะ:b1: ลองนึกดู ในขณะที่ client ส่งการร้องขอไปยัง server แล้ว user ทำอะไร?? แน่นอนละ รอสถานเดียว ทำไมเราไม่สร้างสิ่งบางอย่างให้เขาทำ หรือเห็นในขณะที่รอล่ะ มันจะดีกว่าไหม แทนที่จะให้เขานั่งรออย่างเดียว AJAX ช่วยได้ครับ

AJAX แตกต่างอย่างไร

มันจะไปช่วยหยุดกระบวณการ จิ้มแล้วรอ แล้วจิ้มอีกทีแล้วรอต่อไปอีกที ตามระบบของ web app ทั่วๆ ไป ด้วยตัว AJAX engine ตัวกลไกนี้ จะอยู่ระหว่างหน้าเว็บ กับฝั่ง server มันเหมือนจะทำให้ซับซ้อนขึ้น จนทำให้มีการตอบสนองน้อยลง แต่จริงๆ แล้ว ไม่ใช่เลย

มาเริ่มตั้งแต่การโหลดหน้าเว็บเลย ตั้งแต่เปิด session browser จะทำการโหลด AJAX engine ซึ่งสร้างด้วย JavaScript ที่ถูกรวมๆไว้ในที่ลับตาสักแห่งหนึ่ง ตัว engine นี้แหละ เป็นทั้งตัวสั่งการแสดงผลออกทางหน้าเว็บ และยังทำการติดต่อไปยัง server อีกด้วย ผลที่ตามมาคือ เราจะไปขัดจังหวะกระบวณการที่ส่งจาก client ไปยัง server ได้(Asynchronus) จะทำให้เราแทรกเหตุการณ์บางอย่างเข้าไปในขณะที่ request มันกำลังเดินทางไปยัง server เพราะฉะนั้น กระบวณการเด้งหน้า windows ขึ้นมาใหม่ หรือไอคอนนาฬิกาทราย หรือการจิ้มแล้วรอ ก็จะไม่มีอีกต่อไป เราก็ทำการแทรกสิ่งต่างๆ ที่อยากจะให้ user ดู ไปบนหน้าเว็บในขณะที่ทำการโหลดสิ รูปฝั่งบนนะครับ นี่แหละ กระบวณการจิ้มแล้วรอ ถ้าช่วง system processing ใช้เวลานาน เราก็รอนาน แต่ฝั่งล่าง ลองดูฝั่ง user activity จะทำการส่งหลายๆ อย่าง(requests) มาที่ AJAX engine ก่อน แล้วมันก็จะเช็ค ตรวจสอบ ตามเรื่องตามราวของมัน จากนั้นจึงจะส่งไปยัง server อีกต่อหนึ่ง แต่ช่วงที่ส่งไปเนี่ย ในขณะนี้ เรายังจะทำการ สั่งนั่น สั่งนี่ ผ่าน JavaScript ได้ โดยการไปเก็บ XML ที่เราเตรียมไว้แล้ว โดยการสร้างเก็บไว้ หรือเขียนสั่งไปเก็บค่าใน DB มาสร้างเป็น XML อีกที ก็ได้ พอหลายๆ อย่างที่เราส่งมาตอนแรก server ทำการจัดการเสร็จเรียบร้อยแล้ว ก็จะทำการส่งกลับมาที่ AJAX engine ก่อน มันจึงจะสั่งแสดงผลทางหน้าจออีกที เห็นมะ มันไม่ต่อเนื่องกัน ไม่ต้องมานั่งรอตอนที่รอการตอบกลับของ server

ใครกำลังใช้ AJAX อยู่

ค่ายใหญ่ๆ ทั้งนั้น แต่จะไปกองกันอยู่ที่ google ทั้งนั้น ไม่ว่าจะเป็น gmail flickr หรือ google maps และค่ายอื่นอย่าง A9 ของ Amazon

แปลและเรียบเรียงใหม่จาก adaptivepath

แก้ไขล่าสุด วันที่ 30 มิถุนายน 2550 เวลา 0.58 น.

0 comments | Filed Under: General | Tags: ria

About this site

Worst view in IE.

Pages

Categories

Top Tags

More

codegent: we're hiring