1. APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก http://pecl.php.net/package/apc ครับ
2. Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ
3. Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ กำหนด enctypemultipart/form-data ให้เรียบร้อย และ method เป็น POST ให้เรียบร้อยเช่นกันครับ

สำหรับไฟล์ที่จำเป็นในการทำ Upload Progress ด้วยวิธีนี้ ก็จะมี 3 ส่วนเช่นกัน ง่าย ๆ ตามนี้เลยครับ

1. Upload Form จะเป็นหน้า Page ที่ User เห็นครับ เอาไว้สำหรับให้ User Browse File และกด Submit ครับ
2. Upload จะเป็นหน้า Page ที่เอาไว้สำหรับ Upload เลยครับ ในหน้านี้ ให้ทำการอัพโหลดเหมือนปกติครับ คือมีการ move_uploaded_file() อะไรเหมือนปกติืืทุกอย่างครับ
3. Progress จะเป็นส่วนที่เอาไว้สำหรับให้หน้า Form Upload มา poll ค่า status ของการ Upload ครับ ส่วนนี้แหละครับ ที่จะเป็นตัว return กลับไปว่า อัพโหลดอะไรได้ยังไงเท่าไหร่แล้วครับ

Upload Form

ทีนี้ เมื่อเรามีทุกอย่างพร้อม เราก็จะทำการกำหนด key สำหรับ Upload session เพื่อให้การ Poll ถามข้อมูลนั้นทำได้ถูกต้องครับ การกำหนดเราทำได้โดยการใส่ input hidden ที่ชื่อ APC_UPLOAD_PROGRESS ให้มีค่าเป็น key ที่เราต้องการครับ ผมสมมติให้มีค่าเป็น “abcd” ดังนั้น form ที่เราได้ควรจะมีหน้าตาประมาณแบบนี้ครับ (ชื่อ APC_UPLOAD_PROGRESS เราสามารถเปลี่ยนได้ใน php.ini ครับ)

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcd">
    <input name="upfile" type="file"></span>
    <input type="submit" value="Upload">
</form>

Upload

ในส่วนนี้ผมไม่พูดถึงนะครับ ทำการอัพโหลดไฟล์ตามปกติเลยครับ ในกรณีที่ไฟล์ใหญ่มาก อย่าลืม set ให้ไม่ต้องมี timeout ด้วย function set_time_limit(0) ด้วยนะครับ

Progress

สำหรับ Progress ไฟล์นั้น จะมีหน้าตาประมาณนี้ครับ

<?php
header("content-type:application/json");
$stat = apc_fetch('upload_abcd');
if ($stat)
{
    if (!isset($stat["total"])) $stat["total"] = 0;
    if (!isset($stat["current"])) $stat["current"] = 0;
    if (!isset($stat["rate"])) $stat["rate"] = 0;
    if (!isset($stat["cancel_upload"])) $stat["cancel_upload"] = 0;
    if (!isset($stat["done"])) $stat["done"] = 0;
    f (!isset($stat["filename"])) $stat["filename"] = "";
    printf("[%0d,%0d,%0d,%0d,%0d,\"%s\"]",
    $stat["total"] ,
    $stat["current"] ,
    $stat["rate"] ,
    $stat["cancel_upload"] ,
    $stat["done"],
    addslashes($stat["filename"]));
}
else
{
    echo "null";
}
?>

สิ่งที่เราต้องทำคือ ทำการ poll ข้อมูลการอัพโหลดของ key “abcd” จาก server เราก็ทำได้โดยเรียก function apc_fetch และกำหนด parameter เป็น string ขึ้นต้นด้วย “upload_” และตามด้วย key ของเรา คือ “abcd”

ค่าที่ return มาจาก apc_fetch จะได้เป็น associative array โดยมี key ที่เราจะเอามาใช้งานคือ

• total เป็นขนาดไฟล์
• current เป็นขนาดไฟล์ที่อัพโหลดได้แล้ว
• rate คือความเร็วในการอัพโหลดครับ
• filename เป็นชื่อไฟล์ในเครื่องเราครับ (เช่น C:\Download\file.txt)

คราวนี้ เราก็แค่ใช้ ajax มา poll ค่าเหล่านี้ออกไปแสดงเท่านั้นเองครับ ทีนี้ต้องพึ่งฝีมือ dhtml กับ graphic ของคุณเองแล้วล่ะครับ ว่าจะทำ progress bar ออกมาได้สวยแค่ไหน

บทความนี้ ผมไม่มี LIVE DEMO แต่มีตัวอย่างให้ลองดาวน์โหลดไปทดสอบกันได้ครับ ดาวน์โหลด กับเว็บที่ผมทำให้เอาไปใช้งานจริงครับ แวะลองไปทดสอบและใช้บริการกันได้ที่ http://www.zidoupload.com ครับ

น่าตื่นเต้นไม่น้อยเลยทีเดียว ถ้าทำแบบนั้นได้จริง ๆ เมื่อมีการเปลี่ยนแปลงของข้อมูลบนเว็บเฺซิร์ฟเวอร์ เซิร์ฟเวอร์ก็จะทำการส่งข้อมูลมาให้เว็บบราวเซอร์โดยอัตโนมัติ เหตุการณ์แบบนี้ ในปัจจุบันนี้ยังทำไม่ได้ครับ ด้วยสาเหตุคือ โปรโตคอล HTTP มันเป็น Stateless Connection ครับ นั่นหมายถึง การเล่นเว็บ เมื่อเว็บบราวเซอร์ได้ข้อมูลจากเว็บเซิร์ฟเวอร์กลับมาแล้วการเชื่อมต่อ (Connection) จะถูกปิดทันที ซึ่งต่างจากโปรแกรมประเภท IRC ซึ่งเป็น Stateful นั่นหมายถึงเมื่อเกิด Connection แล้ว Connection นั้นจะเปิดค้างไว้จนกว่าจะมีการสั่งให้ปิด Connection แต่ัยังไงก็ตามเหตุการณ์ที่คล้ายคลึงกันนี้ยังสามารถทำได้ครับ

