GORAGOD.com

freelance, web developer, web designer, hosting, domain name

บทที่ 20 การสร้างเว็บไซต์แบบ AJAX (ตอนที่ 2)

ตอนที่แล้วเป็นการโหลดเป็นหน้าๆไป ตอนนี้เราจะมาใช้การโหลดเป็นส่วนๆ แทน ครับ หลักการก็คือ กำหนดพื้นที่แสดงผลเป็นส่วนๆ แล้วก็ใช้ AJAX โหลดข้อมูลแต่ละส่วนมาแสดง

<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 สำหรับกำหนดรูปแบบของพื้นที่แสดงผล ส่วนสีแดงเป็นส่วนที่ต้องกำหนด ครับ

โค้ดส่วนที่เหลือดูจากตัวอย่างเลยครับ

ตัวอย่าง
0SHAREFacebookLINE it!
^