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);