นอกจากจะขายผ่านซีเอ็ดแล้ว ผมอยากจะลองขายหนังสือ Google Maps มหัศจรรย์แผนที่ออนไลน์ ผ่านบล็อกตัวเองดูด้วย และด้วยความที่อยากจะลองเล่น Ajax ดู ก็เลยตั้งโจทย์ขึ้นมาว่าจะพัฒนาเว็บอีคอมเมิร์ซแบบง่ายๆ ที่กระบวนการทุกอย่างเสร็จได้ภายในเว็บเพียงหน้าเดียว
โดยส่วนใหญ่แล้ว อีคอมเมิร์ซของคนไทยจะเป็นแนวลูกทุ่งๆ หน่อย คือลูกค้าเข้ามาเลือกดูสินค้าในเว็บที่ทำตัวเป็นเพียง catalog สินค้า สนใจสินค้าชิ้นไหนก็ดูราคา ดูค่าส่ง ดูว่าจะต้องโอนเงินเข้าธนาคารไหน จากนั้นก็ไปที่ ATM เพื่อโอนเงิน พอโอนเสร็จก็ส่ง e-mail แจ้งเจ้าของร้านว่าจะสั่งซื้อสินค้าอะไรบ้าง ได้โอนเงินเข้าธนาคารอะไรเมื่อวันที่เท่าไหร่ จากนั้นก็รอรับสินค้าทางไปรษณีย์
แต่ถ้าเป็นอีคอมเมิร์ซแบบครบวงจร กระบวนการทั้งหมดตั้งแต่การดูรายละเอียดสินค้า หยิบสินค้าใส่ตะกร้า checkout ใส่ชื่อที่อยู่สำหรับจัดส่งสินค้า และชำระเงินผ่านบัตรเครดิต จะถูกเชื่อมต่อกันเป็น process flow เดียว
อีคอมเมิร์ซที่ผมตั้งโจทย์ขึ้นมา ผมอยากให้มันเป็นลูกกรุงหน่อย คือมีระบบสั่งสินค้า ใส่ชื่อที่อยู่ และแจ้งการชำระเงินผ่านทางเว็บไซต์ (จากเดิมที่ลูกทุ่งทำผ่าน e-mail) แต่ผมคงไม่ทำแบบเต็มระบบถึงขนาดรับบัตรเครดิต เพราะไม่ได้ทำใหญ่โตอะไรครับ เรียกว่าทำอีคอมเมิร์ซแบบโฮมเมดละกัน (ฟังดูน่ากินยังไงชอบกล)
ดังนั้นระบบอีคอมเมิร์ซของผมก็จะถูกแบ่งออกเป็นสอง process flow คือส่วนสั่งซื้อหนังสือ โดยที่ผมมีลูกเล่นเพิ่มขึ้นมาหน่อย คือลูกค้าจะขอให้เซ็นชื่อลงในหนังสือหรือไม่ก็ได้ และระบุได้ว่าอยากให้เซ็นให้ใคร
และส่วนแจ้งการชำระเงิน
เอาล่ะ ทีนี้ผมใช้ Ajax ตรงไหน? เดี๋ยวสิ บางคนยังไม่รู้เลยว่า Ajax คืออะไร? ลองดูภาพนี้ละกันครับ
เอาแบบเข้าใจง่ายๆ ก็คือเว็บที่ไม่ใช้ Ajax เวลาที่ผู้ใช้ส่งข้อมูลไปที่เซิร์ฟเวอร์ อาจจะเป็นการคลิกลิงก์หรือ submit form พอเซิร์ฟเวอร์ประมวลผลเสร็จแล้วส่งข้อมูลกลับมา ข้อมูลจะถูกทับลงไปในเว็บ “ทั้งหน้า” เช่น เว็บอีคอมเมิร์ซแบบครบวงจรจะมีการเปลี่ยนข้อมูลทั้งหน้าเมื่อผู้ใช้ take action ไม่ว่าจะเป็นการหยิบสินค้าใส่ตะกร้า การ checkout หรือการชำระเงิน
การโหลดเว็บทั้งหน้าทำให้ผู้ใช้ต้องรอโหลดข้อมูลในส่วนที่เว็บทุกหน้ามีเหมือนกัน (common) เช่น ส่วนหัวเว็บรวมถึงโลโก้เว็บ เมนูต่างๆ หรืออย่างบล็อกของผมก็มีคอลัมน์ด้านขวามือที่เป็น common ด้วย ซึ่งข้อมูลเหล่านี้ไม่ควรจะต้องถูกโหลดซ้ำเพราะมันเสียเวลาผู้ใช้
แต่ Ajax ช่วยให้ผู้พัฒนาเว็บเลือกได้ว่าอยากให้พื้นที่ส่วนไหนของเว็บที่ถูกเขียนข้อมูลทับ จากรูปด้านล่างนี้ พื้นที่สีเหลืองเป็น common ที่ผู้ใช้ไม่จำเป็นต้องโหลดซ้ำ ส่วนพื้นที่ที่มีเลข 1 และ 2 คือพื้นที่ที่ต้องการให้มีการเปลี่ยนแปลงข้อมูล ถ้าผู้ใช้ take action บางอย่างเพื่อเปลี่ยนข้อมูลในพื้นที่หมายเลข 1 ก็สามารถใช้ Ajax เพื่อโหลดข้อมูลใหม่ (สีแดง) จากเซิร์ฟเวอร์มาทับข้อมูลเดิม (สีน้ำเงิน) ได้ เช่นเดียวกับพื้นที่หมายเลข 2 ที่สามารถโหลดข้อมูลใหม่ (สีเขียว) มาทับข้อมูลเดิม (สีน้ำเงิน) ได้เช่นกัน
การจะเลือกเปลี่ยนข้อมูลในพื้นที่ใด ก็จะต้องใช้ HTML DOM ซึ่งมองว่าหน้าเว็บเป็นวัตถุ (object) ก้อนหนึ่ง และองค์ประกอบต่างๆ ในเว็บก็เป็นวัตถุย่อยที่อยู่ในวัตถุหน้าเว็บ โดยที่เราจะต้องตั้งชื่อให้กับวัตถุแต่ละก้อนเพื่อจะได้เรียกมารับใช้ได้ถูก เช่น ในเว็บขายหนังสือที่ผมทำ ผมมีวัตถุในเผ่าพันธุ์ div อยู่สองก้อน ก้อนแรกชื่อ orderDiv เอาไว้จัดการเรื่องการสั่งซื้อหนังสือ โดยที่ orderDiv เป็นว่าที่คุณแม่ที่มีลูกน้อยอยู่ในครรภ์ ซึ่งลูกเป็นเผ่าพันธุ์ div เหมือนกัน มีชื่อว่า calcId เอาไว้ใช้แสดงใบเสนอราคา ส่วนก้อนหลังชื่อ paymentDiv เอาไว้จัดการเรื่องการแจ้งชำระเงินจากลูกค้า
ถ้าดูโค้ด HTML ก็จะเป็นประมาณนี้
<div id=”orderDiv”>
<div id=”calcId”></div>
</div>
<div id=”paymentDiv”>
</div>
ในส่วนของการทำใบเสนอราคาที่จะถูกแสดงในวัตถุ calcId ผมจะรับข้อมูลจากลูกค้าว่าต้องการสั่งซื้อกี่เล่ม จากนั้นจะส่งข้อมูลจำนวนเล่มไปที่เซิร์ฟเวอร์ เพื่อให้เซิร์ฟเวอร์คำนวณราคาและโปรโมชั่นต่างๆ แล้วเซิร์ฟเวอร์ก็จะสร้างใบเสนอราคาส่งกลับมา ผมก็จะสั่งให้ข้อมูลใบเสนอราคาถูกเขียนลงบนพื้นที่ของ calcId
โค้ดที่ใช้ในการส่งข้อมูลไปยังเซิร์ฟเวอร์ และรับข้อมูลจากเซิร์ฟเวอร์มาเขียนลงใน calcId ผมใช้แค่คำสั่งเดียวเท่านั้นครับ เพราะว่าผมใช้ Prototype JavaScript framework ที่มีคำสั่งสำเร็จรูปมาให้เลย
new Ajax.Request(‘pos_process.php’, {
method: ‘post’,
parameters: params,
onSuccess: function(transport) { document.getElementById(‘calcId’).innerHTML = transport.responseText; }
});
คำสั่งนี้จะทำการส่งข้อมูลจำนวนหนังสือที่ลูกค้าสั่งซื้อซึ่งอยู่ในตัวแปร params ไปให้โปรแกรมในเซิร์ฟเวอร์ที่ชื่อ pos_process.php โดยใช้วิธีส่งข้อมูลแบบ POST และเมื่อเซิร์ฟเวอร์ประมวลผลสำเร็จ ก็จะส่งผลลัพธ์กลับมาที่ transport.responseText ซึ่งผมก็จะนำไปใส่ให้กับ calcId
ทีนี้ Ajax มันมีปัญหาอยู่อย่างหนึ่งก็คือเวลาที่มีการส่งข้อมูลและรอรับข้อมูลจากเซิร์ฟเวอร์ จะต้องใช้เวลาสักอึดใจหนึ่งเพื่อรอโหลดข้อมูล ทั้งนี้ก็แล้วแต่ความเร็วของเซิร์ฟเวอร์และความเร็วของอินเทอร์เน็ต เวลาที่ผู้ใช้คลิกอะไรไปแล้วข้อมูลไม่ปรากฎขึ้นมาทันที ผู้ใช้ก็อาจจะงงว่าคลิกไปแล้วทำไมไม่เกิดอะไรขึ้น จึงต้องแก้ปัญหานี้ด้วยการสื่อสารไปยังผู้ใช้ว่ากำลังมีการโหลดอยู่ บางคนที่เคยเข้าเว็บที่ใช้ Ajax ก็คงเห็นรูปจุดวงกลมหมุน 
ซึ่งมันทำหน้าที่คล้ายๆ ไอคอนนาฬิกาทรายบน Microsoft Windows นี่แหละครับ
การจะให้หน้าเว็บแสดงรูปจุดวงกลมหมุนในช่วงเวลาที่ผู้ใช้ take action ไปแล้ว แต่เซิร์ฟเวอร์ยังส่งผลกลับมาไม่เสร็จ ก็ทำได้ง่ายๆ โดยการเขียนคำสั่งให้แสดงรูปนี้ก่อนคำสั่งที่จะเรียก Ajax
document.getElementById(‘calcId’).innerHTML = ‘<img src=”ajax-loader.gif” /> กำลังคำนวณราคา กรุณารอสักครู่ ถ้ารอนานแล้วยังไม่ขึ้น ให้คลิกที่ปุ่มคำนวณราคาอีกครั้ง’;
หลังจากที่ Ajax ทำงานเสร็จแล้ว ก็อย่าลืมเอารูปจุดวงกลมหมุนออก แต่ในที่นี้ผมแสดงรูปไว้ใน calcId และเมื่อ Ajax ทำงานเสร็จ ผมก็เอาผลลัพธ์ที่ได้จากเซิร์ฟเวอร์มาทับใน calcId เช่นกัน จึงไม่ต้องทำอะไรมากครับ
ลองเข้าไปเล่นที่หน้าสั่งซื้อหนังสือดูครับ ลองใส่ตัวเลขจำนวนเล่มดู และถ้าอยากจะสั่งซื้อหนังสือจริงๆ ก็ค่อยใส่ชื่อที่อยู่สำหรับจัดส่งครับ (แฮ่~ โฆษณาแฝง)