การใช้งาน AJAX กับ Joomla : XAJAX version
แก้ไขล่าสุด ใน วันพุธที่ 24 มิถุนายน 2552 เวลา 00:39 น.
เขียนโดย MrS
วันพฤหัสบดีที่ 17 กรกฏาคม 2551 เวลา 19:18 น.
หน้่าที่ื 1 จาก 2 หน้า
XAJAX
ปัจจุบันเราต่างก็ยอมรับว่าเราไม่สามารถที่จะหลีกเลี่ยงการใช้งาน AJAX ในโปรแกรมต่างๆ ได้ เนื่องจากการใส่ AJAX ในโปรแกรมจะทำให้ผู้ใช้มีประสบการณ์ที่เยี่ยมยอดในการใช้งานโปรแกรม สำหรับท่านที่เป็น programmer มือใหม่ที่ยังไม่คุ้นเคยกับ AJAX (Asynchronous Javascript And XML) AJAX เป็นเทคนิกที่ใช้ในการเขียนโปแกรม Web based แบบ Interactive โดยมีการใช้ JavaScript ในการทำ HTTP request ไปยัง Sever และที่ Server จะมี Script ซึ่งเป็น Server-Side Script เช่น PHP, JSP หรือ ASP ทีจะทำการส่งข้อมูลกลับมาให้ JavaScript Object เพื่อทำการ Update ข้อมูลบนหน้า Web เฉพาะส่วนที่ต้องการเปลี่ยนแปลง ย้ำนะครับว่าเฉพาะส่วนที่ต้องการเปลี่ยนแปลงนะครับไม่ใช่ทั้งหน้า เช่นตัวอย่างที่ผมใช้ก็คือใน Compoent จะเริ่มต้นที่ผู้ใช้ต้องการดู Directory ของบุคคล ระบบจะแสดงโครงสร้างองค์กรในรูปแบบ tree เมือ่ผู้ใช้ click ที่หน่วยงานก็จะเป็นการใช้ AJAX ไป query ข้แมลของบุคคลในแผนกนั้นๆมาแสดง โดยรูปแบบข้อมูลที่ส่งกลับมาก็คือ XML นั่นเอง แต่ไม่ต้องกลัวหรอกนะครับเพราะการ Update ข้อมูลของเราจะใช้ Document Object Model ในการ Update เช่น innerHTML หรือ innerText เป็นต้น สำหรับการเขียน AJAX นั้นมีหลายวิธี ทั้งแบบที่เขียนเองทั้งหมดโดยเริ่มจาก JavaScript object อย่างที่ว่า หรือวิธีที่ผมจะนำเสนอในที่นี้คือ การใช้ XAJAX (
http://xajaxproject.org/) ซึ่งเป็น PHP-AJAX library สำหรับผู้ที่ใช้ PHP ในการเขียนโปรแกรมโดยเฉพาะ
ขั้นตอนการใช้งาน XAJAX กับ PHP (แปลจาก
Tutorial:Learnin xajax in 10 minutes)
1. ขั้นตอนแรกครับ ในไฟล์ PHP ของเราก็ต้อง include XAJAX PHP script ก่อนเป็นอันดับแรก เรื่อง path ก็ดูให้ถูกต้องนะครับ
require_once("xajax_core/xajax.inc.php");
2.ขั้นที่สองคือการสร้าง object xajax ขึ้นมา ถ้าขั้นที่ 1 ไม่ถูกต้องคุณจะไม่ได้ object ที่จะพร้อมใช้งาน
$xajax = new xajax();
3.ลงทะเบียน PHP ฟังก์ชันของเรากับ XAJAX อันนี้คือฟังก์ชันที่จะเรียกแบบ AJAX น่ะครับ สมมุติว่าชื่อ myFunction นะครับ
$xajax->registerFunction("myFunction");
4.จากนั้นก็เริ่มต้นเขียนฟังก์ชัน myFunction เพื่อให้ทำงานตามที่เราต้องการ
function myFunction($arg) {
// do some stuff based on $arg like query data from a database and
// put it into a variable like $newContent
$newContent = "Value of \$arg: ".$arg;
// Instantiate the xajaxResponse object
$objResponse = new xajaxResponse();
// add a command to the response to assign the innerHTML attribute of
// the element with id="SomeElementId" to whatever the new content is
$objResponse->assign("SomeElementId","innerHTML", $newContent);
//return the xajaxResponse object
return $objResponse;
}
function%20myFunction%28%24arg%29%20%7B%0A%C2%A0%C2%A0%C2%A0%20%2F%2F%20do%20some%20stuff%20based%20on%20%24arg%20like%20query%20data%20from%20a%20database%20and%0A%C2%A0%C2%A0%C2%A0%20%2F%2F%20put%20it%20into%20a%20variable%20like%20%24newContent%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%24newContent%20%3D%20%22Value%20of%20%5C%24arg%3A%20%22.%24arg%3B%0A%C2%A0%C2%A0%C2%A0%20%0A%C2%A0%C2%A0%C2%A0%20%2F%2F%20Instantiate%20the%20xajaxResponse%20object%0A%C2%A0%C2%A0%C2%A0%20%24objResponse%20%3D%20new%20xajaxResponse%28%29%3B%0A%C2%A0%C2%A0%C2%A0%20%0A%C2%A0%C2%A0%C2%A0%20%2F%2F%20add%20a%20command%20to%20the%20response%20to%20assign%20the%20innerHTML%20attribute%20of%0A%C2%A0%C2%A0%C2%A0%20%2F%2F%20the%20element%20with%20id%3D%22SomeElementId%22%20to%20whatever%20the%20new%20content%20is%0A%C2%A0%C2%A0%C2%A0%20%24objResponse-%3Eassign%28%22SomeElementId%22%2C%22innerHTML%22%2C%20%24newContent%29%3B%0A%C2%A0%C2%A0%C2%A0%20%0A%C2%A0%C2%A0%C2%A0%20%2F%2Freturn%20the%C2%A0%20xajaxResponse%20object%0A%C2%A0%C2%A0%C2%A0%20return%20%24objResponse%3B%0A%7D
ให้ xajax ทำการ process request อันนี้ต้องทำก่อนการที่เราจะทำการส่ง HTML content นะครับ คือก่อน header จะถูกส่งไปครับ
$xajax->processRequest();
6.หลังจากนั้นก็ให้ xajax สร้าง JavaScript ที่ต้องใช้งาน
<?php $xajax->printJavascript(); ?>
7.
ถึงตอนนี้ก็จะเป็นการเรียกใช้ xajax เพื่อทำการเรียก myFunction แล้วล่ะครับ อันนี้อาจจะอยู่กับ tag ใดๆ ที่รองรับ onClick event ก็ได้นะครับ
<div id="SomeElementId"></div>
<button onclick="xajax_myFunction('It worked!');"></pre>
%3Cdiv%20id%3D%22SomeElementId%22%3E%3C%2Fdiv%3E%0A%3Cbutton%20onclick%3D%22xajax_myFunction%28%27It%20worked%21%27%29%3B%22%3E%3C%2Fpre%3E
ในตัวอย่างนี้เราทำการ update HTML ภายใน tag ของ DIV ที่มี id เท่ากับ someElementId ซึ่งฟังก์ชันต่างๆ ที่สามารถใช้ได้ของ XAJAX จะมีอยู่หลายๆ ตัวนอกจาก Assign แล้วก็ยังมีอีกหลายฟังก์ชันที่มีประโยชน์มากๆ ลองดูใน API document นะครับ
มีสิ่งที่น่าสังเกตุนิดนึงนะครับสำหรับคนที่คุ้นเคยกับการเขียน AJAX แบบเขียนเองทั้งดุ้น นั่นคือการเรียกฟังก์ชันของ XAJAX จะเรียกกลับมาที่ไฟล์เดิมที่เราเรียกครั้งแรก เช่นสมมุติว่าเราเรียกมาที่ myajax.php เพื่อเข้าหน้าแรกหลังจากกด button มันก็ส่ง command มาที่ myajax.php เหมือนเดิม แต่สาเหตที่สามารถใช้งานแบบนี้ได้ (ปกติถ้าเราเขียนเองเราจะเรียกอีกไฟล์หนึ่งซึ่งจะเป็นปัญหามากใน Joomla!) เพราะ xajax หลังจากที่ทำงานตรง processRequest แล้วถ้ามี request มาจาก AJAX มันจะทำการส่ง response และหยุดการ run PHP script ต่อ โดยการ terminate ด้วยฟังก์ชัน exit() ของ PHP นั่นเอง เอาล่ะทีนี้เราจะมาดูการใช้ XAJAX ใน Joomla กัน
