GAJAX บทที่ 21 JSON
GAJAX รองรับการใช้งานกับข้อมูลชนิด JSON ด้วย โดยมีความสามารถในการแปลงข้อมูลเป็น JSON ได้โดยการเรียกฟังก์ชั่น toJSON ซึ่งเป็นฟังก์ชั่นภายในของ GAJAX
ข้อมูลชนิด JSON เป็นข้อมูลที่เหมาะกับ AJAX มาก โดยเฉพาะเมื่อต้องการส่งค่ากลับมาพร้อมกันหลายๆค่า เนื่องจากข้อมูลชนิดนี้เราสามารถเข้าถึงข้อมูลแต่ละหน่วยได้โดยตรง ไม่เหมือน XML ที่ต้องเข้าถึงข้อมูลเป็นชั้นๆไปซึ่งจะยุ่งยากมากกว่า ตัวอย่างการใช้งาน JSON ที่พบบ่อยๆ ก็เช่นการตรวจสอบฟอร์ม ที่มี element ที่ต้องตรวจหลายตัวพร้อมกันในคราวเดียวเป็นต้น
สำหรับตัวอย่างด้านล่าง เป็นตัวอย่างการรับข้อมูลชนิด JSON มาทำงานโดยการอ่านข้อมูลมาจาก Server ด้วย GAJAX อย่างง่ายๆ
สำหรับไฟล์ json.php ที่เรียกไปผมได้เตรียมข้อมูล JSON ไว้ดังด้านล่าง ในทางปฏิบััติ ข้อมูลแต่ละส่วนอาจ query ออกมาจากฐานข้อมูล หรือ echo ออกมาด้วยวิธีใดก็ได้ แต่ต้องจัดรูปแบบให้ถูกต้องตามหลัการของ JSON
ข้อควรระวังสำหรับการใช้งานข้อมูลชนิด JSON ก็คือ มีข้อมูลบางตัวเป็นอักขระควบคุมที่ไม่สามารถใช้งานได้ ถ้าจะให้ชัวร์ เราต้องทำการแปลงข้อมูลเป็นรูปแบบที่ปลอดภัยก่อน โดยในส่วนของ PHP บน Server ให้ทำการเข้ารหัสก่อนส่งด้วย rawurlencode() และทำการถอดรหัสด้วย Javascript เมื่อรับค่ากลับมาแล้ว ด้วย decoeURIComponent() เช่น
และในตอนรับค่ากลับด้วย Javascript ให้แปลงกลับก่อน
ข้อมูลชนิด JSON เป็นข้อมูลที่เหมาะกับ AJAX มาก โดยเฉพาะเมื่อต้องการส่งค่ากลับมาพร้อมกันหลายๆค่า เนื่องจากข้อมูลชนิดนี้เราสามารถเข้าถึงข้อมูลแต่ละหน่วยได้โดยตรง ไม่เหมือน XML ที่ต้องเข้าถึงข้อมูลเป็นชั้นๆไปซึ่งจะยุ่งยากมากกว่า ตัวอย่างการใช้งาน JSON ที่พบบ่อยๆ ก็เช่นการตรวจสอบฟอร์ม ที่มี element ที่ต้องตรวจหลายตัวพร้อมกันในคราวเดียวเป็นต้น
สำหรับตัวอย่างด้านล่าง เป็นตัวอย่างการรับข้อมูลชนิด JSON มาทำงานโดยการอ่านข้อมูลมาจาก Server ด้วย GAJAX อย่างง่ายๆ
<div id="json-data-1"> </div>
<div id="json-data-2"> </div>
<input type="button" value="อ่านข้อมูล" id="json-btn" />
<script type="text/javascript">
doJSON = function() {
var req = new GAjax(); // เรียกใช้ GAJAX
req.inintLoading( 'wait' , true ); // แสดงรูปรอโหลดกลางจอภาพ
req.send( 'json.php' , null , function(xhr){
var datas = xhr.responseText.toJSON(); // แปลงข้อมูลเป็น JSON
// แสดงผลข้อมูลแต่ละแถวบน div 2 ตัว
$E('json-data-1').innerHTML = '1. ' + datas[0].firstname + ' ' + datas[0].lastname;
$E('json-data-2').innerHTML = '2. ' + datas[1].firstname + ' ' + datas[1].lastname;
});
};
$G('json-btn').addEvent('click', doJSON ); // กำหนด event ให้กับปุ่ม
</script>
ตัวอย่างการใช้งาน GAJAX กับข้อมูลชนิด JSON :
สำหรับไฟล์ json.php ที่เรียกไปผมได้เตรียมข้อมูล JSON ไว้ดังด้านล่าง ในทางปฏิบััติ ข้อมูลแต่ละส่วนอาจ query ออกมาจากฐานข้อมูล หรือ echo ออกมาด้วยวิธีใดก็ได้ แต่ต้องจัดรูปแบบให้ถูกต้องตามหลัการของ JSON
[
{"firstname":"สมชาย", "lastname":"สายเสมอ"},
{"firstname":"ไม่รู้", "lastname":"ไม่ทราบ"}
]
ข้อควรระวังสำหรับการใช้งานข้อมูลชนิด JSON ก็คือ มีข้อมูลบางตัวเป็นอักขระควบคุมที่ไม่สามารถใช้งานได้ ถ้าจะให้ชัวร์ เราต้องทำการแปลงข้อมูลเป็นรูปแบบที่ปลอดภัยก่อน โดยในส่วนของ PHP บน Server ให้ทำการเข้ารหัสก่อนส่งด้วย rawurlencode() และทำการถอดรหัสด้วย Javascript เมื่อรับค่ากลับมาแล้ว ด้วย decoeURIComponent() เช่น
<?php
echo '[';
echo '{"firstname":"'.rawurlencode('สมชาย').'", "lastname":"'.rawurlencode('สายเสมอ').'"},';
echo '{"firstname":"'.rawurlencode('ไม่รู้').'", "lastname":"'.rawurlencode('ไม่ทราบ').'"}';
echo ']';
?>
และในตอนรับค่ากลับด้วย Javascript ให้แปลงกลับก่อน
$E('json-data-1').innerHTML = '1. ' + decodeURIComponent(datas[0].firstname) + ' ' + decodeURIComponent(datas[0].lastname);