บทที่ 16 Loading กับ AJAX
เริ่มต้นที่เมื่อเราทำการเรียกใช้ AJAX ก็ให้ไปกำหนดให้พื้นที่แสดงผลแทนรูปรอโหลด จนกระทั่ง AJAX ทำงานเสร็จ ข้อมูลถูกส่งกลับมาเรียบร้อยก็ให้ไปแสดงผลข้อมูลแทนแค่นั้นเอง
<style>
#wait {
position:absolute;
left:50%;
top:50%;
color:navy;
text-align:center;
width:100px;
}
</style>
กำหนด style ให้รูปรอโหลดแสดงกลางพื้นที่แสดงผล
<div id=content></div>
พื้นที่แสดงผลข้อมูลครับ ส่วนนี้จะเป็นส่วนที่เมื่อทำการประมวลผล AJAX เสร็จแล้วจะมาแสดงผลที่นี่
function loaddoc(id) {
//แสดง icon คอยการ load ก่อนเลยถ้ามีการเรียกใช้ AJAX
document.getElementById("content").innerHTML='<div id="wait"><img src="../images/wait.gif" alt="" /><br /><br />กำลังโหลด...</div>';
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
var data=req.responseText; //รับค่ากลับมา
document.getElementById("content").innerHTML=data; //แสดงผล แทนรูปรอโหลด
}
}
};
req.open("GET", "index.php?id="+id, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
req.send(null); //ส่งค่า
}
loaddoc เป็นฟังก์ชั่นที่เรียกใช้ AJAX จะเห็นว่าเมื่อเรียกใช้ AJAX ในทันที พื้นที่แสดงผลจะแสดงรูปรอโหลดก่อน จนกระทั่ง AJAX ประมวลผลเสร็จก็จะเอาข้อความมาแสดงที่พื้นที่แสดงผลแทน
การใช้งาน เราจะทำเมนูเพื่อเรียกฟังก์ชั่น loaddoc ให้ทำงานขณะที่เราเรียกเพจ เช่น
<a href="javascript:loaddoc('gallary.php')">Gallary</a>
ซึ่งเมื่อคลิกลิงค์ Gallary ก็จะไปเรียก loaddoc เพื่อเรียกหน้า gallary.php มาแสดง
รูปรอโหลดก็หาเอาตามใจชอบครับ ลองดูได้ ที่นี่
ตัวอย่าง การแสดงรูปรอโหลด ถ้าดูไม่ทันให้คลิกที่เมนูด้านบนนะครับ