jQueryTips by Tee++;

  • Home
  • Videos
  • jQueryTips's Fans

Coding like playing a piano.

Subscribe RSS

Search

Search

Sponsored

jQueryTips on Social

Followers

hide
Chainnnn Pang25441 Dexteri@n Ton KanexKane Supachai JustDoIt Rut petchy Tophit anndrew Webmaster

Categories

hide
  • Programing
  • Database
  • Framework
  • Mobile Development
    • Titanium Mobile
    • PhoneGap
  • Life

Tag Cloud

hide
PHP JavaScript MySQL XML Mobile jQuery CodeIgniter Hash php xml Debug Library Zend API Events Plugins Facebook Basic Registration Tool Twitter Search Swath Performance ffmpeg YouTube Web Service Yahoo! NoSQL MongoDB PhoneGap

Recent Posts

hide
  • ใครๆ ก็มี Utils เอางี้เราเพิ่ม Utils ให้กับ CodeIgniter กันบ้าง
  • แนะนำ JS.Class (A JavaScript class library)
  • PHP กับ OOP มาปูพื้นฐานกันเสียใหม่ก่อน
  • ประกาศข่าวสารจาก Admin
  • JSFIDDLE สุดยอด Tools สำหรับการ Debug การเขียนตัวอย่างโคด
  • Titanium Mobile + HTML + Native Scrolling
  • HTML to PDF ตัวไหนดี วันนี้ผมมีคำตอบ ...
  • ทำความรู้จักกับ JavaScript Pattern ในเชิงลึก
  • ผมบอกคุณแล้ว .... คนโง่ก็ Code ได้
  • วันนี้ มาออกแบบ Web Service ด้วย PHP กันเถอะ (CodeIgniter Version)

Recent Comments

hide
  • เยดดดด
  • มีตัวอย่าง CI แบบ เพียว ๆ ไหมครับ
  • ขอบคุณมากครับ เห็นแนวทางได้ชัดขึ้นจากตอนแรก ที่งงไปหมด ไม่รู้อะไรเป็นอะไร
  • ขอบคุณมากเลยครับท่าน....แหม่เพิ่มกำลังใจให้ผมได้เยอะเลย ตอนนี้กำลังฝึกงานอยู่ที่แห่งนึงในหาดใหญ่ พร้อมเด็กจากอีกสถาบันนึง 3 คน เราคิดว่าเรา…
  • Very good blog, I really like ~

Links

hide
  • OSCOOL
  • Architeture & Performance
  • Video and TV
  • Appcelerator
  • PhoneGap
  • Home
  •  » Blogs

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

Feb 8, 2011 11:59:48 PM | 9 Comments | in Programing | jQuery

กลับมาตามสัญญากับ บทความ 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 อย่างเดียว อันนี้เหมาะกว่าครับ

jCache

เพราะนอกจากมันจะ ทำ Cache ได้แล้ว มันยังตั้ง Time left ได้ด้วยว่าจะให้หมดอายุเมื่อไหร่ แถมยังสั่ง delete ตาม key ได้ด้วย

แต่ยังไงผมก็ไม่ได้เอาไปทำงาน ถึงขนาดนั้น ฉะนั้น Ajax Manager ตัวนี้น่าจะเป็น คำตอบที่ดีที่สุดสำหรับผมครับ ^^

twitter stumbleupon delicious digg facebook

9 comments

Add comment Load previous All comments

Leave a comment

Post Comment

Powered by OSCOOL. You may view this on RSS or ATOM.

OSCOOL

  • Twitter
  • Facebook
  • Next