tag:blogger.com,1999:blog-31304204110184118472011-07-28T22:06:29.101-07:00เทคนิค AJAX ขั้นสูงCrazyHerohttp://www.blogger.com/profile/17303106070046776396noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-3130420411018411847.post-37547569519620311272009-08-31T11:22:00.000-07:002009-08-31T12:08:02.964-07:00วิธีใช้ Ajax ร่วมกับ Links แบบ Facebook<span class="Apple-style-span" style="font-family:verdana;"><span class="Apple-style-span" style="font-size:small;">หากใครสังเกตเวลาใช้ Facebook จะพบว่าการเปลี่ยนหน้า โดยเลือก tab ข้างบน อาจจะสงสัยว่าทำไมจึงลื่นไหลดีจัง ส่วนอื่นๆของหน้าไม่ต้องโหลดใหม่เลย เหมือนการทำงานของ ajax ทั้งที่ดูในโค้ดก็เป็นแค่ลิงก์ <a href= ... ธรรมดา พอกดเข้าไป url ใน address bar ก็เปลี่ยน เหมือนการกดลิงก์ธรรมดาเลย ตกลงมันยังไงกันล่ะเนี่ย งงไปหมด เขาทำได้ไง<br /><br />แน่นอนครับ Facebook ไม่ได้ใช้ลิงก์ธรรมดาแน่นอน ถ้าลองสังเกตดูดีๆ เวลาเอาเมาส์ชี้ที่ลิงก์ กับตอนที่กดลิงก์ไป มันเป็นคนละ URL กัน แสดงว่า facebook ใช้ ajax แน่นอน และใช้ Javascript ในการเปลี่ยน URL ใน address bar ด้วย<br /><br /><span class="Apple-style-span" style="color:#CC0000;">จุดประสงค์ในการทำแบบนี้มี 2 ข้อ</span><br /><br /><span class="Apple-style-span" style="color:#990000;">ข้อแรก</span> ก็คือเพื่อเพิ่มความเร็วในการติดต่อกับผู้ใช้ โดยใช้ ajax โหลดเฉพาะข้อมูลที่ต้องการเท่านั้น ไม่ต้องโหลดส่วนอื่นๆของหน้าเว็บ ทำให้การแสดงผลลื่นไหลไม่มีสะดุดตามสไตล์ของ ajax<br /><br /><span class="Apple-style-span" style="color:#990000;">ข้อสอง</span> คือการรักษารูปแบบของลิงก์แบบปกติ ทำให้ bot ของ search engine สามารถตามไปเก็บข้อมูลได้ และทำให้ URL บน address bar สามารถใช้อ้างอิงในการเข้าไปยังหน้านั้นๆได้ด้วย ซึ่งหากเป็น Ajax แบบธรรมดา หากเรานำ url บน address bar ไปพิมพ์ในหน้าต่างใหม่ เราจะเจอแต่หน้าแรกเท่านั้น การ bookmark ก็จะทำไม่ได้ด้วย<br /><br /><span class="Apple-style-span" style="text-decoration: underline;"><b>วิธีการทำ Ajax ร่วมกับ Links </b></span><br /><br />หลักก็คือ เราจะสร้างลิงก์แบบธรรมดา แล้วใช้ Javascript ทำส่วนที่เหลือ โดยการเปลี่ยนหน้าด้วยการคลิกลิงก์ นั้น จะใช้ innerHTML สร้างข้อมูลภายใน แล้วใช้ window.location.hash เปลี่ยนค่าใน address bar ทำให้ addres ใหม่ที่ได้มีเครื่องหมาย # แทรกเข้ามา วิธีนี้จะสามารถเปลี่ยนข้อมูลใน address bar ได้โดยไม่ต้อง reload เพจใหม่<br /><br />จากนั้นก็เขียนสคริปต์อีกชุดขึ้นมาดักกรณีที่เข้าด้วย url ที่มี # โดยตรวจสอบว่าถ้า<br />window.location.hash ไม่เป็นค่าว่าง ก็ให้ reload page ใหม่ด้วย url รูปแบบปกติืิที่ไม่มี #<br /><br /><br /></span></span><div><span class="Apple-style-span" style="font-family:verdana;"><span class="Apple-style-span" style="font-size:small;">ตัวอย่าง ก่อน reload<br />http://example.com/testtab.php?v=x1#testtab.php?v=x1<br /><br />ตัวอย่าง หลัง reload<br />http://example.com/testtab.php?v=x1<br /><br />ตัวอย่างโค้ด อยู่ในลิงก์ด้านล่าง<br /><br /></span></span></div><div><span class="Apple-style-span" style="font-family:verdana;"><span class="Apple-style-span" style="font-size:small;"><br /><a href="http://docs.google.com/View?id=dfw3497w_0d6r79rdv">http://docs.google.com/View?id=dfw3497w_0d6r79rdv</a><br /><span class="Apple-style-span" style=" white-space: pre-wrap; font-family:-webkit-monospace;font-size:17px;"><script type="text/javascript"><!-- google_ad_client = "pub-5427519945741642"; /* 728x15, ถูกสร้างขึ้นแล้ว 8/31/09 */ google_ad_slot = "7343930623"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></span><br /></span></span><br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3130420411018411847-3754756951962031127?l=expert-ajax.blogspot.com' alt='' /></div>CrazyHerohttp://www.blogger.com/profile/17303106070046776396noreply@blogger.com0