จัดการเรื่องหลังของ ajax อย่าปล่อยให้มันลอยนวล

กลับมาตามสัญญากับ บทความ jQuery วันนี้จะมาพูดถึงเรื่อง Ajax กันสักเล็กน้อย สมัยนี้แล้ว Ajax มันเป็นพื้นฐานของ Web Developer ไปซะแล้ว เพราะมันง่ายแล้ว ก็ไม่มีอะไรซับซ้อนอีกต่อไป เพราะว่าเรามี Tool ดีๆ ไว้ทำงานเยอะ นั่นเอง
แต่ว่า...
จะมีใครมองไปถึงรายละเอียดเล็กๆ น้อยๆ ของมันแล้วทำการปรับปรุง คุณภาพการใช้งานให้ดีขึ้นรึเปล่า นั่นเป็นอีกเรื่องนึง ที่มักจะถูกมองข้าม
ซึ่งจริงๆแล้วปัญหา ของมันก็พอจะมีให้เห็นอยู่หลายๆส่วน ซึ่งที่ผมจะมาเล่าวันนี้ เป็นเรื่องของเทคนิคล้วนๆ ไม่ใช่ปัญหา แบบที่เป็น ปัญหาทางอ้อม อย่างพวก SEO หรือ Pageviews อะไรแบบนั้นนะ ไอ้นั่นผมเถียงมาจนเบื่อละ -*-
ปัญหาที่มักจะพบบ่อยก็คือ Request ค้างบ้าง, ทำงานตอบสนองไม่ได้บ้าง, หรือว่าโดนยิง Request จาก Clients โดยไม่เจตนาบ้าง
ปัญหาเหล่านี้ มันไม่ใช่ปัญหาอะไรใหญ่อะไร แต่ถ้าแก้ไขได้ มันก็ดีไม่ใช่เหรอ ??
ซึ่งอันที่จริงแล้วปัญหานี้ผมนึกขึ้นมาได้ตอนที่ทำ Ajax Gallery เล่นๆ ตัวนึง เพื่อนๆ ลองนึกภาพตามผมถึงธรรมชาติของ User ในการเปิดดู Gallery นะครับ ผมจะลองเรียงลำดับมาให้ ตามด้านล่างนี้ ...
1. ทำการเปิด Albums
2. ทำการเปิด Photos ใน Album
3. ทำการเปิด Photo จาก Photos
4. ทำการ Back กลับไป กลับมา
(ดูที่ S ด้วย)
จะสังเกตุได้ว่า มันมีช่วงการทำงาน ซ้ำซ้อนที่เราต้องเปิด Connection ใหม่ ไปให้ Ajax ทำงานอยู่เสมอๆ อาทิเช่น
ผมเปิด Album ที่มีชื่อว่า "Miyabi" พอผมเข้าไปดูจนถึงภาพที่อยากจะดู พอจะออกมา List Thumnails ใหม่ มันก็กลับมาที่เดิม อะไรแบบนั้น มันเป็นการทำงาน "ซ้ำ"
แล้วมันไม่ใช่มีแค่นี้มันมีเยอะมากๆ เรียกได้ว่า 70-80% ของระบบแบบนี้ เป็นการ Request ที่สิ้นเปลืองโดยใช่เหตุ
ทีนี้มันก็จะมีปัญหาตามมา อาทิ ...
1. Queue ค้างทำงานไม่ทัน Browser Stop ไปซะดื้อๆ โดยเฉพาะ Browser โง่ๆ อย่าง ไอ้อี หรือ แม้ตัวที่ แดก Ram หนักๆ อย่าง หมาไฟ
2. มันเหมือนเปิดทางให้ Client เข้ามายิง Server แบบ "เชิญเลยๆ" ยังไงก็ไม่รู้ ถึงจะมี Proxy ดักไว้ก็เหอะ
3. มันทำให้ User ต้องรอ ทั้งที่ของ ที่จะได้มันตัวเดิมชัดๆ เหมือนทำของหาย แล้วไปซื้อของแบบเดิมกลับมา มันไม่ใช่ๆ 5555+
เอาล่ะ เริ่มไม่มีเหตุผลที่จะเกริ่นละ ล่อซะยาวเลยกรู -*-
เข้าเรื่องเลยละกัน....
หลังจากที่ผมเจอปัญหาแบบนี้ ก็เลยลองเขียน Plugin ตัวนึง เพื่อที่จะเอามา Cache Results ไว้ใน Object ของ JavaScript อีกที แต่พอเขียนไปได้ครึ่งๆ กลางๆ ก็เกิดฉลาดขึ้นมากะทันหัน แล้วคิดได้ว่า
แค่นี้กรูยังคิดได้ คนในโลกมีตั้งเยอะ มันคงคิดเหมือนกรูบ้างล่ะน่า
คิดได้แบบนี้ปุ๊บ ยกเลิกโปรเจค ใช้วิธี Google เอาแทนเลย 555+
แล้วก็ตรงเป๊ะๆ หาได้มาเพียบ ก็ลองเทสๆเล่นๆ สัก 2-3 ตัว ซึ่งทุกตัวใช้เทคนิคเดียวกันหมด คือไปเขียน Override Ajax เดิมของ jQuery แล้วมันก็เข้าท่าดีซะด้วย เพราะว่า ไม่ต้องไปทำความเข้าใจอะไรมากมาย
สุดท้ายก็มาลงเอยกับพระเอกของเราในวันนี้
AJAX Queue/Cache/Abort/Block Manager v. 3.0
ซึ่งความสามารถของ Plugin ตัวนี้ก็มีเยอะเลยครับ (เพราะเค้าเอาตัวอื่นมาพัฒนาต่อรวมๆกัน) อาทิเช่น
1. ทำการ Cache Response ไว้ใน Object ซึ่งสามารถตั้ง Key
2. สามารถ ทำการจัดการ Queue ยกเลิก Queue, เคลียร์ Queue ก่อนหน้า ตั้ง Max Request ได้
3. สามารถจัดการกับพวก Double Request หรือว่า กดจิ้มๆๆๆๆๆๆ มาได้
ซึ่งโดยส่วนตัวผมค่อนข้างพอใจมากกับ jQuery Plugin ตัวนี้ แต่.....
มันก็ยังไม่สุดทางของมันครับ คือมันทำงานโดยรวมได้ดี แต่ถ้าแยกออกไปเป็นอย่างๆ ยังมี plugin ตัวอื่นๆ ที่มีความสามารถสุดทางของมันอยู่ อาทิเช่น
ถ้าจะทำเรื่อง Cache Result อย่างเดียว อันนี้เหมาะกว่าครับ
เพราะนอกจากมันจะ ทำ Cache ได้แล้ว มันยังตั้ง Time left ได้ด้วยว่าจะให้หมดอายุเมื่อไหร่ แถมยังสั่ง delete ตาม key ได้ด้วย
แต่ยังไงผมก็ไม่ได้เอาไปทำงาน ถึงขนาดนั้น ฉะนั้น Ajax Manager ตัวนี้น่าจะเป็น คำตอบที่ดีที่สุดสำหรับผมครับ ^^

9 comments