GORAGOD.com

บทที่ 6 การเรียกดูข้อมูลด้วย AJAX

การเรียกดูข้อมูลด้วย AJAX ในรูปแบบ Text เป็นการเรียกดูข้อมูลในรูปแบบที่เป็นพื้นฐานที่สุดของ AJAX ผมใช้วิธีการเรียกดูข้อมูลแบบนี้เป็นหลักบน Applicaion ของผม ถึงแม้การจัดการแสดงผลอาจดูยุ่งยากไปนิด(เนื่องจากต้องมีการส่งตัวอักษรควบคุมการแสดงผลมาด้วย) แต่ข้อมูลที่รับส่งกัน ระหว่าง Server และ Browser ก็น้อยที่สุดในบรรดาวิธีการทั้งหมด (ตามความเห็นของผู้เขียน)

ในตัวอย่างแรกนี้ จะเป็นการรับส่งข้อมูล โดยจะเป็นการอ่านข้อมูลที่ได้จัดเตรียมไว้แล้วมาแสดงผล (หรืออาจ query ออกมาจากฐานข้อมูลก็ได้) โดยการอ่านจากไฟล์ปลายทางมาโดยตรง ในทางปฏิบัติเราจะต้องจัดเตรียม เอกสารไว้ก่อน เพื่อนำมาแสดงผล

เทคนิคนี้เป็นลักษณะหนึ่งในการจัดการข้อมูลด้วย cache เช่น เราสามารถจัดการอ่านข้อมูลมาจากฐานข้อมูล แล้วนำมาเขียนเป็นไฟล์ เตรียมเอาไว้ เพื่อให้ AJAX เมื่อต้องการแสดงผล ก็ให้มาอ่านเอาจากไฟล์นี้ โดยไม่ต้องไปอ่านจาก ฐานข้อมูลทุกครั้ง

Javascript ที่เรียกใช้ AJAX

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

ส่วนแสดงผล

<div id="content">คลิกเพื่ออ่านข้อมูล</div>
<form>
<input type=button name=get value=อ่าน onclick="getdata()">
</form>

ข้อมูลในไฟล์ getdata6.php ที่เตรียมไว้

<table border="1">
  <tr>
    <td>goragod@yahoo.com</td>
    <td>yahoo mail</td>
  </tr>
  <tr>
    <td>goragod@se-ed.com</td>
    <td>se-ed mail</td>
  </tr>
</table>

ตัวอย่าง