ผมยกตัวอย่างกรณีของหน้าการแสดงผลการสนทนาระหว่างคนกลุ่มหนึ่งผ่านเว็บ (ไม่ว่าจะเรียกว่าอะไรก็ตาม Chatbox, Shoutbox หรือชื่ออื่น ๆ) กระบวนการอย่างหนึ่งที่เกิดขึ้นคือการ Polling เพื่อให้ดู Real-Time ผมตั้งระยะห่างระหว่างการ Poll แต่ละครั้งไว้ที่ 5 วินาที แสดงว่า ใน 1 นาที จะเกิดการ Poll 12 ครั้ง โดยที่ไม่สนใจว่าจะได้อะไรกลับมาบ้าง จะมีใครคุยกันหรือไม่ นี่คือเหตุการณ์สำหรับผู้ใช้ 1 คนนะครับ ถ้ามีคนเข้ามาคุย 50 คน ก็ 600 Poll ใน 1 นาที รู้สึกเยอะหรือยังครับ มันเป็นเหตุที่ทำให้เว็บเซิร์ฟเวอร์ทำงานหนักโดยไม่ได้ Throughput (งานในช่วงเวลาหนึ่ง ๆ) ที่เหมาะสมครับ

ได้เวลาเข้าเรื่อง Comet แล้วครับ

Comet จะเป็นเทคนิคที่ทำให้เว็บเซิร์ฟเวอร์สามารถส่งข้อมูลกลับมาให้เว็บบราวเซอร์ได้ โดยเทคนิคแล้ว จะแบ่งได้เป็น 2 วิธีหลัก ๆ คือ การทำ Streaming และการทำ Long Polling

การทำ Streaming

คือ การที่ให้ Server สร้าง Connection ไปยังเว็บเซิร์ฟเวอร์ค้างไว้ โดยที่ไม่ปิด เมื่อเว็บเซิร์ฟเวอร์เกิดเหตุการณ์อะไรขึ้น ก็จะส่งกลับมาให้เว็บบราวเซอร์ทำงานได้ทันที เทคนิคง่าย ๆ ของการทำแบบ Streaming คือการทำ IFRAME ซ่อนไว้ โดยที่ใน IFRAME นั้นจะเรียกไปยังหน้าเว็บหน้าหนึ่ง ที่ไม่มีการกำหนด Timeout ไว้ เมื่อเกิด Event อะไรก็ตามที่เว็บเซิร์ฟเวอร์ เว็บเซิร์ฟเวอร์ก็เพียงส่ง script กลับมาให้ใน IFRAME และเนื่องจากมันเป็น script เมื่อได้รับกลับมาแล้วก็จะถูกแปล และประมวลผลทันที (interprete)

การทำ Long Polling

วิธีนี้ ผมเคยได้ยินครั้งแรกตอนที่หัดเขียน Jabber ในชื่อของ HTTP Binding วิธีนี้มีหลักการง่าย ๆ ว่า เพิ่มระยะเวลา Timeout ของ Request Connection ออกไปให้นานที่สุด เมื่อเกิด Event ให้เว็บเซิร์ฟเวอร์ส่งข้อมูลกลับมาที่ Connection ที่เปิดไว้นั้น และทำการปิดทันทีตามลักษณะของ Stateless Connection เมื่อเว็บบราวเซอร์ได้รับ Event กลับมา ก็ให้ทำการสร้าง Connection ใหม่ขึ้นมาอีกทันที วิธีนี้ก็เหมือนกับวิธีการ Poll เพียงแค่เรายืดเวลา Timeout ในการ Poll แต่ละครั้งออกไปให้มากขึ้น

การทำ Long Polling ทำได้หลายวิธี ไม่ว่าจะเป็นการใช้ Ajax, XMLHTTPRequest หรือการใช้ Script Tag Long Polling คุณสามารถอ่านเพิ่มเติมได้จากแหล่งอ้างอิงท้ายบทความครับ

บทสรุป

ด้วยความเห็นส่วนตัวแล้ว ผมสนใจในส่วนของการทำ Long Polling มากกว่า เพราะความง่ายในการพัฒนา ดูแล้วจะไม่ซับซ้อนมากเหมือนการทำ Streaming หรือใครมีความคิดเห็นอย่างอื่นก็แลกเปลี่ยนกันได้ครับ

แหล่งอ้างอิง

• http://en.wikipedia.org/wiki/Comet_(programming)
• http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications
• http://cometdaily.com/

องค์ประกอบของ Gears

Gears ประกอบด้วยส่วนประกอบต่าง ๆ ดังนี้

1. Database Module (ใช้ SQLite) เพื่อใช้เก็บข้อมูลต่าง ๆ ของเว็บไว้ในเครื่องของเรา
2. WorkerPool Module ใช้สำหรับการรัน JavaScript ใน Background
3. LocalServer Module ใช้สำหรับการเรียกใช้ไฟล์ต่าง ๆ ไม่ว่าจะเป็นภาพ หรือข้อมูลอื่น ๆ โดยไม่จำเป็นต้องมีการต่ออินเตอร์เน็ต (Offline Data) โดย LocalServer จะทำการ Cache ข้อมูลเหล่านี้ไว้บนเครื่อง และให้บริการเมื่อมีการร้องขอ
4. Desktop Module ใช้เพื่อให้เว็บที่ใช้ Gears สามารถใช้งานคำสั่งที่เกี่ยวกับ Desktop ได้ เช่น การสร้าง Shortcut
5. Geolocation Module ใช้สำหรับบอกตำแหน่งที่อยู่ของผู้ใช้งานเว็บที่ใช้ Gears ณ ขณะนั้น

