บทที่ 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>

ตัวอย่าง