AJAX with JEE

[nat3]

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

หลังๆ นี่ชักเริ่มไร้สาระแล้วเหมือนกันแฮะ reply ต่อไปสาระต่อเดก่า

[nat3]

ขออภัยที่แปลช้าในคืนนี้ เนื่องจากมัวไปไร้สาระอยู่

4. การร้องขอถูกดำเนินการโดย ValidateServlet
Validate servlete จะถูกแม๊พเข้ากับ URL ที่ Client ร้องขอมาเพื่อนำ request ที่ได้ไปตรวจสอบว่า ID ที่ส่งมานั้นมีอยู่จริง ซึ่งการนำ ID ไปตรวจสอบนั้นก็เหมือนกับการเรียกผ่าน URL ธรรมดา โดย server จะแยก id ออกจาก URL ที่ส่งมาแล้วนำไปตรวจสอบว่า ID นั้นมีอยู่จริงหรือไม่ตามโค้ด

Code: Select all

public class ValidateServlet extends HttpServlet {
   
    private ServletContext context;
    private HashMap users = new HashMap();

    public void init(ServletConfig config) throws ServletException {
        this.context = config.getServletContext();
        users.put("greg","account data");
        users.put("duke","account data");
    }

    public void doGet(HttpServletRequest request, HttpServletResponse  response)
        throws IOException, ServletException {

        String targetId = request.getParameter("id");

        if ((targetId != null) && !users.containsKey(targetId.trim())) {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("valid");
        } else {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("invalid");
        }
    }
}

จากตัวอย่างใช้ Hashmapในการเก็บข้อมูลผู้ใช้ต่างๆ โดยสมมติให้ผู้ใช้กรอก user มาชื่อ duke

[nat3]

5. ValidateServlet คืนผลลัพธ์ในรูปของ XML Document
ชื่อผู้ใช้ duke มีอยู่ใน list และอยู่ใน Hashmap ดังนั้น ValidateServlet ก็จะสร้างเอกสาร XML โดยมี element ของข้อความ (message) ว่า valid* เพื่อส่งกลับไปยังฝั่ง client สำหรับ usecase ที่มีความซับซ้อนมากกว่านี้การสร้างเอกสาร XML อาจใช้ API ต่างเข้ามาช่วยเช่น DOM, XSTL หรือ API อื่นๆ ที่ใช้ในการสร้างเอกสารประเภทนี้

Code: Select all

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    response.getWriter().write("valid");

ผู้พัฒนาต้องระวังสองอย่างคือ
1. content-type ต้องเซทเป็น text/xml
2. Cache-Control ต้องเซทเป็น no-cache
เนื่องจาก XMLHttpRequest จะประมวลผลเฉพาะผลลัพธ์ที่เป็น text/xml และ การเซท Cache-Control เป็น no-cache เพื่อให้ browser ไม่ทำการเก็บผลลัพธ์เข้า cache เพราะ url แบบเดียวกันมีสิทธิ์ที่ response จะได้ไม่เหมือนกัน

*ในเว็บจะเขียนว่า invalid อ่ะแต่พอดีเห็นแล้วมันขัดๆ ยังไงก็ไม่รู้เพราะถ้าเจออยู่ในฐานข้อมูลมันก็น่าจะเป็น valid นี่นา ใครมีอะไรแย้งก็บอกๆ มาหน่อยละกัน

[nat3]

6. XMLHttpRequest เรีนก function callback() เพื่อนำผลลัพธ์มาประมวลผล
จากข้อก่อนหน้านั้น XMLHttpRequest ถูกกำหนดว่าให้เรียกฟังก์ชั่น callback() เมื่อ XMLHttpRequest เปลี่ยน readyState สมมุติว่าการติดต่อไปยัง ValidateServlet เรียบร้อยแล้วโดย readyState เป็น 4 และ การส่งข้อมูลของ HTTP Protocolเรียบร้อยสถานะของ HTTP เป็น 200

Code: Select all

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            // update the HTML DOM based on whether or not message is valid
        }
    }
}

