GORAGOD.com

การส่งค่าไปประมวลผลบนปลายทาง ด้วย AJAX มีอยู่ด้วยกัน 2 วิธี คือ GET หรือ POST โดยกำหนดผ่าน method open มีตัวอย่าง การใช้งาน และความแตกต่างกันดังนี้

การส่งแบบ GET เราจะส่งค่า parameter ต่างๆผ่านทาง URL เช่น 'test3.php?value='+value เป็นต้น เหมือนการที่เราส่งค่า ผ่านทาง Address bar และเราจะกำหนดให้ ค่าที่ส่งไปพร้อมกับ method send เป็น null

function sendget(value) {
  var req = Inint_AJAX(); //สร้าง Object
  req.open('GET', 'test3.php?value='+value, true); //กำหนด สถานะการทำงานของ AJAX แบบ GET และส่งข้อมูลผ่านทาง URL
  req.onreadystatechange = function() { //เหตุการณ์เมื่อมีการตอบกลับ
    if (req.readyState==4) {
      if (req.status==200) { //ได้รับการตอบกลับเรียบร้อย
        var data=req.responseText; //ข้อความที่ได้มาจากการทำงานของ test3.php
        document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server โดยการส่งแบบ GET คือ "+data; //แสดงผล
      }
    }
  };
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Header ที่ส่งไป
  req.send(null); //ทำการส่ง
};

ส่วนการส่งค่า แบบ POST คือการส่งค่าไปยังเพจปลายทางโดยตรง (คล้ายกับการส่งผ่าน ฟอร์ม ด้วย method แบบ POST) การส่งโดยวิธีนี้ ข้อความที่ส่งไป จะถูกเข้ารหัสก่อนส่ง ดังนั้นในภาษาอื่นๆ ที่ไม่ใช่ อังกฤษ อาจมีข้อความเป็นภาษาต่างดาวได้ (ดูจากตัวอย่าง และจะมีวิธีการแก้ไขในบทต่อๆไป) วิธีการแบบนี้ เราจะทำการส่งค่า parameter ไปพร้อมกับ method send ดังตัวอย่าง

function sendpost(value) {
  var req = Inint_AJAX(); //สร้าง Object
  req.open('POST', 'test3.php', true); //กำหนด สถานะการทำงานของ AJAX แบบ POST
  req.onreadystatechange = function() { //เหตุการณ์เมื่อมีการตอบกลับ
    if (req.readyState==4) {
      if (req.status==200) { //ได้รับการตอบกลับเรียบร้อย
        var data=req.responseText; //ข้อความที่ได้มาจากการทำงานของ test3.php
        document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server โดยการส่งแบบ POST คือ "+data; //แสดงผล
      }
    }
  };
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Header ที่ส่งไป
  req.send("value="+encodeURIComponent(value)); //ทำการส่งข้อมูลผ่านคำสั่ง SEND
};

ในเพจปลายทาง การรับค่า ก็ทำเหมือนกับการรับค่าผ่านฟอร์ม ด้วย method GET หรือ POST เหมือนเดิม

ไฟล์ test3.php ที่ AJAX เรียกไป

<?
  $value=(isset($_POST["value])) ? $_POST["value] : $_GET["value];
  echo $value;
?>