ตัวอย่างการใช้งาน AJAX กับเว็บไซต์ ตอนที่ 2

เนื่องจากคชสารเป็น Web Framework จึงได้มีการรวมคุณสมบัติด้าน Ajax ไว้ด้วยแล้ว โดยมีไลบรารี่ GAjax เป็นไลบรารี่หลักและสามารถใช้งานร่วมกับคชสารได้อย่างสมบูรณ์ โดยที่การใช้งานใดๆที่มีความเกี่ยวข้องกับ Javascript จะต้องมีการรวมเอาไลบรารี่นี้เข้าไว้ด้วยเสมอ

<script src="path/to/js/gajax.js"></script>

รูปแบบการใช้งาน GAjax ในการรับส่งข้อมูล

new GAjax(options).initLoading(loading, center).send(url, params, callback)

options เป็นข้อมูลชนิด Object ใช้สำหรับกำหนดค่าเริ่มต้นให้กับ GAjax มีพารามิเตอร์ที่น่าสนใจตามนี้

• method (string) ค่าเป็น post (default) สำหรับการรับค่าที่ PHP ด้วย $_POST หรือ get สำหรับการรับค่าที่ PHP ด้วย $_GET
• asynchronous (boolean) ค่าเป็น true (default) สำหรับการรับส่งข้อมูลแบบ Asynchronous หรือ false สำหรับการรับส่งข้อมูลแบบ Synchronous

initLoading เป็นเมธอดสำหรับกำหนดค่าการแสดงผลรูปรอโหลด ระหว่างการประมวลผลด้วย Ajax ซึ่งถ้าไม่มีการกำหนดค่าเมธอดนี้ จะไม่มีการแสดงรูปรอโหลด หรือ สามารถจัดการแสดงผลรุปรอโหลดด้วยตัวเองได้ มีพารามิเตอร์สองตัวคือ

• loading (string) ใช้สำหรับกำหนด id ของ element ที่จะแสดงรูปรอโหลดซึ่งจะแสดงในตอนที่มีการเรียกใช้งาน Ajax ด้วยการใส่คลาส wait ลงใน element ที่กำหนด และ เอาคลาส wait ออกจาก element เมื่อได้รับการตอบกลับจาก Server แล้ว ซึ่งเราสามารถกำหนด CSS เพื่อแสดงผลรูปรอโหลดได้ด้วยตัวเอง หรือถ้าใช้งานร่วมกับ GCSS ก็จะแสดงรูปรอโหลดได้โดยอัตโนมัติ
• center (boolean) ใช้กำหนดให้แสดงผลรูปรอโหลดกลางจอภาพ ค่าเริ่มต้นคือ false (หมายถึงแสดงรูปรอโหลดที่ตำแหน่งของ element ที่กำหนดไว้แล้ว)

send เป็นเมธอดปกติสำหรับการรับส่งข้อมูลด้วย GAjax มีพารามิเตอร์คือ

• url (string) เป็น URL ที่ Ajax ใช้ร้องขอข้อมูล โดยทั่วๆไปสำหรับคชสารจะเป็น Model เช่น http://domain.tld/...ndex/model/ajax/post หมายถึงเรียกไปยัง Index\Ajax\Model->post() เป็นต้น
• params (string) เป็น Query String ที่ใช้ส่งไปยัง PHP เช่น key1=value1&key2=value2
• callback (function) เป็นฟังก์ชั่นสำหรับรับค่าที่ส่งกลับมาจาก Ajax โดยจะมีพารามิเตอร์ส่งกลับมาด้วยเป็น XHR Object ตัวอย่าง function(xhr){...}

สำหรับตัวอย่างการใช้งานสามารถดูได้ที่โปรเจ็ค Ajax ตาม URL นี้ https://projects.kotchasan.com/ajax/