บราวเซอร์จะเข้ามาจัดการในส่วนแสดงผลของเอกสาร(DOM หรือ Document Object Model) ซึ่งบราวเซอร์จำนำเอกสาร HTML ของเพจนั้นมาให้ DOM จัดการ โดยอาศัยจาวาสคริปส์เพื่อแก้ไขหลังจากที่หน้านั้นถูกโหลดเรียบร้อยแล้ว

หลังจากดึงข้อมูลจากฝั่ง server มาเรียบร้อยแล้ว จาวาสคริปส์จะเข้าไปแก้ไข DOM ของหน้า HTML โดยใช้ req.responseXML ซึ่ง req ที่เห็นก็คือ XMLHttpRequest นั่นเอง จากนั้นอาศัยการทำงานของ DOM API ในการไปยังกิ่งต่างๆของต้นไม้ที่ DOM สร้างขึ้นจากเอกสาร XML เมื่อไปยัง node ที่ต้องการแล้วก็ดึงข้อมูลออกมาในรูปแบบของ String โดยใช้คำสั่ง req.responseText ตามโค้ดด้านล่างนี้

Code: Select all

<message>
  valid
</message>

ด้านบนคือเอกสาร XML ที่ได้รับกลับมาจากการเรียก ValidateServlet ซึ่งมีข้อมูลเพียง element เดียวคือ message ประกอบด้วยข้อมูลว่า valid ในตัวอย่างที่ซับซ้อนกว่านี้ ข้อมูลจะมีมากกว่า 1 element ที่จะแสดงให้แก้ user

Code: Select all

function parseMessage() {
    var message = req.responseXML.getElementsByTagName("message")[0];
    setMessage(message.childNodes[0].nodeValue);
}

ฟังก์ชั่น parseMessage ทำการประมวลผลเอกสาร XML ที่ได้รับมาจาก ValidateServlet หลังจากนั้นเรียกฟังก์ชั่น setMessage เพื่อแก้ไข HTML DOM ต่อไป

[nat3]

7. ปรับปรุงหน้า HTML โดย HTML DOM
จาวาสคริปส์สามารถไปยังโหนดต่างๆ ของหน้า HTML ได้หลายทางโดยใช้ API ต่างๆ แต่วิธีที่แนะนำคือใช้ document.getElementById("userIdMessage") โดย "userIdMessage" คือ ID ที่กำหนดมากับ element แต่ละ element ของ HTML โค้ด (เช่น <p id="test">hello, world</p> เวลาใช้จาวาสคริปส์เพื่อเข้ามายังโหนดนี้ก็ document.getElementById("test") ) โดยจาวาคริปส์สามารถทำการแก้ไข สไตล์ ข้อมูล หรือแม้กระทั่งเพิ่ม ลย แก้ไข child element ต่างๆ ของโหนดนั้นๆ ได้ (ที่จริงมันก็คือความสามารถของ DOM อะแหละ)

วิธีทั่วไปที่ใช้ในการแก้ไขเนื้อหาของ element ก็คือการใช้ innerHTML ในการเซทเนื้อหาใน element ตามตัวอย่าง

Code: Select all

<script type="text/javascript">
function setMessage(message) {
    mdiv = document.getElementById("userIdMessage");
    if (message == "invalid") {
       mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
    } else {
       mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";
    }
}
</script>
<body>
<div id="userIdMessage"></div>
</body>

จากโค้ดส่วนของ HTML ที่เกี่ยวข้องเมื่อมีการเรียกใช้ function จะมีการแก้ไขและแสดงผลทันที และถ้ามี element เช่น <images> หรือ <iframe> อยู่ด้วยจะมีการดึงข้อมูลและแสดงผลใหม่อีกครั้ง

การแก้ไขโค้ดตามตัวอย่างด้านบนนี้มีผลข้างเคียงอย่างหนึ่งที่ตามมานั่นคือ code ทุกอย่างใน HTML จะถูกมองว่าเป็น string ในจาวาสคริปส์การเข้าไปแก้ไขตรงๆ นั้นจะทำให้การตรวจสอบโค้ดภายหลังทำได้ลำบากขึ้น(อันนี้เจอมากับตัวแฮะ) ดังนั้นการแก้ไขโค้ดแบบนี้จึงควรคิดก่อนที่จะใช้งานโดยเฉพาะการเพิ่มและแก้ไข (ที่จริงพอแก้ไขแล้ว ลองกดดู source จาก browser ดูมันไม่โชว์อ่ะ มานโชว์ของเก่า มึนตึ๊บเลยทีนี้)

