GAJAX บทที่ 21 JSON

GAJAX รองรับการใช้งานกับข้อมูลชนิด JSON ด้วย โดยมีความสามารถในการแปลงข้อมูลเป็น JSON ได้โดยการเรียกฟังก์ชั่น toJSON ซึ่งเป็นฟังก์ชั่นภายในของ GAJAX

ข้อมูลชนิด JSON เป็นข้อมูลที่เหมาะกับ AJAX มาก โดยเฉพาะเมื่อต้องการส่งค่ากลับมาพร้อมกันหลายๆค่า เนื่องจากข้อมูลชนิดนี้เราสามารถเข้าถึงข้อมูลแต่ละหน่วยได้โดยตรง ไม่เหมือน XML ที่ต้องเข้าถึงข้อมูลเป็นชั้นๆไปซึ่งจะยุ่งยากมากกว่า ตัวอย่างการใช้งาน JSON ที่พบบ่อยๆ ก็เช่นการตรวจสอบฟอร์ม ที่มี element ที่ต้องตรวจหลายตัวพร้อมกันในคราวเดียวเป็นต้น

 สำหรับตัวอย่างด้านล่าง เป็นตัวอย่างการรับข้อมูลชนิด JSON มาทำงานโดยการอ่านข้อมูลมาจาก Server ด้วย GAJAX อย่างง่ายๆ
<div id="json-data-1">&nbsp;</div>
<div id="json-data-2">&nbsp;</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);
ผู้เขียน goragod โพสต์เมื่อ 25 ส.ค. 2553 เปิดดู 22,853 ป้ายกำกับ GAJAXAJAXJavascriptJSON
^