จากชื่อเต็มของมัน จะสังเกตว่ามีคีย์เวิร์ด 2 ตัวคือ
- (Asynchronous) JavaScript
- XML
ก็คือการใช้ JavaScript แบบ Asynchronous (แบบคำสั่งไม่เป็นลำดับขั้นหรือไม่ sync. กัน) และใช้ XML ด้วย
งั้นลองคิดว่าเรากำลังเล่นเว็บอยู่ แล้วเราอยากกดลิงค์ไปอ่านหน้าต่อไป จากหน้า 1 ไปหน้า 2
ขอเทียบการที่เบราเซอร์สามารถแสดงผลเนื้อหาเว็บเป็นคนละกัน มีคน 2 คนกำลังยกป้าย (เว็บ) “เบอร์1” เอาไว้
จากนั้นเราก็บอกได้เจ้าสองนายนี่ไปหยิบป้าย “เบอร์2” ซึ่งมันถูกเก็บอยู่ในบ้านที่ชื่อว่า Server มาให้หน่อย
เจ้าคนแรกเมื่อได้ยินดังนั้น มันก็ทิ้งป้ายที่มันถืออยู่ทันทีเพื่อจะเดินกลับไปเอาป้ายเบอร์ถัดไปในบ้าน Server ในจังหวะนี้ เราจะไม่เห็น Content ของป้าย “เบอร์1” เพราะคนถือมันวิ่งไปโน่นแล้ว
กลับกัน สำหรับคนถือป้ายที่ใช้เทคนิค Ajax! (ถือป้ายก็ต้องมีเทคนิคนะ ฮา) ก็ได้เรียกผู้ช่วยมาอีกคนนึง แล้วเขาก็จะใช้เจ้าผู้ช่วยคนนี้ให้เดินไปเอาของให้หน่อย นั่นคือป้าย “เบอร์2” นั่นแหละนะ
ถ้าคุณดูฝั่งที่เป็นแบบธรรมดา ตอนนี้ก็จะไม่เห็นอะไร (เทียบกับเว็บก็เป็นช่วงที่หน้าเพจกลายเป็นสีขาวในช่วงรอโหลด ซึ่งเราเรียกว่ามัน “กระพริบ” นั่นเอง)
แต่สำหรับฝั่ง Ajax เราจะยังเห็นหน้าเพจเก่าอยู่ (จะขึ้นเป็นสัญลักษณ์ now loading กลมๆ หมุนๆ หรืออย่างไรก็ขึ้นก็การเขียนของเว็บ-โปรแกรมเมอร์เจ้านั้นแล้ว)
แล้วทั้งสองคนก็กลับมา! กลับมาเร็วแค่ไหนก็ขึ้นกับความเร็วเน็ตของคุณนะๆ ลองดูในรูปดีๆ ว่าฝั่งของการโหลดแบบธรรมดานั่นจะถือกลับมาทั้งหน้าเลย กลับกับแบบ Ajax ที่เอากลับมาเฉพาะข้อมูลที่ต้องการก็พอ
นายคนที่เดินกลับไปโหลดแบบธรมดากลับมาถึงปุ๊บก็ทำการชูป้ายขึ้น จังหวะนี้เราจะเห็นว่าเพจ “เบอร์2” ถูกโหลดเสร็จแล้ว
ฝั่งนายที่เรียกใช้ผู้ช่วย เมื่อผู้ช่วยกลับมาถึง (ไม่รู้นะว่าจะกลับมาถึงเมื่อไหร่ แต่เมื่อกลับมาถึงเดี๋ยวผู้ช่วยก็จะส่งข้อมูลให้มันเอง) ก็ส่งข้อมูล Content ของหน้าเพจให้ เราก็จัดการลบ “1” ออกไปจากหน้า แล้วเอา “2” แทนที่ลงไปซะ ไม่ต้องเปลี่ยนทั้งเพจ “เบอร์1” ให้กลายเป็น “เบอร์2”
ที่มา : http://www.tamemo.com/post/37/how-to-ajax-1/
ไม่มีความคิดเห็น:
แสดงความคิดเห็น