GAJAX บทที่ 18 การรับส่งข้อมูลชนิด Text

การรับส่งค่าด้วย Ajax แบบ Text เป็นการรับส่งค่าพื้นฐานด้วย Ajax เป็นการส่งค่าจาก Browser ไปยัง Server เพื่อร้องข้อข้อมูลใดๆ แล้ว Server จะส่งข้อมูลกลับมายัง Browser เพื่อจัดการแสดงผลต่อไป

ในตัวอย่างนี้จะเป็นการส่งค่าจาก Textbox ไปยัง Server แล้วให้ Server ส่งค่าที่ส่งไปกลับมาเพื่อแสดงผลอีกที

ขั้นแรกเราจะ include GAJAX เข้ามาไว้ในเพจก่อน
<script src="/path/to/gajax.js"></script>
โค้ด AJAX ที่ใช้ ซึ่งจะเห็นว่า โค้ดนั้นเรียบง่ายเป็นอย่างยิ่ง และก็ไม่ต้องเขียนกันหลายบรรทัดด้วย โดยกำหนดเฉพาะเท่าที่จำเป็นเท่านั้น และในตัวอย่างนี้ มีการกำหนดรูปรอโหลดให้กับ GAJAX ด้วย ซึ่งรูปรอโหลดที่กำหนดไว้จะแสดงทันทีที่เริ่มการส่ง และจะปิดเองเมื่อรับค่ากลับมาเรียบร้อย และด้วยการกำหนด พารามิเตอร์ ตัวที่ 2 เป็น true ร่วมกับการกำหนด position เป็น absolute จะทำให้รูปรอโหลดถูกแสดงกลางจอภาพอัตโนมัติ

<script>

    function send() {

      // เรียกใช้งาน GAJAX

      var req = new GAjax();

      // กำหนดรูปรอโหลด กลางจอภาพ

      req.initLoading('wait', true);

      // ส่ง Ajax ไปยัง recive.php

      req.send('recive.php', 'text=' + encodeURIComponent($E('text1').value), function(xhr) {

        // รับค่าที่ส่งไปเพื่อมาแสดงผล

        $E('result').innerHTML = xhr.responseText;

      });

    };

</script>

ในตัวอย่างนี้มีการเข้ารหัสข้อความที่ส่งด้วย encodeURIComponent เพื่อป้องกันข้อความตกหล่นระหว่างทาง ซึ่งจำเป็นมาก สำหรับการส่งข้อมูลเช่นภาษาไทยให้ถูกต้อง

โค้ด CSS สำหรับกำหนด style ให้กับรูปรอโหลด โดยทั่วไปถ้าต้องการกำหนดให้รูปรอโหลดแสดงกลางจอภาพ จำเป็นต้องกำหนด CSS ให้ position เป็น absolute

<style>

    #wait {

      background-image: url(./gform/wait.gif);

      position: absolute;

      width: 70px;

      height: 10px;

      display: none;

    }

    #wait.show {

        display: block;

    }

</style>

โค้ด HTML ที่ใช้ สังเกตุนะครับว่าผมกำหนดแต่ ID อย่างเดียว เนื่องจากใช้ร่วมกับ Javascript เท่านั้น และ Javascript ต้องการแต่ ID

<div id="wait"></div>

<div id="result"></div>

<input type="text" id="text1">

<input type="button" id="send" value="ส่ง">

#wait คือ ส่วนของรูปรอโหลด เมื่อ Ajax ทำการส่งข้อมูลจะมีการใส่คลาส show มาที่ ID นี้ และจะเอาออกเมื่อรับค่ากลับมาสำเร็จ
#result คือส่วนที่จะรับค่ากลับมาเพื่อแสดงผล

สุดท้าย Javascript สำหรับกำหนด event click ให้กับปุ่มส่ง

<script>

$G("send").addEvent("click", send);

</script>

โค้ด PHP ในส่วนรับค่า มีการกำหนด header เป็น text/html และ ภาษาเป็น UTF-8 ไว้ ซึ่งจะเห็นได้ว่า ไม่ได้มีการกำหนดส่วน cache ไว้ เนื่องจาก GAJAX จะมีการส่งค่า แบบไม่ไปเอาจาก cache เป็น default อยู่แล้ว และในการรับค่าก็ไม่มีอะไรมาก เพียงแค่แสดงค่าข้อมูลที่ส่งมากลับไปเท่านั้น ซึ่งลักษณะนี้ก็เหมือนกับการส่งข้อความ (Text) ทั่วไป ซึ่งจะสามารถอ่านค่าได้ที่ responseText

<?php

    header("content-type: text/html; charset=UTF-8");



    print_r($_POST);

?>

ตัวอย่าง คลิกขวา view source เอานะครับ