สำหรับการแก้ไขในอีกรูปแบบหนึ่งก็คือการเพิ่ม element และจัดมันให้เป็น child node ของ element เป้าหมายตามโค้ดด้านล่าง

Code: Select all

<script type="text/javascript">
function setMessage(message) {
     var userMessageElement = document.getElementById("userIdMessage");      var messageText;
     if (message == "invalid") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
     } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
     }
     var messageBody = document.createTextNode(messageText);
     // if the messageBody element has been created simple replace it otherwise
     // append the new element
     if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody,  userMessageElement.childNodes[0]);
     } else {
         userMessageElement.appendChild(messageBody);
     }
}
</script>
<body>
<div id="userIdMessage"></div>
</body>

จากโค้ดตัวอย่างด้านบนเป็นการใช้จาวาสคริปส์ในการแก้ไขส่วนต่างๆ ของ HTML ซึ่งในแต่ละบราวเซอร์ก็จะมีข้อแตกต่างกันอยู่บ้าง(เล็กน้อย - มากที่สุด) ดังนั้นการใช้โค้ดต่างๆ พวกนี้จึงต้องระวังให้ดี

[nat3]

เป็นกระทู้สาระที่มี reply มากที่สุดเท่าที่เคยทำมาเลยแฮะ เนื่องจากนโยบายปั๊มกระทู้ที่น้องโบว์นำมา สำหรับเนื้อหาต่อจากนี้ ไว้คืนต่อไปค่อยมาแปลต่อ ตอนนี้ก็กะลังมองหาเรื่องต่อไปและ

[nat3]

ได้หัวข้อถัดไปและ http://www-mice.cs.ucl.ac.uk/multimedia ... eview.html
ใครจะเข้าไปอ่านไปแปลก่อนก็ได้นะ แหะๆ พอดีเป็นคนที่สนใจด้านเนทเวิร์กเลยจะมาทางนี้เยอะหน่อย (แต่ช่วงนี้ไม่ค่อยได้แตะมาทางด้านนี้เลยแฮะ ฝีมือชักตก)

[bigaun]

มี step by step ที่ใช้ได้เลยมั่งป่ะ อยากได้อยากได้

[nat3]

The Java BluePrints Solutions Catalog
The Java BluePrints Solutions Catalogได้เก็บรวบรวมตัวอย่างและแม่แบบของ AJAX และ JEE ต่างๆไว้ สำหรับสร้างเป็น JEE application ซึ่งแต่ละวิธีการจะประกอบด้วยปัญหาตัวอย่าง วิธีการแก้ปัญหา เอกสารโครงสร้างการออกแบบ และ source code ที่สามารถนำไปใช้งานได้ เพื่อนำไปใช้ reuse ใน application ที่คุณจะสร้างขึ้นมา โดยรายการวิธีแก้ปัญหาต่างๆ ที่ใช้ AJAX เข้ามาช่วยมีดังนี้

Autocomplete
Autocomplete คือการแสดงรายการที่มีอยู่จริงเมื่อผู้ใช้กรอกข้อมูลบางอย่างลงไป หากผู้ใช้เลือกชื่อจากรายการเหล่านั้นจะมั่นใจได้ว่าข้อมูลนั้นมีอยู่จริง

พิจารณาจากโปรแกรมค้นหาชื่อขององค์กรณ์ขนาดใหญ่แห่งหนึ่ง รายละเอียดของแต่ละคนสามารถค้นหาได้จากการกรอกตัวอักษรของชื่อหรือนามสกุลเพียงไม่กี่ตัว จากนั้นผู้ใช้ก็เลือกชื่อจากรายการที่แสดงออกมาโดยที่มั่นใจได้ว่าไม่ได้พิมพ์ชื่อที่ต้องการหานั้นผิด


