AJAX with JEE

[nat3]

เห็นเค้าปั๊มกระทู้แบบไร้สาระกัน เลยมาปั๊มแบบมีสาระเดก่า เพราะบอร์ดนี้มานเงียบเหงาเหลือเกิน สำหรับเรื่องที่เอามาปั๊ม ก็กะลังร้อนแรงในช่วงนี้ ใครอยากอ่านต้นฉบับภาษาปะกิดก็เข้าไปได้ที่ http://java.sun.com/developer/technicalArticles/J2EE/AJAX แปลผิดยังไงก็อย่าว่ากันเลย เพราะภาษาปะกิดก็ไม่ได้เก่งอะไรมากมาย

Article
Asynchronous Javascript Technology and XML (AJAX)
With Java 2 Platform, Enterprise Edition

โดย Greg Murray, 9 มิถุนายน 2005 (นานแล้วเหมือนกันแฮะ)

สำหรับใครก็ตามที่ได้ใช้ Gmail, Flickr, Google Suggest(อันนี้ยังไม่เคยใช้แฮะ) หรือ Google Map คงรู้แล้วว่า web-application แบบใหม่ได้เกิดขึ้นแล้ว โดย application เหล่านี้มีลักษณะคล้ายกับ application ที่อยู่บนเครื่องมากขึ้น ไม่ต้องใช้ plugins หรือ feature พิเศษๆ ของ browser แต่อย่างใด ต่างจาก web-application สมัยก่อนที่เป็น HTML ธรรมดาๆ เวลาเปลี่ยนหน้าที ต้องมีการดึงข้อมูลทั้งหมดมาใหม่ทุกครั้ง ซึ่งปัจจุบัน Javascript และ CSS ได้พัฒนามาจนถึงขั้นที่สามารถให้ dynamic web application สามารถทำงานได้อย่างมีประสิทธิภาพ และใช้งานได้ทุกบราวเซอร์ บทความนี้จะพูดถึง เทคโนโลยีที่ใช้ทำสิ่งเหล่านี้ขึ้นมา

[nat3]

Introduction Asynchronous Javascript Technology and XML (AJAX) - ไม่อยากแปลหัวข้อเป็นไทยง่ะ เพราะแปลแล้วมานรู้สึกทะแม่งๆ ไงไม่รู้ ใครแปลเก่งๆ จะมาแปลก็ได้นะ

การใช้จาวาสคริปส์ทำให้หน้าที่เป็น HTML สามารถสื่อสารกับเซิร์ฟเวอร์ได้โดยการดึงและแปลข้อมูลที่เป็น XML ออกมา โดย XML จะถูกนำมาใช้กับ Javascript เพื่อใช้เพิ่ม หรือแก้ไข Document Object Model (DOM) ของหน้า HTML คำว่า Asynchronous Javascript Technology and XML (AJAX) ก็เกิดจากโมเดลการทำงานข้างต้นนั่นเอง

เทคโนโลยี AJAX ไม่ไช่สิ่งใหม่ที่เกิดขึ้นมาแต่อย่างใด แต่เป็นสิ่งที่เคยอยู่ใน Internet Explorer มาก่อน ซึ่งถึงเรียกว่า web remoting หรือ remote scripting โดยผู้พัฒนาเว็บได้ใช้รวมกับ plugins, applets และ hidden frames ต่างๆ เพื่อให้เกิด interaction model แต่ในปัจจุบันเว็บบราวเซอร์ต่างๆ ได้ซัพพอร์ทสิ่งที่เรียกว่า XMLHttpRequest ซึ่งทำให้เกิดการเปลี่ยนแปลงต่างๆมากมาย และกลายเป็นหัวใจหลักของ AJAX แต่ XMLHttpRequest ก็ยังไม่ไช่มาตรฐานของจาวาสคริปส์ เพราะฉะนั้นถ้าหากต้องการทำ application ให้สามารถ support กับ browser เก่าๆ ได้ AJAX จึงไม่ไช่ทางเลือกที่จะนำไปใช้งาน

[nat3]

