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

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

ในตัวอย่างนี้จะเป็นการส่งค่าจาก Textbox ไปยัง Server แล้วให้ Server ส่งค่าที่ส่งไปกลับมาเพื่อแสดงผลอีกที
<script type="text/javascript" src="../ajax/gajax.js"></script>
 include GAJAX เข้ามาไว้ในเพจ
<script type="text/javascript">
function send() {
    // เรียกใช้งาน GAJAX
    var req = new GAjax();
    // กำหนดรูปรอโหลด กลางจอภาพ
    req.inintLoading( 'wait' , true );
    // ส่ง Ajax ไปยัง recive.php
    req.send( 'recive.php' , 'text=' + encodeURIComponent($E('text1').value) , function(xhr) {
        // รับค่าที่ส่งไปเพื่อมาแสดงผล
        $E('result').innerHTML = xhr.responseText;
    });
};
</script>

โค้ด AJAX ที่ใช้ ซึ่งจะเห็นว่า โค้ดนั้นเรียบง่ายเป็นอย่างยิ่ง และก็ไม่ต้องเขียนกันหลายบรรทัดด้วย โดยกำหนดเฉพาะเท่าที่จำเป็นเท่านั้น และในตัวอย่างนี้ มีการกำหนดรูปรอโหลดให้กับ GAJAX ด้วย ซึ่งรูปรอโหลดที่กำหนดไว้จะแสดงทันทีที่เริ่มการส่ง และจะปิดเองเมื่อรับค่ากลับมาเรียบร้อย และด้วยการกำหนด พารามิเตอร์ ตัวที่ 2 เป็น true ร่วมกับการกำหนด position เป็น absolute จะทำให้รูปรอโหลดถูกแสดงกลางจอภาพอัตโนมัติ

 ในตัวอย่างนี้มีการเข้ารหัสข้อความที่ส่งด้วย encodeURIComponent เพื่อป้องกันข้อความตกหล่นระหว่างทาง ซึ่งจำเป็นมาก สำหรับการส่งข้อมูลเช่นภาษาไทยให้ถูกต้อง
<style type="text/css">
#wait {
    background: #FFFFFF url(http://www.goragod.com/skin/img/wait.gif) 5px 50% no-repeat;
    padding: 5px 5px 5px 25px;
    color: red;
    border: 2px solid #FFCC00;
    display: none;
    position: absolute;
}
</style>

 โค้ด CSS สำหรับกำหนด style ให้กับรูปรอโหลด โดยทั่วไปถ้าต้องการกำหนดให้รูปรอโหลดแสดงกลางจอภาพ จำเป็นต้องกำหนด CSS ให้ position เป็น absolute
<div id="result"></div>
<div id="wait">รอสักครู่...</div>
<input type="text" id="text1" />
<input type="button" id="send" value="ส่ง" />

โค้ด HTML กำหนดแต่ id อย่างเดียว เนื่องจากใช้ร่วมกับ Javascript เท่านั้น และ Javascript ต้องการแต่ id
wait คือ ส่วนของรูปรอโหลด
 result คือส่วนที่จะรับค่ากลับมาเพื่อแสดงผล
<script type="text/javascript">
$G("send").addEvent("click", send);
</script>

 Javascript สำหรับกำหนด event click ให้กับปุ่มส่ง
<?php
    header("content-type: text/html; charset=UTF-8");

    print_r($_POST);
?>

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

ตัวอย่าง คลิกขวา view source เอานะครับ
ผู้เขียน Goragod โพสต์เมื่อ 25 ส.ค. 2553 เปิดดู 8,998 ป้ายกำกับ GAJAXJavascript

เรื่องที่เกี่ยวข้อง

^