Figure 2: Autocompletion of a Name

[nat3]

ตัวอย่าง auto complete ที่เห็นจริงๆ ก็ google suggest นี่แหละ ลองเล่นตามลิงค์ด้านล่างดู
http://www.google.com/webhp?complete=1&hl=en

แก้ไขเพิ่ม
เห้ยลองพิมพ์คำว่าเว็บ แล้วมานขึ้นเว็บโป๊มาให้เลือกอันแรกเลยง่ะ!!!

[nat3]

Progress Bar
ในงานที่ server ต้องประมวลผลโดยใช้ระยะเวลานานมากกว่า HTTP Interaction time (เวลาที่ใช้ส่งข้อมูลกลับมายัง Client อ่ะ คือ ปกติ ถ้า web application อย่าง php ทำงานเสร็จบรรทัดนึง ก็จะส่งผลลัพธ์กลับมาเลย ทำให้ข้อมูลค่อยๆ ไหลมาโชว์ ถึงจะยังโหลดไม่เสร็จก็เหอะ แต่ถ้า การประมวลผลตรงนี้นาน มันก็จะไม่ส่งมาซักที ผู้ใช้ก็จะเห็นแต่หน้าขาวๆอะ ไอ้เทคนิคตรงนี้รู้สึกมีการเอาไปทำเป็นโปรแกรมแชทด้วยแฮะ) หากผู้ใช้ทนรอไม่ไหวแล้วดันกดปิดไป session ของการทำงานก็จะหายไปทันที ดังนั้ง หากมีอะไรให้ผู้ใช้เห็นซะหน่อยว่า server ทำงานไปถึงไหนแล้ว และต้องรออีกเท่าไหร่ก็จะทำให้ผู้ใช้สามารถคาดการได้ถูกว่าควรรอ หรือควรปิดไปเลยดี ดังตัวอย่างด้านล่าง

Figure 3: Progress Bar

สำหรับ web app สมัยก่อน หากจะทำ progress bar แบบนี้วิธีที่จะทำให้ตัวเลขเลื่อนก็คือการ refresh หน้า นั่นหมายความว่า server ต้องเป็นตัวทำทั้งหมด (มันก็เหมือนเปลี่ยน state สินะ) แต่เมื่อมี AJAX มันก็ไม่ต้อง refresh เลยเหมือนโปรแกรมบน desktop ที่แถบแสดง % ตอนโหลดไรซักอย่างมันไม่มี repaint ภาพใหม่อ่ะ

[nat3]

Refreshing Data
อันนี้เอาไปเล่นแล้วท่าทางจะสนุกสนานมาก คือเมื่อเราโหลดหน้าเสร็จแล้ว อย่างเว็บบอร์ดนี้ก็ได้ หากมีแสดงเค้าเตอร์คนตอบกระทู้มากสุดอยู่ 10 คนแรกบนหัวบอร์ดพร้อมกับตัวเลข couter บอกว่าโพสท์(ปั๊ม)ไปแล้วกี่กระทู้ ขณะที่ผู้ใช้อ่านกระทู้นึงอยู่แล้วตัดสินใจว่า เอเราต้องการเป็นหนึ่งในสิบ แล้วตอนนี้อันดับ 1 - 10 มานกี่กระทู้แล้วหว่า เมื่อมองไปด้านบน หากอันดับ 1 - 10 มีการโพสท์เพิ่มตัวเลขก็จะแสดงเป็นเลขล่าสุดทันที ทำให้ผู้ใช้มั่นใจว่าข้อมูลนั้นใหม่สดเสมอ และคิดได้ว่า โพสท์ยังไงก็คงตามไม่ทันแล้ว หรือหากมีการเปลี่ยนอันดับก็จะเปลี่ยนให้เห็นกันแบบจะๆ ไปเลย โดยที่เราไม่ต้องกด refresh หน้าหรือเปลี่ยนหัวข้อกระทู้แล้วถึงเห็นสิ่งที่เปลี่ยนไป


