บทที่ 6 การเรียกดูข้อมูลด้วย AJAX
การเรียกดูข้อมูลด้วย AJAX ในรูปแบบ Text เป็นการเรียกดูข้อมูลในรูปแบบที่เป็นพื้นฐานที่สุดของ AJAX ผมใช้วิธีการเรียกดูข้อมูลแบบนี้เป็นหลักบน Applicaion ของผม ถึงแม้การจัดการแสดงผลอาจดูยุ่งยากไปนิด(เนื่องจากต้องมีการส่งตัวอักษรควบคุมการแสดงผลมาด้วย) แต่ข้อมูลที่รับส่งกัน ระหว่าง Server และ Browser ก็น้อยที่สุดในบรรดาวิธีการทั้งหมด (ตามความเห็นของผู้เขียน)
ในตัวอย่างแรกนี้ จะเป็นการรับส่งข้อมูล โดยจะเป็นการอ่านข้อมูลที่ได้จัดเตรียมไว้แล้วมาแสดงผล (หรืออาจ query ออกมาจากฐานข้อมูลก็ได้) โดยการอ่านจากไฟล์ปลายทางมาโดยตรง ในทางปฏิบัติเราจะต้องจัดเตรียม เอกสารไว้ก่อน เพื่อนำมาแสดงผล
เทคนิคนี้เป็นลักษณะหนึ่งในการจัดการข้อมูลด้วย cache เช่น เราสามารถจัดการอ่านข้อมูลมาจากฐานข้อมูล แล้วนำมาเขียนเป็นไฟล์ เตรียมเอาไว้ เพื่อให้ AJAX เมื่อต้องการแสดงผล ก็ให้มาอ่านเอาจากไฟล์นี้ โดยไม่ต้องไปอ่านจาก ฐานข้อมูลทุกครั้ง
Javascript ที่เรียกใช้ AJAX
ส่วนแสดงผล
ข้อมูลในไฟล์ getdata6.php ที่เตรียมไว้
ในตัวอย่างแรกนี้ จะเป็นการรับส่งข้อมูล โดยจะเป็นการอ่านข้อมูลที่ได้จัดเตรียมไว้แล้วมาแสดงผล (หรืออาจ 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>
ตัวอย่าง