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";
?>