ตัวอย่างการใช้งาน AJAX กับเว็บไซต์ ตอนที่ 3

ในบทนี้ผมจะอธิบายถึงตัวอย่างแต่ละรายการนะครับ เริ่มจากตัวอย่างแรก ตัวอย่างการโหลดหน้าเว็บด้วย Ajax ซึ่งตัวอย่างนี้จะแสดงให้เห็นถึงการใช้ Ajax ในการโหลดเว็บไซต์ทั้งหน้ามาแสดงผล

<!-- element สำหรับแสดงรูปรอโหลด -->
<div id='loading'></div>

<!-- ฟอร์มสำหรับรับค่า เพื่อส่งไปโดย Ajax -->
<label for="demo_txt">โหลดเว็บไซต์ด้วย Ajax</label>
<input type="text" id="demo_txt" value="https://www.kotchasan.com">
<button id="demo_send">Load</button>

<!-- แสดงผลลัพท์ -->
<div id="demo_result"></div>

เริ่มต้นที่ HTML แบ่งออกเป็น 3 ส่วน

• อันแรกคือ div#loading ซึ่งเราจะใช้ในการแสดงรูปรอโหลดตอนที่โหลดด้วย Ajax
• ส่วนที่สองคือส่วนที่ประกอบด้วย input สำหรับรับค่าและปุ่ม Load ที่ใช้ในการกดส่งข้อมูล
• สุดท้ายคือพื้นที่สำหรับแสดงผลเนื้อหาที่โหลดมาได้ คือ div#demo_result

/* style ของรูปรอโหลด */
div#loading {
  background-position: center;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -100%;
}
div#loading.wait {
  background-image: url('loading.gif');
}

ถัดมาก็จะเป็นส่วนของ CSS ที่ใช้ในการแสดงผลรูปรอโหลด เนื่องจากเราจะมีการใช้ div#loading เป็นตัวแสดงผล ซึ่งในตอนเริ่มต้นจะไม่มีคลาสใดๆทั้งสิ้น จนกระทั่งเรากดปุ่ม Load ตัว GAjax จะทำการใส่คลาส wait ลงใน div#loading ซึ่งที่คลาส div#loading.wait ได้ถูกกำหนดให้แสดงรูปรอโหลด จนกระทั่ง Ajax ประมวลผลเสร็จและส่งค่ากลับมา GAjax ก็จะถอดเอาคลาส wait ออกจาก div#loading เป็นอันสิ้นสุดการแสดงผลรูปรอโหลด 

// button click
$G('demo_send').addEvent('click', function () {
  // ข้อมูลสำหรับส่งไป
  var q = 'url=' + $E('demo_txt').value;
  // create GAjax
  var req = new GAjax();
  // กำหนดการแสดงรูปรอโหลดกลางจอ
  req.initLoading('loading', true);
  // เรียกข้อมูลด้วย Ajax โดยการส่งค่า url ที่ต้องการไปยัง Index\Web\Model->web()
  req.send('index.php/index/model/index/web', q, function (xhr) {
    // นำ HTML ที่รับมาจาก Ajax ใส่ลงใน div#demo_result เพื่อแสดงผลลัพท์
    $E('demo_result').innerHTML = xhr.responseText;
  });
});

ส่วนสุดท้าย หัวใจสำคัญคือคำสั่งของ ๋Javascript ที่ใช้

// button click
$G('demo_send').addEvent('click', function (e) {
  // เขียนคำสั่งเมื่อมีการกดปุ่ม
});

โค้ดด้านบนเป็นคำสั่งตรวจจับการกดปุ่ม Load ซึ่งเมื่อมีการกดปุ่มจะเข้าไปทำงานภายในฟังก์ชั่น

// ข้อมูลสำหรับส่งไป
var q = 'url=' + $E('demo_txt').value;
// create GAjax
var req = new GAjax();
// กำหนดการแสดงรูปรอโหลดกลางจอ
req.initLoading('loading', true);
// เรียกข้อมูลด้วย Ajax โดยการส่งค่า url ที่ต้องการไปยัง Index\Web\Model->web()
req.send('index.php/index/model/index/web', q, function (xhr) {
  // นำ HTML ที่รับมาจาก Ajax ใส่ลงใน div#demo_result เพื่อแสดงผลลัพท์
  $E('demo_result').innerHTML = xhr.responseText;
});

โค้ดด้านบนเป็นส่วนของ Ajax โดยที่ข้อมูลที่จะส่งจะถูกกำหนดลงในตัวแปร q ส่วน Object GAjax ถูกสร้างใส่ไว้นในตัวแปร req ซึ่งจริงๆแล้ว สามารถเขียนคำสั่งนี้แบบสั้นๆได้

new GAjax().initLoading('loading', true).send('index.php/index/model/index/web', q, function (xhr) {
  // เขียนคำสั่งหลังจากรับค่าจาก Ajax ที่นี่
});

จากตัวอย่าง เมื่อรับค่ากลับมาแล้ว ก็จะถูกนำข้อมูลที่ตอบกลับในรูปแบบข้อความที่ xhr.responseText ใส่ลงในพื้นที่แสดงผล

ในส่วนของไฟล์ PHP ซึ่งเป็น Model ชื่อคลาส Index\Index\Model เมธอด web ตามที่กำหนดใน GAjax (สังเกตุนะครับว่า URL ที่กำหนดสัมพันธ์กับชื่อคลาสอย่างไร สามารถดูได้จาก Router)

/**
* โหลดเว็บไซต์ด้วย Ajax
*
* @param Request $request
* @return string
*/
public function web(Request $request)
{
  // ตรวจสอบว่าเรียกมาจากภายในไซต์
  if ($request->isReferer()) {
    // ดูค่าที่ส่งมา
    //print_r($_POST);
    // รับค่า URL ที่ส่งมา
    $url = $request->post('url')->url();
    if ($url != '') {
      // โหลด URL ที่ส่งมา
      $content = file_get_contents($url);
      // คืนค่า HTML ไปยัง Ajax
      echo $content;
    }
  }
}

เมธอดนี้ ทำหน้าที่รับค่า URL ที่ต้องการแล้วโหลดหน้าเว็บทั้งหน้าด้วย file_get_contents() ได้เป็น HTML มาส่งค่ากลับไป

ในทางปฎิบัติ ถ้าเป็นการโหลดหน้าเว็บไซต์ของตัวเอง เราสามารถเขียนคำสั่งอื่นใด รวมถึงการ query ข้อมูลจากฐานข้อมูล เสร็จแล้วจัดรูปแบบและใส่ tag ที่ต้องการ เสร็จแล้วส่งกลับไปแสดงผลยังพื้นที่แสดงผลก็ได้

ตัวอย่างนี้ดูได้ที่นี่นะครับ https://projects.kotchasan.com/...index.php?module=web