โปรดติดตามตอนต่อไป . . .
เนื่องจากมันเยอะ แปลวันละสองย่อหน้าละกานนะ

[bigaun]

ของเค้าดีจิง

[nat3]

มาแปล(ปั๊ม)ต่อและ

สิ่งที่ทำให้ AJAX พิเศษก็คือ AJAX ทำให้ฝั่ง Client (Browser) มีส่วนที่ควบคุมการทำงานพ่วงมาด้วย โดยการทำงานจะขึ้นกับเหตุการณ์ต่างๆ ที่เกิดขึ้นเช่น หน้ากำลังถูกโหลด เมาซ์คลิกที่ปุ่ม หรือ เหตุการณ์ที่เกี่ยวข้องกับเวลา ซึ่งจากการที่มานมี logic มาด้วยทำให้เกิดการแบ่งที่ชัดเจนระหว่าง ข้อมูลที่อยู่ฝั่ง server และ logic ควบคุมการทำงานของ user-interface ที่ฝั่ง client ซึ่งแตกต่างจากสมัยก่อนที่ฝั่ง server จะเป็นส่วนควบคุมทั้งสองอย่างเอง client ทำหน้าที่อ่านหน้าทั้งหน้าแล้วมาแสดงผลเท่านั้น ดังนั้น Rich web application จึงต่างจาก web application แบบดั้งเดิมที่การโหลดครั้งแรกจะเป็นเหมือน Template ที่ใช้ในการแสดงผล แต่ตัว Data จะมีการเรียกอีกครั้งเพื่อนำมาแสดงตาม Template ที่จัดไว้จาก server อีกครั้งหนึ่งในรูปแบบของ XML Document

[nat3]

ตัวอย่างการใช้งาน AJAX
- การตรวจสอบข้อมูลของ Form แบบ Real-Time : ข้อมูลเช่น รหัสสมาชิก, serial number, รหัสไปรษณีย์ สามารถตรวจสอบได้ ก่อนที่ผู้ใช้จะต้อง submit ไปยัง server
- Autocompletion : ฟอร์มที่มีค่าเฉพาะบางส่วนเช่น email ชื่อ หรือ เมือง สามารถขึ้นชื่อที่สมบูรณ์ให้อัตโนมัติ ขณะที่ user กำลังกรอกข้อมูล
- Master Details Operations : HTML page สามารถดึงรายละเอียดของสินค้ามาแสดงได้ หลังจากเลือกชื่อสินค้าจาก List
- Sophisticated User Interface Controls : ส่วนควบคุมเช่น Tree, Menus, Progress bars สามารถแสดงได้โดยไม่ต้องมีการ refresh หน้า
- Refreshing Data on the Page : HTML page สามารถดึงข้อมูลต่างๆ จาก server มาupdate ข้อมูลแบบ realtime เช่น ผลการแข่งขัน ราคาหุ้น เป็นต้น
- Server-side Notifications : HTML page สามารถแสดงเหตุการณ์ว่า server กำลังทำเหตุการณ์บางอย่างเช่น การแสดงไอคอนว่ากำลังดึงข้อมูลให้รอซักครู่ แล้ว server ก็ส่งข้อมูลใหม่มาให้ยัง client หรือการ redirect ไปยังอีกหน้านึงโดยที่มีการแสดงสัญลักษณ์ที่เคลื่อนไหวได้ ให้กับผู้ใช้ได้รู้ว่าต้องรอ

