How AJAX Works:5 Practical Uses For AJAX

AJAX เป็นเทคโนโลยีที่ได้รับความนิยมอย่างมากมายในหลายปีมานี้ตามเว็บไซท์ต่างๆ

What Is AJAX? How Does It Work?

AJAX ย่อมาจาก Asynchronous JavaScript and XML มันใช้สำหรับการอนุญาตให้ฝั่ง client
สามารถติดต่อกับฝั่ง server ได้ เมื่อก่อน ตอนที่ยังไม่มี AJAX ไม่มีวิธีที่จะให้เว็บฝั่ง client
สมารถติดต่อกับฝั่ง server ได้โดยตรง แทนที่เราจะโหลดหน้าเว็บทั้งหน้า การใช้ AJAX เราสามารถที่จะ
รีเฟรชเฉพาะส่วนได้ client และ server สามารถติดต่อกันได้อย่างอิสระ

Here is how the usual AJAX script goes:
1. Login Forms


แทนที่จะไปที่หน้า login แล้วถึงจะเข้าไปหน้าที่เราต้องการทำให้ต้องกลับไปกลับมา เราใช้ AJAX แทน
โดยที่ user สามารถพิมพ์ username และ password ได้จากหน้าที่เราต้องการได้เลย โดยตรงนี้ AJAX จะส่งการร้องขอไปที่ server เืพื่อ login โดย server จะทำให้หน้านั้นรู้ว่าเรา login แล้ว โดย Digg ใช้ระบบล็อกอินเช่นนี้

Example: Digg.com (top of page)


2. Auto-Complete


Google เป็นเจ้าแรกๆที่ใช้ AJAX และ Google’s search suggestion tool เป็นสิ่งแรกที่ใช้ AJAX
และใช้ auto-complete tools เป็นตัวช่วยเวลาที่เราพิมพ์ไปที่ Google search bar มันจะเริ่มใช้ AJAX
ไปรับผลจากดาต้าเบสในแต่ละตัวอักษรที่เราพิมพ์ Auto-Complete เป็นวิธีที่ดีสำหรับแบบฟอร์มที่เรามีการกรอกข้อมูลเยอะๆ

Example: Google Search
Plugin: jQuery Form Plugin

3. Voting and Rating


เว็บ Social bookmarking อย่างเช่น Digg และ Reddit สามารถให้ user โหวตเนื้อหาที่ user ชอบได้
โดยใช้ AJAX เป็นตัวดูแลการโหวต ทำให้ user สามารถโหวตได้อย่างง่ายและรวดเร็ว

Example: Reddit

4. Updating With User Content


สิ่ง หนึ่งที่ทำให้ Twitter เป็นที่นิยมเพราะมันมี interface ที่เรียบง่ายและใช้งานง่าย เมื่อเรา ‘tweet’ มันจะเพิ่มอัตโนมัติโดยที่ไม่ต้องรีเฟรชหน้าใหม่ เมื่อไม่นานมานี้หน้า ‘trending topics’ทุกๆวินาที หน้านั้นจะแจ้งให้ user รู้ว่า หลายๆ tweets ได้อัrเดตเรื่องนี้เยอะ โดยจะโชว์เป็น topic โดยอัพเดตเป็นวินาทีๆเลยทีเดียว

Example: Twitter


5. Lightboxes instead of pop-ups


เด๋วนี้หลายๆคนใช้ Pop-up blockers และอีกผลสำคัญก็คือเพราะมันน่ารำคาญ การใช้ light boxes
เป็น pop-ups ในหน้าเว็บ pop-up blocker ไม่สามารถหยุดมันได้ และมันไม่สร้าง ความรำคญให้กับผู้ใช้อีกด้วย บางคนใช้มันเพื่อโชว์รูปหรือขยายรูปให้ใหญ่ขึ้น และสามารถใช้เป็นกล่อง login หรือสมัครสมาชิกก็ได้

Example: Logo Sauce
Plugin: Lightbox Plugin

Credit : http://www.noupe.com/ajax/how-ajax-works.html