บทที่ 15 AJAX กับปัญหาการ Refresh หน้า
การรีเฟรชหน้า เป็นปัญหาหนึ่งของ AJAX ที AJAX มันไม่สามารถโหลดหน้าเดิมกลับมาได้หากมีการ Refresh หน้าใหม่ พอกด Refresh ทีก็ต้องกลับไปเริ่มต้นที่หน้าแรกที
การแก้ไขก็ทำได้ครับ โดยที่เมื่อไรก็ตามที่มีการเรียกใช้ AJAX เพื่ิอโหลดหน้าใดๆมาแสดง ก็ให้บันทึกหน้านั้นไว้ลง Cookie หรือ Session แล้วแต่ถนัด และอย่าลืมบันทึก query ต่างๆลงไปด้วย หากมีการส่ง parameter ใดๆไปยังเพจที่ถูกเรียก
เมื่อไรก็ตามที่มีการ Refresh หรือ โหลดหน้า ก็เอา ค่าที่เก็บไว้ ส่งให้ AJAX ในครั้งแรกที่โหลด ก็จะทำให้ AJAX ทำการโหลดหน้าเดิมครั้งสุดท้ายที่ปิดไปขึ้นมาตลอดเวลา ดู ตัวอย่าง ลองคลิกเลือกหน้าให้แสดง แล้วลอง Refresh ดูครับ
ผมจะขอ อธิบายเฉพาะส่วนที่เพิ่มเติมจากบทที่แล้วนะครับ โดยอธิบาย เฉพาะส่วนที่เพิ่มเข้ามา คือการเรียกใช้ Javascript ที่เกี่ยวกับ cookie ใครไม่มีก็ตามไป view source เอา หรือไม่ก็ save page ไปเลยก็ได้
ดูที่ฟังก์ชั่นนี้เลย เมื่อมีการคลิกเลือกเพจ ก็จะไปเรียกฟังก์ชั่น loaddoc มาทำงาน โดยมีการส่ง parameter module มาให้เพื่อจะบอกว่าจะเรียกเพจไหน พร้อมทั้งอาจส่ง query มาด้วยก็ได้ถ้าต้องการ
ในส่วนสีแดง คือการบันทึก module ที่เรียก ลง cookie แบบที่ผมบอก
เมื่อทำการโหลดเพจ จะทำการตรวจสอบว่ามีค่าที่บันทึกใน Cookie หรือไม่ ถ้ามี จะไปแสดงหน้าที่เลือกไว้ ( $_COOKIE[module] ) แต่ถ้าไม่มี ก็จะไปทำการเรียกหน้าหลัก ซึ่งก็คือ page1.php มาแสดง โดยการส่งชื่อหน้าให้กับฟังก์ชั่น loaddoc ตอนโหลดเพจครั้งแรก
โ้ค้ดเต็มๆ คลิกขวาเพื่อ View Source ที่ตัวอย่างเอานะครับ
การแก้ไขก็ทำได้ครับ โดยที่เมื่อไรก็ตามที่มีการเรียกใช้ AJAX เพื่ิอโหลดหน้าใดๆมาแสดง ก็ให้บันทึกหน้านั้นไว้ลง Cookie หรือ Session แล้วแต่ถนัด และอย่าลืมบันทึก query ต่างๆลงไปด้วย หากมีการส่ง parameter ใดๆไปยังเพจที่ถูกเรียก
เมื่อไรก็ตามที่มีการ Refresh หรือ โหลดหน้า ก็เอา ค่าที่เก็บไว้ ส่งให้ AJAX ในครั้งแรกที่โหลด ก็จะทำให้ AJAX ทำการโหลดหน้าเดิมครั้งสุดท้ายที่ปิดไปขึ้นมาตลอดเวลา ดู ตัวอย่าง ลองคลิกเลือกหน้าให้แสดง แล้วลอง Refresh ดูครับ
ผมจะขอ อธิบายเฉพาะส่วนที่เพิ่มเติมจากบทที่แล้วนะครับ โดยอธิบาย เฉพาะส่วนที่เพิ่มเข้ามา คือการเรียกใช้ Javascript ที่เกี่ยวกับ cookie ใครไม่มีก็ตามไป view source เอา หรือไม่ก็ save page ไปเลยก็ได้
function loaddoc(module) {
var req=Inint_AJAX();
//แสดง icon คอยการ load ก่อนเลยถ้ามีการเรียกใช้ AJAX
document.getElementById("rightmodule").innerHTML='<div id="wait"><img src="../images/wait3.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; //แสดงผล แทนรูปรอโหลด
Set_Cookie( 'module' , module ); //บันทึก module ที่เรียก ลง cookie สำหรับการ refresh หน้าดูที่ฟังก์ชั่นนี้เลย เมื่อมีการคลิกเลือกเพจ ก็จะไปเรียกฟังก์ชั่น loaddoc มาทำงาน โดยมีการส่ง parameter module มาให้เพื่อจะบอกว่าจะเรียกเพจไหน พร้อมทั้งอาจส่ง query มาด้วยก็ได้ถ้าต้องการ
ในส่วนสีแดง คือการบันทึก module ที่เรียก ลง cookie แบบที่ผมบอก
<body onload="loaddoc('<?php echo ( isset( $_COOKIE[module] ) ) ? $_COOKIE[module] : 'page1.php'?>')"><!-- สำหรับการ refresh หน้า -->เมื่อทำการโหลดเพจ จะทำการตรวจสอบว่ามีค่าที่บันทึกใน Cookie หรือไม่ ถ้ามี จะไปแสดงหน้าที่เลือกไว้ ( $_COOKIE[module] ) แต่ถ้าไม่มี ก็จะไปทำการเรียกหน้าหลัก ซึ่งก็คือ page1.php มาแสดง โดยการส่งชื่อหน้าให้กับฟังก์ชั่น loaddoc ตอนโหลดเพจครั้งแรก
โ้ค้ดเต็มๆ คลิกขวาเพื่อ View Source ที่ตัวอย่างเอานะครับ