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

เว็บเพจแบบ AJAX ก็คล้ายๆ IFRAME ในการโหลดการแสดงผลในบางส่วน ในตัวอย่างจะเป็นการใช้ AJAX เพื่อโหลดส่วน rightmodule มาแสดงด้วยฟังก์ชั่น loaddoc โดยการคลิกที่ลิงค์ ก็จะเป็นการโหลดหน้านั้นๆมาแสดง เช่น

<a href="javascript:loaddoc('page1.php')">Page1</a>

page1.php ถ้าไม่ได้อยู่ไดเรคทอรี่เดียวกันกับหน้าหลัก ให้ระบุ path ให้ถูกต้องด้วย

function loaddoc(module) {
var req=Inint_AJAX();
  //แสดง icon คอยการ load ก่อนเลยถ้ามีการเรียกใช้ AJAX
  document.getElementById("rightmodule").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("rightmodule").innerHTML=data; //แสดงผล แทนรูปรอโหลด
      }
    }
  };
  req.open("GET", module, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
  req.send(null); //ส่งค่า
}

ส่วนที่อยากให้ดูก็คือส่วนที่เป็นสีแดง ส่วนแรก

document.getElementById("rightmodule").innerHTML='<div id="wait"><img src="../images/wait.gif" alt="" /><br /><br />กำลังโหลด...</div>';

โค้ดนี้เป็นการแสดงรูปรอโหลดเมื่อมีการเรียกฟังก์ชั่น loaddoc (ด้วยการคลิกเมนู) 

req.open("GET", module, true);

module ก็คือชื่อเพจที่จะให้ AJAX เรียกมาแสดงที่ส่งมากับการเรียกฟังก์ชั่น loaddoc

นอกจากนี้เรายังสามารถให้เพจโหลดหน้าใดหน้าหนึ่งมาแสดงตอนโหลดครั้งได้โดยการแทรกโค้ด onload ใน body

<body onload="loaddoc('page1.php')"> 

ซึ่งจะเป็นการเรียก page1.php มาแสดงตอนโหลดครั้งแรก

สำหรับส่วนอื่นๆที่น่าสนใจในเพจนี้ ก็คือการใช้ CSS เพื่อจัด Layout ให้กับเพจ ให้คลิกขวาเพื่อ View Source ได้เลย

ตัวอย่าง
ผู้เขียน goragod โพสต์เมื่อ 03 เม.ย. 2551 เปิดดู 16,885 ป้ายกำกับ AJAX
^