A-AA+then

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

Relate

^