Figure 4: Server-side Counter Shows Refreshing Data

ปล. ช่วงหลังมันเป็นตัวอย่างง่ะ อาจแปลไม่เหมือนกับในเว็บต้นฉบับอ่ะนะ

[nat3]

Real-Time Validation
อันนี้เหมือนตัวอย่างด้านบนนู้น ที่ทำๆ กันนั่นคือตรวจสอบข้อมูลแบบ realtime หากข้อมูลผิดจะได้ไม่ต้องเสียเวลาในการโหลดหน้า HTML มาใหม่ทั้งหน้า ดูภาพตัวอย่างไปเลยละกัน จะแสดงให้เห็นว่าถ้ากรอกผิดกับกรอกถูกผลลัพธ์จะเป็นยังไง


Figure 5: มึงกรอกชื่อซ้ำโว้ย กรอกใหม่ๆ


Figure 6: ชื่อนี้ลาวใช้ได้ โอเค ผ่าน

เข้าใจแล้วไช่มะ หมดและตัวอย่าง สำหรับโค้ดสำเร็จรูปต่างๆ ก็จาวาบลูพริ้นขอรับ

[nat3]

Final Thoughts (แปลว่าสรุปปะเนี๊ยะ)
จากด้านบนที่ผ่านมาเยอะๆ หลาย reply จะเห็นว่า AJAX สามารถแก้ปัญหาต่างๆ ได้หลายเรื่อง โดยเฉพาะหากนำไปรวมกับ JEE แล้วจะทำให้การพัฒนาเป็นแบบแผน และนำไปวางบนระบบต่างๆเพื่อให้ทำสิ่งต่างๆ คือ HTTP processing, databases, web services, XML processing, and business objects ซึ่งหากเราสามารถเรียนรู้และเข้าใจโมเดลการทำงานแบบนี้ จะทำให้ web application สามารถสื่อสารกับผู้ใช้ได้ดีขึ้น และสร้างประสบการณ์ที่ดีกับผู้ใช้มากขึ้น

แต่ว่าการใช้ AJAX ก็นำไปสู่ปัญหาที่ว่าผู้ใช้ต้องใช้ Browser ตัวล่าสุด และผู้พัฒนายังต้องมีความรู้เกี่ยวกับ Javascript และ CSS(Cascading Style Sheet ไว้แต่งเว็บให้สวยงาม) พอสมควรด้วย ซึ่งเมื่อใดก็ตามที่ Framework ต่างๆ พัฒนาขึ้นมาการทำสิ่งต่างๆเหล่านี้อาจจะง่ายขึ้น (เช่น GWT ยังไม่เคยใช้เลยง่ะ ไม่รู้ง่ายจริงป่าว แต่ spec คร่าวที่ได้ยินมาคือ เขียนจาวา แล้วมานแปลงเป็นจาวาสคริปส์ให้ )

สิ่งต่างๆ เหล่านี้ทำให้ web application น่าสนใจมากยิ่งขึ้น จิงมั้ย? (เหอะๆ แปลบรรทัดสุดท้ายอ่ะ ถ้าหากผิดขออภัย)

แหล่งข้อมูลเพิ่มเติม
* The Java Blueprints Solutions Catalog contains code examples and documentation on AJAX.
* The Apple Developer connection has some good documentation on the XMLHttpRequestobject.
* The JavaScript technology DOM bindings defined by the W3C.
* A great reference for JavaScript technology and CSS support in browsers may be found at QuirksMode.
* Definition of AJAXby Jesse James Garrett.

[nat3]

เกี่ยวกับผู้เขียน
Greg Murray เป็นวิศวกรของบริษัท sun microsystem เป็นหัวหน้าทีม the servlet specification และสมาชิกดั้งเดิมของ the BluePrints team โดยเน้นไปที่ web tier.
เขายังเป็นผู้แต่งร่วมในหนังสือเรื่อง Designing Enterprise Applications With the Java 2 Platform, Enterprise Edition and Designing Web Services With the J2EE 1.4 Platform (Addison-Wesley).

หมดและคร๊าบ แปลทั้งบทความแล้ว