การรับส่งค่าด้วย 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 เอานะครับ