วิธีใช้ Ajax ร่วมกับ Links แบบ Facebook

หากใครสังเกตเวลาใช้ Facebook จะพบว่าการเปลี่ยนหน้า โดยเลือก tab ข้างบน อาจจะสงสัยว่าทำไมจึงลื่นไหลดีจัง ส่วนอื่นๆของหน้าไม่ต้องโหลดใหม่เลย เหมือนการทำงานของ ajax ทั้งที่ดูในโค้ดก็เป็นแค่ลิงก์ <a href= ... ธรรมดา พอกดเข้าไป url ใน address bar ก็เปลี่ยน เหมือนการกดลิงก์ธรรมดาเลย ตกลงมันยังไงกันล่ะเนี่ย งงไปหมด เขาทำได้ไง

แน่นอนครับ Facebook ไม่ได้ใช้ลิงก์ธรรมดาแน่นอน ถ้าลองสังเกตดูดีๆ เวลาเอาเมาส์ชี้ที่ลิงก์ กับตอนที่กดลิงก์ไป มันเป็นคนละ URL กัน แสดงว่า facebook ใช้ ajax แน่นอน และใช้ Javascript ในการเปลี่ยน URL ใน address bar ด้วย

จุดประสงค์ในการทำแบบนี้มี 2 ข้อ

ข้อแรก ก็คือเพื่อเพิ่มความเร็วในการติดต่อกับผู้ใช้ โดยใช้ ajax โหลดเฉพาะข้อมูลที่ต้องการเท่านั้น ไม่ต้องโหลดส่วนอื่นๆของหน้าเว็บ ทำให้การแสดงผลลื่นไหลไม่มีสะดุดตามสไตล์ของ ajax

ข้อสอง คือการรักษารูปแบบของลิงก์แบบปกติ ทำให้ bot ของ search engine สามารถตามไปเก็บข้อมูลได้ และทำให้ URL บน address bar สามารถใช้อ้างอิงในการเข้าไปยังหน้านั้นๆได้ด้วย ซึ่งหากเป็น Ajax แบบธรรมดา หากเรานำ url บน address bar ไปพิมพ์ในหน้าต่างใหม่ เราจะเจอแต่หน้าแรกเท่านั้น การ bookmark ก็จะทำไม่ได้ด้วย

วิธีการทำ Ajax ร่วมกับ Links

หลักก็คือ เราจะสร้างลิงก์แบบธรรมดา แล้วใช้ Javascript ทำส่วนที่เหลือ โดยการเปลี่ยนหน้าด้วยการคลิกลิงก์ นั้น จะใช้ innerHTML สร้างข้อมูลภายใน แล้วใช้ window.location.hash เปลี่ยนค่าใน address bar ทำให้ addres ใหม่ที่ได้มีเครื่องหมาย # แทรกเข้ามา วิธีนี้จะสามารถเปลี่ยนข้อมูลใน address bar ได้โดยไม่ต้อง reload เพจใหม่

จากนั้นก็เขียนสคริปต์อีกชุดขึ้นมาดักกรณีที่เข้าด้วย url ที่มี # โดยตรวจสอบว่าถ้า
window.location.hash ไม่เป็นค่าว่าง ก็ให้ reload page ใหม่ด้วย url รูปแบบปกติืิที่ไม่มี #

ตัวอย่าง ก่อน reload
http://example.com/testtab.php?v=x1#testtab.php?v=x1

ตัวอย่าง หลัง reload
http://example.com/testtab.php?v=x1

ตัวอย่างโค้ด อยู่ในลิงก์ด้านล่าง

http://docs.google.com/View?id=dfw3497w_0d6r79rdv