บทที่ 3 object XMLHttpRequest หัวใจของ AJAX

XMLHttpRequest เป็น object หนึ่งของ Browser ที่มีมาใช้นานแล้ว object นี้ทำหน้าที่ในการติดต่อ และ รับส่งข้อมูลกับบราวเซอร์ อันเป็นหัวใจของ AJAX

Object นี้มี Method และ Property ดังนี้

Methods ของ XMLHttpRequest Object

open(method, url, async) เปิดการติดต่อกับ Server

    method เป็น GET หรือ POST กำหนดวิธีการส่ง query

    url เป็นที่อยู่ของ page ที่จะเรียกเพื่อทำงานต่อ

    async กำหนดการทำงานเป็นแบบ Asynchronous หรือไม่

    

send(query) ทำการส่งข้อมูล

    พารามิเตอร์ query เป็นค่าที่ส่งไปยังปลายทาง

abort() หยุดการทำงานปัจจุบัน

getAllResponseHeader() คืนค่า Header ที่ส่งมา

getResponseHeader(header) คืนค่า Header ที่กำหนด

    พารามิเตอร์ header ค่า header ที่ต้องการอ่าน

setRequestHeader(header, value) กำหนด header ไปยังปลายทาง

    พารามิเตอร์ header ค่า header ที่ต้องการกำหนด

    พารามิเตอร์ value ค่าที่ต้องการกำหนด

Properties ของ XMLHttpRequest Object

onreadystatechange เหตุการณ์เมื่อมีการเปลี่ยนแปลงสถานะการทำงาน

status รหัสตัวเลขที่คืนมาจาก Server เพื่อแสดงสถานะการทำงาน

    200 = ตกลง

    400 = ค้นหาไม่พบ

statusText ข้อความที่ส่งมาจาก Server เพื่อแสดงสถานะการทำงาน

responseText ข้อมูลที่ส่งมาจาก Server ในรูปข้อความ

responseXML ข้อมูลที่ส่งมาจาก Server ในรูปเอกสาร XML

readyState ตัวเลขแสดงสถานะการทำงาน

    0 = ยังไม่เริ่มทำงาน

    1 = กำลังส่งข้อมูล

    2 = ส่งข้อมูลเรียบร้อย

    3 = กำลังประมวลผล

    4 = จบการทำงาน

เนื่องจากความแตกต่างกันของ บราวเซอร์ ทำให้การเรียกใช้งานบน บราวเซอร์ต่างๆ ต่างกัน โดยที่ บน IE เราจะเรียกผ่าน ActiveX แต่ในบราวเซอร์ อื่นๆ เราจะเรียกผ่าน Native Javascript Object ดังนั้นในการใช้งานเราต้องทำการ ตรวจสอบชนิดของบราวเซอร์ก่อนการใช้งาน

function Inint_AJAX() {

   try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE

   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE

   try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript

   alert("XMLHttpRequest not supported");

   return null;

};

จากโค้ดนี้เป็นการเลือกการใช้งาน AJAX โดยวิธีการตรวจสอบ error ถ้าพบ error (ไม่สามารถเรียกใช้ object นั้นได้) จะไปทำการเรียกใช้ Object ถัดไปทันที

function start() {

  var req = Inint_AJAX(); //สร้าง Object

  req.open('GET', 'test3.php', true); //กำหนด สถานะการทำงานของ AJAX

  req.onreadystatechange = function() { //เหตุการณ์เมื่อมีการตอบกลับ

    if (req.readyState==4) {

      if (req.status==200) { //ได้รับการตอบกลับเรียบร้อย

        var data=req.responseText; //ข้อความที่ได้มาจากการทำงานของ test3.php

        document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server คือ "+data; //แสดงผล

      }

    }

  };

  // Header ที่ส่งไป

  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  // ทำการส่ง

  req.send(null);

};

ในการเรียกใช้ AJAX จะเป็นการเรียกใช้ ฟังก์ชั่น start() ซึ่งจะทำให้ AJAX ทำงาน ไปเรียกให้ test.php มาทำงาน และส่งผลลัพท์ คืนกลับมาทาง req.responseText เอามาแสดงผลต่อไป

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

<?

  echo "test.php";

?>

อ้างอิง WikiPedia

ตัวอย่าง