จากตัวอย่างด้านบนยังมีกรณีอื่นๆ ที่ AJAX สามารถทำได้อีก แต่การทำสิ่งเหล่านี้ก็มีผลค้างเคียงคือ
- Complexity : Server-side developer จำเป็นต้องรู้ถึงการแสดงผลทางฝั่ง Client และการให้ข้อมูลออกมาเป็นเอกสาร XML ของฝั่ง Server ซึ่งผู้พัฒนา HTML จำเป็นต้องมีความรู้ในจาวาสคริปส์ด้วย ทำให้ Framework ที่ถูกพัฒนาขึ้นใหม่มีความง่ายในการทำ Model ข้างต้นกว่าการใช้ Framework เดิมที่พัฒนาระบบ Interactive เสริมเข้าไป
- Standardization of the XMLHttpRequest Object : เนื่องจาก XMLHttpRequest ยังไม่ได้เป็นส่วนหนึ่งของมาตรฐานจาวาสคริปส์ เพราะฉนั้นพฤติกรรมต่างๆ ก็จะขึ้นอยู่กับ Browser ที่แสดงผล
- JavaScript Technology Implementations : AJAX ต้องใช้ Javascript ในการพัฒนาเยอะมาก ซึ่ง Browser แต่ละตัวก็จะมี จาวาสคริปส์ที่แตกต่างกัน โดยสามารถเปรียบเทียบความแตกต่างได้จาก http://www.quirksmode.org/
- Debugging : AJAX ยากแก่การ debug เนื่องจากการทำงานขึ้นอยู่กับทั้ง Client และ Server
- Viewable Source : เนื่องจาก Javascript สามารถดู source code ได้ง่าย ดังนั้นการออกแบบที่ไม่ดีจะทำให้เกิดปัญหาด้าน security ได้

ในปัจจุบัน Framework และ pattern ต่างๆ กำลังถูกพัฒนาอยู่โดยเน้นไปทาง one-size-fits-all framework โดยในบทความนี้จะพูดถึงว่า AJAX ทำงานอย่างไรกับ J2EE Technology เช่น Servlet, Java Server Page(JSP) software, JavaServer Faces applications, and the Java Standard Tag Libraries (JSTL)

[nat3]

The Anatomy of an AJAX Interaction
หลังจากทราบกันแล้วว่า AJAX คืออะไรคราวนี้มาดูโครงสร้างของ AJAX กัน
จากตัวอย่างด้านล่าง Web application ประกอบไปด้วย static page หรือ HTML page ที่ถูกสร้างขึ้นมาจาก JSP Technology ประกอบไปด้วย Form ซึ่งต้องการตรวจสอบความถูกต้องโดยไม่ต้องโหลดหน้า html page ขึ้นมาใหม่อีกครั้ง
ส่วนประกอบของ server-side (Servlet) ที่ชื่อว่า ValidateServlet จะเป็นส่วนที่คอยตรวจสอบความถูกต้องของฝั่ง server ดังรูปที่ 1 ที่อธิบายถึงรายละเอียดการทำงานของ AJAX Interaction ในการ Validate ข้อมูล


Figure 1: An AJAX Interaction ที่ทำการตรวจสอบข้อมูล

ขั้นตอนต่างๆ ใน ตัวอย่างที่ 1 ที่ทำให้ AJAX ทำงานมีดังนี้
1. เกิดเหตุการณ์ที่ฝั่ง Client
2. XMLHttpRequest ถูกสร้างและมีการกำหนดค่า
3. XMLHttpRequest ติดต่อไปยัง server ตามที่กำหนดค่าไว้
4. การร้องขอถูกดำเนินการโดย ValidateServlet
5. ValidateServlet คืนผลลัพธ์ในรูปของ XML Document
6. XMLHttpRequest เรีนก function callback() เพื่อนำผลลัพธ์มาประมวลผล
7. ปรับปรุงหน้า HTML โดย HTML DOM

หลังจากนี้จะกล่าวถึงแต่ละขั้นตอนอย่างละเอียด

[nat3]

1. เกิดเหตุการณ์ที่ฝั่ง client

function ในจาวาสคริปส์จะถูกเรียกใช้เมื่อเกิดเหตุการณ์ต่างๆขึ้น ซึ่งในกรณีนี้ function validate() ถูกเรียกเมื่อมีการพิมพ์ข้อความลงใน textbox โดยการกำหนด onkeyup ใน form textbox
*onkeyup จะเกิดขึ้นเมื่อมีการปล่อยนิ้วจากปุ่มบนคีย์บอร์ด

Code: Select all

<input type="text"
            size="20" 
              id="userid"
            name="id"
         onkeyup="validate();">


