บทที่ 20 การสร้างเว็บไซต์แบบ AJAX (ตอนที่ 2)
ตอนที่แล้วเป็นการโหลดเป็นหน้าๆไป ตอนนี้เราจะมาใช้การโหลดเป็นส่วนๆ แทน ครับ หลักการก็คือ กำหนดพื้นที่แสดงผลเป็นส่วนๆ แล้วก็ใช้ AJAX โหลดข้อมูลแต่ละส่วนมาแสดง
layer1 และ layer2 คือพื้นที่ที่ใช้แดงผล
AJAX ที่ใช้ในการเรียกส่วนต่างๆมาแสดง
CSS สำหรับกำหนดรูปแบบของพื้นที่แสดงผล ส่วนสีแดงเป็นส่วนที่ต้องกำหนด ครับ
โค้ดส่วนที่เหลือดูจากตัวอย่างเลยครับ
ตัวอย่าง
<div id="layer1"></div>
<br />
<div id="layer2"></div>
layer1 และ layer2 คือพื้นที่ที่ใช้แดงผล
function loadsection(module, section) {
var req=Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
var obj = document.getElementById(section)
obj.style.backgroundImage = "url()" //ลบรูปรอโหลด
obj.style.height = '100%' //ปรับความสูงของพื้นที่ให้พอดีกับข้อความ
obj.innerHTML = req.responseText //แสดงเนื้อหาของส่วนนั้นๆ
}
}
};
req.open("GET", module, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
req.send(null); //ส่งค่า
}
AJAX ที่ใช้ในการเรียกส่วนต่างๆมาแสดง
#layer1 {
padding:5px;
background-image:url(../images/wait3.gif);
background-position:center;
background-repeat:no-repeat;
height:100px;
width:100%;
border:1px solid #666666;
display:block;
}
#layer2 {
padding:5px;
border:1px solid #666666;
background-image:url(../images/wait3.gif);
background-position:center;
background-repeat:no-repeat;
height:100px;
width:100%;
display:block;
}
CSS สำหรับกำหนดรูปแบบของพื้นที่แสดงผล ส่วนสีแดงเป็นส่วนที่ต้องกำหนด ครับ
โค้ดส่วนที่เหลือดูจากตัวอย่างเลยครับ
ตัวอย่าง