การทำงานของ Gears

ตามที่ผมเคยอ้างไว้ในบทความ Ajax? คืออะไรกันหว่า? [http://blog.chonla.com/?p=8] ว่า เว็บ 1 หน้า จะแยกเป็น 3 ส่วน คือ Layout (Application UI), Data, และ Script ส่วนที่เป็น Data ที่แยกออกมานี้ เราเรียกว่า Data Layer

โดยปกติเว็บทั่ว ๆ ไป จะไม่มีการแยก Data Layer ออกมาจากส่วน Layout แต่จะเขียนปนกัน

การเชื่อมต่อแบบไม่มี Data Layer

การที่จะเก็บ Data ไว้ในเครื่องเราได้นั้น เราจำเป็นต้องแยก Data Layer ออกจาก Layout ก่อน เราเรียกขั้นตอนนี้ว่า Data Isolation เมื่อเรามองถึงเว็บที่มีการเรียกใช้ Ajax ในการแลกเปลี่ยนเฉพาะ Data ระหว่างเว็บบราวเซอร์ และเว็บเซิร์ฟเวอร์ เราสามารถพิจารณาได้ว่า Ajax นี่เองที่ทำหน้าที่เป็น Data Layer ของเว็บนั้น ๆ

การเชื่อมต่อแบบมี Data Layer

และตรงนี้เองที่ Gears จะเข้ามามีบทบาท ลองพิจารณาดูนะครับว่า ถ้าเราเอา Module อะไรซักอย่าง ไปคั่นระหว่างส่วนเว็บบราวเซอร์กับส่วน Data Layer เพื่อใช้ในตัดสินใจว่าจะดึงข้อมูลที่เราเก็บไว้จากในเครื่องของเรา หรือจะดึงข้อมูลใหม่จากเว็บเซิร์ฟเวอร์แทน หรือจะทำทั้ง 2 อย่างดี เราเรียก Module ตัวนี้ว่า Data Switch เราสามารถมองได้ว่า Data Switch นี่ก็ทำตัวเหมือนเป็น Data Layer เหมือนกันนั่นเอง

เพิ่ม Data Switch เข้าไป

Data Switch จะทำหน้าที่ทั้งบันทึกข้่อมูลที่ต้องการลงสู่เครื่องของเรา และดึงข้อมูลที่เราต้องการออกมา เมื่อเราเชื่อมภาพการทำงานของ Data Switch เข้าไปด้วย เราจะเห็นได้ว่า นี่แหละครับ คอนเซ์ปต์การทำงานของ Gears

ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module

ตัว Data Switch เองยังสามารถที่จะกำหนดให้ทำการ Synchronize ข้อมูลกับ Server เป็นระยะได้อีกด้วย

Gears เมื่อไม่มี Data Layer

จะทำยังไง ถ้าเราไม่ได้ทำ Data Layer? ยังทำได้ครับ แต่ก็ยุ่งยากขึ้นมาหน่อย เราจะต้องเขียน Code ในการดักขั้นตอนของการรับส่งข้อมูลไปยัง Server เช่น ตอน Submit Form แต่การทำแบบนี้ ทำให้เราต้องทำงานหนักขึ้นอีกเยอะ สู้เอาเวลามาแยก Data Layer ออกมาน่าจะง่ายกว่าหรือเปล่า?

เมื่อไหร่ที่จะควรหรือไม่ควรทำ Offline Data

• เมื่อข้อมูลเป็นข้อมูลชั่วคราว เช่น ข้อมูลดัชนีหุ้น แบบนี้ก็ไม่ควรทำ
• ข้อมูลบางอย่างจะมันก็ควรจะเป็น online มากกว่าที่จะเป็น offline เช่น ข้อความพูดคุยในโปรแกรม Chat แบบนี้ก็ไม่ควรทำเหมือนกัน
• ข้อมูลที่มีการเรียกใช้บ่อย ๆ แบบนี้ควรทำอย่างยิ่ง
• ข้อมูลที่ต้องมีการประมวลผล หรือใช้ข้อมูลมากมายมหาศาลเกินกว่าเครื่องผู้ใช้จะรับไหวได้ แบบนี้ก็ไม่ควรทำ

การ Synchronize Data

จะเกิดขึ้น เพราะสาเหตุดังนี้

• มีการเปลี่ยนแปลงข้อมูลในขณะที่ Offline
• มีการใช้งานข้อมูลร่วมกันกับคนอื่น (คนอื่นอาจจะเปลี่ยนแปลงข้อมูลนั้นได้)
• มีการเรียกใช้งานข้อมูลจาก External Resource เช่นการเรียกใช้งาน Feed

การทำให้ข้อมูลบนเครื่อง เหมือนกับข้อมูลบนเว็บเซิร์ฟเวอร์ เราเรียกว่าการทำ Synchronization เราสามารถทำได้ 2 วิธีคือ Manual Sync และ Background Sync

Manual Sync

จะทำก็ต่อเมื่อ มีข้อมูลที่ต้อง Sync ไม่มากก และผู้ใช้้ต้องการข้อมูลที่ใหม่ล่าสุดก่อนที่จะทำการเปลี่ยนไปใช้ข้อมูลแบบ Offline แต่ปัญหาของการทำ Manual Sync ก็มี เช่น เราไม่สามารถรู้ได้ว่า Network ในขณะนั้นหลุดเมื่อไหร่ เพราะผู้ใช้อาจจะอยู่ในสถานที่ที่ Network ไม่เสถียร เช่นบนรถ เป็นต้น หรือ User อาจจะลืม Sync ก่อนที่จะเข้าสู่ Offline ก็ได้

Background Sync

วิธีนี้จะมีข้อดีคือ ข้อมูลจะอัพเดทเสมอ และสามารถทำได้แม้เน็ตจะไม่เร็ว ข้อเสียคือ ถ้าไม่ได้ใช้ WorkerPool (ถ้าจำไม่ได้ว่าคืออะไร ให้ย้อนกลับไปอ่านข้างต้น) มันจะกิน resource ปริมาณมาก อาจจะทำให้เน็ตช้าได้

Gears ภาพรวม

ตัวอย่างเว็บที่ใช้ Gears

Google (Docs, Reader, Picasa, YouTube), MySpace, WordPress 2.6

ตัวอย่าง Gears Application

• http://code.google.com/apis/gears/sample.html

บทสรุป

ตามความเห็นส่วนตัวแล้ว Gears ถือว่าเป็นเทคโนโลยีที่น่าสนใจตัวหนึ่ง ยิ่งผนวกเข้ากับ DHTML ที่นับวันยิ่งหวือหวาได้ใจด้วยแล้ว คงเอาชนะใจ Developer หลาย ๆ คนได้ไม่ยาก แต่สำหรับในเชิงการพัฒนาเพื่อธุรกิจแล้ว อาจจะทำได้ยาก เพราะความไม่แน่นอนของพฤติกรรมของผู้ใช้ อาจจะเป็นปัจจัยหลักในการตัดสินใจนำมาใช้สำหรับผู้บริหารได้

แหล่งอ้างอิง

• http://code.google.com/apis/gears/architecture.html
• http://en.wikipedia.org/wiki/Gears_(software)

MIME ย่อมาจาก Multipurpose Internet Mail Extension ใช้สำหรับบ่งบอกชนิดของไฟล์สำหรับการรับส่งกันใน Internet เช่น ไฟล์ .txt ธรรมดา จะมี MIME type เป็น “text/plain” ส่วนไฟล์ html ก็จะเป็น “text/html” ส่วนภาพ gif ก็จะเป็น “image/gif” เป็นต้น

ทำไมเราต้องสนใจชนิดของไฟล์พวกนี้ด้วยล่ะ ด้วยเหตุผลที่ว่า สคริปที่เป็น server-sided script อย่างที่ผมอ้างถึงข้างต้น มันสามารถเปลี่ยนชนิดของไฟล์ที่ส่งกลับมาได้น่ะสิครับ เช่น หน้า php ที่ส่งเป็นภาพกลับมาแทนที่จะเป็น html ก็เพราะว่าเค้ามีการส่ง MIME Type ของภาพกลับมาใน header ด้วยครับ

อย่างที่ผมได้บอกตั้งแต่แรกแล้วว่าปกติแล้ว server-sided script โดยปกติแล้วจะส่ง type เป็น html กลับมาให้ แต่ตัว JSON เองนั้น อย่างที่รู้กันอยู่ว่ามันคือ JavaScript (สังเกตจากชื่อย่อก็ได้ครับ JavaScript Object Notation) จะมากำหนดให้เป็น html ก็กระไรอยู่ การใช้งาน JSON จึงควรกำหนด MIME Type ให้มันอย่างถูกต้องไปเลยครับ

เราสามารถกำหนด MIME Type ให้กับ JSON ได้ 2 ชนิด คือ “text/javascript” หรือ “application/json” ครับ ซึ่งแบบหลังจะเป็นที่นิยมมากกว่า

สำหรับคนที่เคยมีประสบการณ์กับ JSON บน jQuery นั้น ถ้าไม่เคยกำหนด MIME Type ให้กับ JSON โดยปล่อยให้มันเป็น “text/html” ธรรมดากลับมา คงจะเคยเจอเหตุการณ์ที่ jQuery สามารถดึงค่า JSON มาใช้ได้บ้างไม่ได้บ้างแหละครับ

และในเมื่อมันเป็นความไม่แน่นอนที่ไม่มีใครอยากให้เกิดขึ้่น เราก็แค่เพิ่ม code เข้าไปเพื่อให้มันกลายเป็น JSON จริง ๆ น่าจะง่ายกว่า

คำสั่งใน php ก็ง่ายแสนง่ายครับ แค่บรรทัดเดียวว่า…

header("content-type:application/json");

เท่านี้เองครับ สิ่งที่ return กลับไปให้บราวเซอร์ก็จะกลายเป็น JSON ในบัดดล ว่าแล้วก็ไปดู LIVE DEMO กันเลย

ล.ป. (ลืมไป) ตัวอย่างใน LIVE DEMO บางทีอาจจะได้ค่ากลับมาเป็น JSON เสมอก็ได้ อย่างที่บอกแหละครับ ว่ามันไม่แน่ไม่นอน

หมายเหตุ

server-sided script หมายถึง script ต่าง ๆ ที่มีการรันที่ server แล้วส่งกลับมาให้กับ client เช่น php, asp, jsp, perl เป็นต้น
client-sided script หมายถึง script ต่าง ๆ ที่มีการรันที่ตัว client เอง เช่น Javascript, VBScript เป็นต้น

คำว่า Same Origin ในที่นี้มีความหมายถึง Domain name จะต้องมี Domain name เดียวกัน (Subdomain ก็ต้องเหมือนกัน) และ Port จะต้องเป็น Port เดียวกัน เช่น

http://www.chonla.com/dir1 กับ http://www.chonla.com/dir2 ถือว่าเป็น Same Origin แต่ http://www.chonla.com/dir1 กับ http://blog.chonla.com/dir1 ถือว่าเป็นคนละ Origin กัน รวมถึง http://www.chonla.com/dir1 กับ http://www.chonla.com:8080/dir1 ก็ถือว่าเป็นคนละ Origin กันด้วย

โดยปกติแล้วใน IE จะมีการกำหนดค่า Security สำหรับการ Access data ที่อยู่คนละ Domain ให้เป็น Disabled ดูได้จากการเปิดหน้าจอ Internet Option และไปที่ Security และคลิกที่ Custom Level จะมีหน้าต่างการตั้งค่า Security ขึ้นมา เลื่อนไปจนถึงหัวข้อ Access data sources across domains จะเห็นว่ามันจะกำหนดไว้เป็น Disable (ถ้าใครเป็น Enable อยู่ก็แสดงว่าเครื่องของท่าน Security ต่ำกว่าที่ควรจะเป็นแล้วล่ะครับ)

Cross-Domain data access setting in IE

ในเมื่อเอาด้วยเล่ห์ไม่ได้ก็ต้องเอาด้วยกล วิธีการแก้ไขที่ผมเลือกใช้อยู่ตอนนี้คือการทำ Proxy

Proxy ในที่นี้จะทำหน้าที่เป็น Buffer ในการดึงข้อมูลจากเว็บต่าง ๆ มาให้ เพื่อให้มาอยู่ใน Same Origin ผมพูดถึงตรงนี้บางคนก็คงร้องอ๋อแล้ว แต่ถ้ายังนึกไม่ออก ไม่เป็นไรครับ มาดูตัวอย่างกัน

<?php
$keyword = $_GET["keyword"];
echo file_get_contents("http://www.google.co.th/search?hl=th&q=$keyword");
?>

พอนึกภาพกันออกหรือยังครับ เพียงเท่านี้ เราก็จะได้ URL ที่เป็น Same Origin แล้วครับ

ลองไปดู LIVE DEMO กันครับ

ข้อควรระวัง!!

Code ง่าย ๆ แค่ 2 บรรทัด ยังต้องมีข้อควรระวังอีกหรือ? ใช่ครับ ถ้าเราคิดต่อจากนี้ อยากทำให้ชีวิตง่ายขึ้น โดยการเปลี่ยน Code 2 บรรทัดนั้น ให้สามารถรับ URL อะไรก็ได้ มีหน้าตาแบบนี้ครับ

<?php
$url = $_GET["url"];
echo file_get_contents("$url");
?>

ดูดี หรูหรา และ Generic สุด ๆ ใช่มั๊ยครับ ลองนึกดูว่าถ้าผมใส่ parameter url เป็น /home/user/secret.php ดูครับ สิ่งที่เกิดขึ้นคือ มันจะแสดงค่าใน secret.php ของผมออกมาจนหมด

วิธีการทำ Proxy เป็นวิธีที่ดีครับ แต่ควรใช้อย่างระมัดระวังเพราะอาจจะเกิดปัญหาตามมาด้านอื่น ๆ ได้ครับ ทางที่ดีควรกำหนด URL ที่ต้องการไว้ภายในเลยครับ และการเรียก URL ซ้ำ ๆ บ่อย ๆ อาจจะทำให้เว็บเซิร์ฟเวอร์ที่เราไปเรียกเค้าแบนเราได้ครับ

เตือนด้วยความหวังดีครับ แล้วเจอกันใหม่ครับ

ยกตัวอย่างค่าของ JSON ครับ

{
  "name": "chonla",
  "position": "คนสวน",
  "birthday": {
    "date": 1,
    "month": 1,
    "year": 1970
  }
}

การนำไปใช้งานก็แสนง่ายดายครับ มีหลายวิีธีให้เลือก เช่น ผมยกตัวอย่างให้ตัวแปร contact เก็บค่า string ด้านบน เมื่อผมต้องการทำให้มันเป็น JSON object ก็เพียงแค่สั่ง eval() มันครับ

var c1 = eval("(" + contact + ")"); // แบบนี้ก็ได้
eval("var c2 = " + contact + ";");  // แบบนี้ก็ยังได้เลยครับ

การเอา JSON ไปใช้กับ Ajax

เดิมที Ajax จะใช้กับ XML (ตามชื่อมันเลยครับ) หลัง ๆ ไม่ได้มีใช้แค่ XML แล้วครับ ยังมีทั้ง JSON, Text, HTML หรือ Data ในรูปแบบอื่น ๆ อีก การรับค่า XML นั้น ปกติเราก็จะดึงจาก responseXML ของ XML Object แต่ JSON มีค่าเป็น string ธรรมดา ก็ให้ดึงจาก responseText แทนครับ แล้วก็นำไป eval() เพื่อให้ได้เป็น Object ได้เลยครับ

การเอา JSON ไปใช้กับ jQuery

ยิ่งง่ายใหญ่ ใน $.post() ใน jQuery เวอร์ชั่นใหม่ ๆ ได้เพิ่ม parameter ตัวสุดท้ายมาให้เพื่อกำหนดชนิดของข้อมูลที่จะรับกลับมา เราก็แค่กำหนด “json” ให้มัน ค่าที่ได้ก็จะกลับมาเป็น Object สำเร็จรูปเลยครับ

$.post("save.php", {name:"john"}, save_complete, "json");
function save_complete(json)
{
    alert(json.code);
}

ง่ายใช่มั๊ยล่ะครับ งั้นไปดู LIVE DEMO กันครับ

แหล่งอ้างอิงเพิ่มเติม

• http://en.wikipedia.org/wiki/JSON
• http://www.json.org/

• User Experience ที่เปลี่ยนไป แน่นอนครับ เมื่อเราใช้ Ajax มันย่อมส่งผลกระทบถึง User แน่ ๆ อยู่แล้ว User หลาย ๆ คนคาดหวังว่า ทุกครั้งที่คลิก หน้าจะต้องถูกโหลดใหม่เสมอ ทำให้ User ประเภทนี้ เกิดความไม่เคยชินถึงความเปลี่ยนแปลงของข้อมูลบนเว็บได้ครับ แล้วก็อาจจะเกิดคำถามที่ว่า คลิกแล้วไม่เห็นไปไหนเลย เกิดขึ้นได้ครับ
• Search Engine Optimization เมื่อเราทำเว็บเป็น Ajax ข้อมูลจะถูกส่งมาให้เว็บบราวเซอร์ก็ต่อเมื่อมีการรันสคริปเพื่อไปดึงข้อมูลจากเว็บเซิร์ฟเวอร์ ในขณะที่ Search Engine Bot ไม่สามารถรันสคริปพวกนี้ได้ ทำให้เวลาที่ Search Engine Bot อ่านหน้าเว็บของเรา ก็จะได้แต่โครงสร้างของหน้าเว็บเปล่า ๆ กลับไป
• Javascript Compatibility ปัญหาของเรื่องนี้มันก็คือเรื่องของ Cross-browser Compatibility นั่นแหละครับ เว็บบราวเซอร์แต่ละตัวก็สนับสนุน ECMA Script ที่แตกต่างกันไป ทำให้ในขั้นตอนการพัฒนาเว็บด้วย Ajax ผู้พัฒนาจำเป็นต้องนึกถึงตรงนี้ด้วยครับ

นอกจากนี้แล้ว การใช้ Ajax มากเกินไป อาจจะทำให้เกิดผลเสียขึ้นแทนที่จะเกิดผลดีก็ได้ ยกตัวอย่าง เว็บไซต์ A เป็นเว็บพอร์ทัลที่มีการแสดงข้อมูลในเรื่องต่าง ๆ ใส่ในกรอบไว้ สมมติให้ว่ามี 20 กรอบ ถ้าข้อมูลในแต่ละกรอบ ต่างก็ไปดึงจากเว็บเซิร์ฟเวอร์ด้วย Ajax ช่องละครั้ง สิ่งที่เกิดขึ้นคือ จำนวน Connection ที่เกิดขึ้นเพิ่มมาอีกอย่างน้อย 20 ครั้ง

สมมติว่า เว็บไซต์ A นี้ มีรูปที่จะต้องแสดง (รวมรูปกรอบ รูปภาพต่าง ๆ Flash) ทั้งหมด 300 รูป และมีการเรียก Ajax อีก 20 ครั้ง Javascript ไฟล์อีก 10 ไฟล์ และ css อีก 5 ไฟล์ รวม Connection ที่จะเกิดขึ้นทั้งหมดจากเครื่องผู้ใช้ไปยังเว็บเซิร์ฟเวอร์ คือ 336 ครั้ง (รวมครั้งแรกที่เรียกหน้าด้วยอีก 1 ครั้ง)

นี่คือเหตุการณ์สำหรับ User 1 คนที่จะเกิดขึ้นกับเว็บไซต์เรานะครับ เว็บเราดัง ๆ หน่อย มีผู้ใช้ 10,000 คนในช่วงเวลาเดียวกัน ก็จะเกิดขึ้น 3,360,000 ครั้ง ในช่วงเวลานั้น ๆ ลองนึกภาพตามดูนะครับ ว่าเว็บเซิร์ฟเวอร์จะทำงานหนักขนาดไหน

หนทางในการลด Connection ลงมีหลายวิธีครับ ผมจะพูดถึงเฉพาะในเรื่อง Ajax เท่านั้น คือ ลองพิจารณาว่า ถ้าการโหลดหน้าครั้งแรก ไม่ต้องเป็น Ajax ล่ะ แต่ครั้งถัดไปค่อยใช้ Ajax แสดงว่า User 1 คน จะเกิด Connection ไปยังเว็บเซิร์ฟเวอร์ 316 ครั้ง ถ้า 10,000 คนก็ 3,160,000 ครั้ง ลดลงไปได้ 200,000 ก็ยังดีครับ

ผมสรุปตอนท้ายว่า Ajax เป็นเทคโนโลยีที่ดีก็ต่อเมื่อเรานำไปใช้ให้พอดี และเหมาะสมกับงานครับ

ขอให้สนุกกับการใช้ Ajax นะครับ

• Ajax Enabler ผมตั้งชื่อนี้เอง ดูเท่ดี เหตุผลอันนี้คงเป็นเหตุผลหลัก เพราะว่าเราต้องใช้งาน Ajax บ่อย แต่ Ajax library ตัวอื่น ๆ ก็ทำได้นี่นา
• DOM Parser นี่ก็เป็นสุดยอดเหตุผลอีกข้อหนึ่ง jquery นั้นสามารถ parser ได้ทั้ง HTML DOM ของหน้าที่เรียกใช้มัน หรือ Element ต่าง ๆ ในหน้านั้น ๆ รวมถึง XML DOM ที่ได้รับจาก Ajax ด้วย ข้อดีอันนี้ทำให้เราสามารถอ้างถึง Node ใด ๆ ได้อย่างง่ายดายด้วย Selector ครับ
• Chainability การเขียน code ต่อเนื่องกันในบรรทัดเดียว โดยปกติแล้ว ผมเองเป็นคนชอบเขียน code ให้ดูสะอาดอ่านง่าย ๆ อยู่แล้ว ยิ่งมาเจอ Chainability นี่ด้วย ถูกใจมิใช่น้อย แต่ยังใช้ไม่ค่อยชำนาญครับ
• Selector มันก็คือรูปแบบการอ้างถึง Node ใด ๆ ใน DOM นั่นเองครับ มี Syntax ที่ไม่ยากเกินไป เรียนรู้ได้ง่ายครับ
• Event Binding ทำให้การ Bind Event เป็นเรื่องเล็กมาก ๆ เมื่อใช้ Event binding ร่วมกับ Selector อ้างได้ทั้งที่เป็น Array ของ Element ก็ได้ครับ สุดยอดจริง ๆ
• การแยก Business Logic ออกจาก Presentation ด้วยเหตุผลหลาย ๆ ข้อที่พูดมาก่อนนี้ ทำให้การแยก Business Logic ออกจาก Presentation ได้ง่ายมากครับ
• JSON Compatible ไม่ใช่แค่ JSON นะครับ Plain Text ก็สนับสนุนครับ ชื่นใจจริง ๆ
• ความง่ายในการเขียน มันไม่ซับซ้อนเหมือน DOJO, ExtJS ฯลฯ ทำให้มีกำลังใจเขียนขึ้นเยอะมากครับ
• Cross Browser ข้อนี้คงขาดไม่ได้ครับ เท่าที่ลองมา มันสนับสนุนหมดทั้ง IE, Firefox, Opera, Chrome, Safari ครับ
• มี library อื่น ๆ ที่ช่วยให้ชีวิตการเขียน javascript ง่ายขึ้นเยอะครับ

ตอนนี้เท่าที่คิดออกก็มีแค่นี้ครับ

ต่อไปเรามาดูความสามารถที่น่าสนใจของมันกันครับ

Ajax Enabler

ใน jquery มี function ที่เกี่ยวกับ ajax มากมายครับ เช่น $.ajax(), $.get(), $.post() ซึ่งแต่ละตัวก็แตกต่างกันไปตามความจำเป็นของการใช้งานครับ อันที่ผมใช้บ่อย ๆ ก็ $.post() ครับ มาดูตัวอย่าง code กันครับ

$.post("save.php",
             {fname:"john",lname:"doe",age:"27"},
             save_done,
             "html");

หมายถึง การส่ง fname=john&lnamd=doe&age=27 ไปที่ save.php แบบ POST โดยที่ค่าที่ได้รับจาก save.php จะส่งกลับมาเป็น html เมื่อ jquery ได้รับค่ากลับมาทั้งหมด ให้ไปเรียกฟังก์ชั่น save_done() ให้ทำงานต่อ

DOM Parser

jQuery มีความสามารถในการ parse DOM ได้ด้วยครับ ไ่ม่ว่าจะเป็น HTML DOM, XML DOM หรือแม้แต่จะเป็น HTML Element ที่เราดึงมาจากในเว็บครับ เช่น

$(document); // อ้างถึง document object โดยผ่าน jquery

นอกจากการส่ง DOM เข้าไปใน $() แล้ว เรายังสามารถส่ง Selector เพื่ออ้างถึง Node ใด ๆ ใน DOM ก็ได้ครับ เช่น

$("input[@type=button]"); // อ้างถึง input ที่เป็น button

Event Binding

จะเป็นการกำหนด function ให้กับ object ที่ได้จากการอ้างถึง ไม่ว่าจะเป็น HTML DOM หรือ Selector ครับ เช่น

$(document).ready(init); // หมายถึงเมื่อ document ready แล้วให้ไปเรียกฟังก์ชั่น init()
$("input[@type=button]").click(clickme);  // หมายถึง เมื่อคลิกที่ปุ่มใด ๆ ให้เรียกฟังก์ชั่น clickme()

Chainability

เปรียบเทียบการทำ Event Binding 2 แบบด้านล่างดูนะครับ แล้วจะเห็นข้อดีของ Chainability ครับ

แบบแรก

$("span").click(clickme);
$("span").mouseover(overme);
$("span").mouseout(outme);

เปรียบเทียบกับเมื่อทำ Chain กันแล้ว

$("span").click(clickme).mouseover(overme).mouseout(outme);

ข้อแตกต่างไม่ใช่เพียงแค่จำนวนบรรทัดที่เขียน แต่จะเป็นจำนวนครั้งที่มีการค้นหา element ด้วยครับ ในแบบแรกจะต้องมีการค้นหา element span ถึง 3 รอบ เพื่อทำ 3 คำสั่ง ในขณะที่แบบหลัง จะมีการค้นหา element เพียงครั้งเดียว และส่งเป็น Chain ต่อไปเพื่อทำคำสั่งต่อไปครับ

เห็นข้อดีอย่างที่ผมเห็นแล้วหรือยังครับ ถ้าเห็นแล้ว มาใช้ jQuery กันเถอะครับ

สำหรับ Web Developer หลาย ๆ คน คงจะเคยได้ยินคำว่า Ajax มาบ้างไม่มากก็น้อย บางท่านก็ใช้งาน Ajax อยู่ แต่บางท่านก็ไม่เคยได้ยินมันมาก่อน เพื่อเป็นการปูพื้นฐานความเข้าใจ Ajax ผมจะเล่าถึงเหตุการณ์ในการเข้าเว็บ 1 หน้าแบบคร่าว ๆ ให้ฟัง

โดยปกติแล้ว เว็บหนึ่ง ๆ จะประกอบด้วยเว็บเซิร์ฟเวอร์ ทำหน้าที่เป็นผู้ให้บริการหน้าเว็บแก่บราวเซอร์ที่มาร้องขอ เรียกกันภาษาชาวบ้านว่า ถ้าเราเปิด IE เข้าเว็บกูเกิล เจ้าเซิร์ฟเวอร์ของกูเกิลจะส่งหน้าโฮมเพจของกูเกิลกลับมาให้นี่แหละ นั่นคือเบื้องหน้าครับ เราจะเห็นว่าไม่มีอะไรพิเศษนี่ เราลองมาดูเบื้องหลังกันครับ จากนี้ไป ผมจะขอเรียก IE หรือ Firefox หรือโปรแกรมที่ท่านใช้เล่นเว็บว่า บราวเซอร์ และเซิร์ฟเวอร์ของกูเกิล (จริง ๆ แล้วผมหมายถึงเซิร์ฟเวอร์ของเว็บอื่น ๆ ด้วยนะครับ) ว่าเว็บเซิร์ฟเวอร์

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

ในหน้าเว็บหน้าหนึ่ง ๆ ถ้าลองแยกส่วนประกอบออกมาเป็นส่วนย่อย ๆ ผมแยกออกมาได้ 3 ส่วนหลัก ๆ คือ

1. ส่วน Layout หมายถึง ส่วนที่จัดวางโครงสร้างของหน้า เช่น ตรงนี้จะเป็นตาราง ตรงนี้เป็นรูป รูปกว้างสูงเท่าไหร่ เป็นต้น
2. ส่วน Data หมายถึง ส่วนข้อมูล ข่าวต่าง ๆ เนื้อหาในหน้านั้น ๆ
3. ส่วน Script หมายถึง ส่วนที่เป็น Interactive และ Script ต่าง ๆ เช่น Javascript ในหน้าเพจนั้น ๆ

โดยที่เว็บปกติแล้ว ไอ้ทั้ง 3 ส่วนเนี่ย มันมักจะปนกันอยู่เละตุ้มเป๊ะ (แต่ก็ยังอุตส่าห์แสดงผลออกมาได้อย่างสวยงาม)

ที่พูดมาทั้งหมด มันคือเหตุการณ์เมื่อเราเข้าเว็บ 1 หน้า แล้วถ้าเว็บนั้นมีหลายหน้าล่ะ เช่น กูเิกิล แสดงผลออกมา 20 หน้า เราจะไปหน้า 2, 3, 4 ล่ะ จะเกิดเหตุการณ์แบบเดียวกันกับการเข้าเว็บ 1 หน้านั้นขึ้นหรือไม่ คำตอบคือ ใช่ครับ ด้วยเทคนิคการเขียนเว็บแบบดั้งเดิม ตอบได้เลยว่าใช่ครับ ไม่ว่าจะเข้าอีกกี่หน้าก็ตาม ก็จะเกิดเหตุการณ์อันซับซ้อนเบื้องหลังแบบนั้นแหละครับ

แล้วปัญหาคืออะไรล่ะ? ลองพิจารณาหน้าเว็บที่มีจำนวนข้อมูล, รูปภาพ, หนัง, เพลง, Flash ฯลฯ เยอะ ๆ ดูนะครับ ผมสมมติว่าเว็บสวย ๆ เว็บนึงปัจจุบันนี้ 1 หน้าจะมีขนาดประมาณ 1-5 เมกะไบต์ ท่านเปิดหน้าไปเรื่อย ๆ 10 หน้า ท่านจะต้องโหลดมาอย่างน้อย ๆ 10 เมกะไบต์ โอ้แม่เจ้า!! เห็นหรือยังครับ ว่าเกิดอะไรขึ้น

จากที่ผมแยกส่วนประกอบในหน้าเว็บ 1 หน้า เป็น 3 อย่างด้านบน เป็นไปได้หรือเปล่าที่เราจะลดปริมาณข้อมูลลง โดยส่งเฉพาะส่วนที่เป็น Data (2) สำหรับส่วน Layout (1) กับ Script (3) ก็ให้ใช้ของเก่าไป นั่นแหละครับ Ajax คือคำตอบครับ

Ajax ย่อมาจาก Asynchronous Javascript and XML ถูกนำมาใช้เพื่อแก้ปัญหานี้ ในขั้นตอนของการเปิดหน้า 2 และหน้าถัด ๆ ไปสำหรับเว็บที่ใช้ Ajax สิ่งที่แตกต่างก็คือ เว็บเซิร์ฟเวอร์จะนำข้อมูลที่ได้ ส่งกลับมาให้บราวเซอร์ในรูปแบบที่มีแต่ข้อมูลล้วน ๆ ไม่มีส่วนที่เป็น Layout หรือ Script ปนกลับมาด้วยครับ เมื่อบราวเซอร์ได้ข้อมูลแล้วก็จะนำข้อมูลที่ได้รับกลับมาไปวางไว้บนหน้าเว็บที่แสดงผลอยู่แล้ว โดยปกติแล้ว เว็บ 1 หน้า ยกตัวอย่างว่ามีขนาด 1 เมกะไบต์ เนื้อหาจริง ๆ อาจจะมีไม่ถึง 50 กิโลไบต์ ส่วนที่เหลือก็จะเป็นส่วนประกอบเพื่อความสวยงาม เช่น รูปภาพ หรือ Flash ดังนั้น ทุกครั้งที่เราเรียกหน้า 1 ครั้ง การตอบสนองจะเร็วขึ้นประมาณ 20 เท่า (เอา 1MB หารด้วย 50KB)

เทคโนโลยีที่สำคัญที่ทำให้เกิด Ajax ได้คือ

1. XML ปัจจุบันนี้ Ajax ไม่ได้มีความหมายเฉพาะแค่ XML อย่างเดียวแล้ว แต่ยังรวมไปถึง JSON, Text, HTML และ Data ในรูปแบบอื่น ๆ ด้วย
2. ECMAScript เช่น Javascript
3. DHTML หรือ Dynamic HTML
4. Asynchronous นั่นคือการทำงานแบบไม่ต้องรอกัน เราสามารถสั่งงานให้ script ไปทำโดยไม่จำเป็นต้องรอผลลัพธ์ ณ ตอนนั้น ทำให้การประมวลผลหน้าเว็บเร็วขึ้นมาก ส่งผลให้การตอบสนองกับ User ได้รวดเร็วขึ้น

บทความอ้างอิง

• http://th.wikipedia.org/wiki/เอแจ็กซ์
• http://en.wikipedia.org/wiki/AJAX