จาก code ฟังก์ชั่น validate จะถูกเรียกทุกครั้งที่มีการกดตัวอักษรบนคีย์บอร์ดแล้วปล่อยนิ้วออกมา

[bigaun]

อืม

[nat3]

วันนี้ฟิตเลยแปลเยอะหน่อย (จริงๆ แล้วเมื่อวานไม่ค่อยฉบาย เลยไปนอนเอาแรง แหะๆ)

2. XMLHttpRequest ถูกสร้างและกำหนดค่า

Code: Select all

var req;

function validate() {
   var idField = document.getElementById("userid");
   var url = "validate?id=" + escape(idField.value);
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("GET", url, true);
   req.onreadystatechange = callback;
   req.send(null);
}

ฟังก์ชั่น validate สร้าง XMLHttpRequest object ซึ่งขึ้นอยู่กับ browser อย่างที่เห็นจากนั้นเรียกฟังก์ชั่น open เพื่อติดต่อไปยัง server โดยฟังก์ชั่นนี้ต้องการ parameter 3 ตัวคือ
1. Request Method แบ่งเป็นสองชนิดคือ POST กับ GET
2. url ฝั่ง server ที่จะติดต่อด้วย
3. Asynchronous mode มีค่าเป็น true กับ false
รูปแบบเต็มๆก็คือ
XMLHttpRequest.open(String method, String URL, boolean asynchronous)
ซึ่งหากกำหนด asynchronous mode ให้เป็น true ต้องกำหนด call back function จาก code ตัวอย่างก็คือ req.onreadystatechange = callback สำหรับรายละเอียดจะกล่าวถึงในข้อที่ 6

[nat3]

3. XMLHttpRequest ติดต่อไปยัง server ตามที่กำหนดค่าไว้
เมื่อ function validate ทำงานจนถึงบรรทัด req.send(null) บราวเซอร์จะติดต่อไปยัง server ซึ่งในกรณีที่ method ที่ใช้เป็น GET ค่าที่ส่งไปไม่จำเป็นต้องใส่ หรือใส่ค่าเป็น null เนื่องจากค่าของข้อมูลจะถูกส่งไปพร้อมกับ url ที่กำหนดไว้ เช่นต้องการส่งค่า id เมื่อฟังก์ชั่นรันถึงบรรทัดนี้สิ่งที่เกิดขึ้นคือ browser จะไปเรียก url?id=ค่าที่กำหนดไว้

การใช้ GET method นั้นจะใช้ในกรณีที่ผลลัพธ์ที่ต้องการจาก ค่าที่ส่งไปนั้นเหมือนกัน ซึ่งหากใช้ method นี้จะมีข้อจำกัดที่เกิดขึ้นจากทั้งบราวเซอร์และ server-side ซึ่งหากการส่งข้อมูลเหล่านี้มีผลกระทบต่อ state ของฝั่ง server method ที่ใช้ในการส่งควรจะเป็น POST ซึ่งต้องมีการส่ง Content-type ใน header ของ XMLHttpRequest object ด้วยก่อนที่จะส่งข้อมูลไป ตาม code ต่อไปนี้

Code: Select all

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));

ในการส่งค่าจากฟอร์มโดยใช้จาวาสคริปส์นั้นต้องคำนึงถึงค่าที่จะถูกส่งไปด้วย โดยจาวาสคริปส์ได้กำหนดฟังก์ชั่น escape() ไว้เพื่อทำให้การส่งข้อมูลนั้นถูกต้องตาม localize ของแต่ละเครื่อง

[Inception]

ว่างๆจะอ่านต่อครับ - -* มีสาระแล้วมึนหัว

[nat3]

ไม่ต้องรีบอ่านนะ เพราะแปลได้ไม่เร็วเหมือนกัน นี่ก็ค่อยๆ แปล แหะๆ

[ivoivo_angle]

ทามไมพอเข้ามากระทู้มีสาระๆๆ ละ เวียนหัวๆ ยังไงก็มะรุ

[bigaun]

อ่านแล้วจาได้ฟามรู้