กลับมาตามสัญญากับ บทความ jQuery วันนี้จะมาพูดถึงเรื่อง Ajax กันสักเล็กน้อย สมัยนี้แล้ว Ajax มันเป็นพื้นฐานของ Web Developer ไปซะแล้ว เพราะมันง่ายแล้ว ก็ไม่มีอะไรซับซ้อนอีกต่อไป เพราะว่าเรามี Tool ดีๆ ไว้ทำงานเยอะ นั่นเอง

แต่ว่า...

จะมีใครมองไปถึงรายละเอียดเล็กๆ น้อยๆ ของมันแล้วทำการปรับปรุง คุณภาพการใช้งานให้ดีขึ้นรึเปล่า นั่นเป็นอีกเรื่องนึง ที่มักจะถูกมองข้าม

ซึ่งจริงๆแล้วปัญหา ของมันก็พอจะมีให้เห็นอยู่หลายๆส่วน ซึ่งที่ผมจะมาเล่าวันนี้ เป็นเรื่องของเทคนิคล้วนๆ ไม่ใช่ปัญหา แบบที่เป็น ปัญหาทางอ้อม อย่างพวก SEO หรือ Pageviews อะไรแบบนั้นนะ ไอ้นั่นผมเถียงมาจนเบื่อละ -*-

ปัญหาที่มักจะพบบ่อยก็คือ Request ค้างบ้าง, ทำงานตอบสนองไม่ได้บ้าง, หรือว่าโดนยิง Request จาก Clients โดยไม่เจตนาบ้าง

ปัญหาเหล่านี้ มันไม่ใช่ปัญหาอะไรใหญ่อะไร แต่ถ้าแก้ไขได้ มันก็ดีไม่ใช่เหรอ ??

ซึ่งอันที่จริงแล้วปัญหานี้ผมนึกขึ้นมาได้ตอนที่ทำ Ajax Gallery เล่นๆ ตัวนึง เพื่อนๆ ลองนึกภาพตามผมถึงธรรมชาติของ User ในการเปิดดู Gallery นะครับ ผมจะลองเรียงลำดับมาให้ ตามด้านล่างนี้ ...

จริงๆ ขี้เกียจจะอัพมากๆ ที่ไม่อัพเพราะว่า เร็วๆ นี้ jQueryTips.com กำลังจะย้ายบ้านอ่ะ สาเหตุหลักๆ ที่ผมไม่อัพเลย ในหลายเดือนที่ผ่านมา เพราะกำลัง จะย้ายบ้านนี่แหละ แล้วก็บ้านใหม่ไม่ใช่ WordPress, Drupal หรือ Free CMS อะไรพวกนี้แล้ว แต่เป็น app ที่เขียนเองครับ ทุกชิ้น ทุกขั้นตอนผลิตเองทั้งหมด แล้วก็ที่สำคัญไม่ได้ผลิตมาใช้ คนเดียว แต่เป็นลักษณะ Multi Users ซึ่งความสามารถไม่แพ้ cms พวกนี้แน่นอน บอกได้แค่นี้แหละ เดี๋ยวไม่ลุ้น

แต่ที่วันนี้ต้องมาอัพเพราะเดี๋ยวกลัวตัวเองจะลืม ผมใช้ jQueryTips แห่งนี้เป็นเหมือน สมุดช่วยจำส่วนตัวน่ะ อิอิ

เคยรู้สึกรำคาญมั้ยครับ กับเวลาที่เราจะทำงานกับ element ก้อนเดียวแต่มันมีหลาย actions ซะเหลือเกิน เช่นกด class นี้วิ่งไปนี่ กดอีก class นึง วิ่งไปทำงานอีกแบบนึง เอาล่ะ สมมุติก่อน

สมุมุติผมมีก้อน element ก้อนนึง ซึ่งภายในก้อนนั้น มีทั้งปุ่ม zoom, delete, edit แต่มันอยู่นก้อนเดียวกันนั่นแหละ แถมไอ้ function พวกนี้มันยังทำงานจากที่อื่นได้อีกแหนะ ดังนั้น แทนที่ผมจะเขียนแยกออกเป็น 3 events ผมก็จะเขียนเหลือ แค่ event เดียวแบบนี้

เอาล่ะๆ มาแล้ว หลังจากได้รับ e-mail จำนวนนึง ไปบ่น ว่า "ทำไมไม่อัพเดทเลย" บางคนเขียนมาสอบถามอาการนึกว่าผมป่วยด้วยซ้ำ 555++ ก็เลย คิดว่าจะมาอัพเดท สักบทความนึง

จริงๆ ช่วงนี้ก็ยังไม่ค่อยว่างนักหรอก แต่ กลัวคนจะคิดว่า หายไปไหน จะทิ้งเว็บนี้เหรอ ก็เลยคิดว่า มาอัพเดทสักหน่อย ดีกว่า

สำหรับเรื่องที่จะมาบ่นวันนี้ เป็นคำสั่งนึงใน jQuery ครับ ซึ่งผมคิดว่ามันมีประโยชน์ดี คำสั่งนั้นคือ "data" นั่นเองครับ ปกติเวลาเราจะทำค่า hidden หรือฝากค่าไปกับตัวแปร javascript ที่เป็นลักษณะชั่วคราว เก็บไว้เปรัยบเทียบอ้างอิง ก็มักจะเขียนเช่น

jQuery เป็น JS Framework ซึ่งมีวิธีการเขียนค่อนข้าง่าย และมี syntax ที่ไม่ซับซ้อน รวมไปถึง selectors ที่เตรียมมา เรียกได้ว่า "สมบูรณ์" เลยทีเดียว ทั้งยังมีการ update ที่ต่อเนื่อง และการเอาใจใส่ จากทีมพัฒนา

ด้วยเหตุนี้เราจึงเห็นได้ว่า plugin ของ jQuery มีมากกว่า plugin ของ JS Framework ตัวอื่นๆ อย่างเทียบไม่ติด และ คนเขียน blog กับมันก็มีไม่น้อย

ครั้งก่อนหน้านี้ผมเคยแนะนำวิธีการเช็ค iframe ว่าโหลดเสร็จรึยัง ไปทีนึง แต่ว่า วันนี้ผม จะแนะนำ อีกแบบก็คือ การเช็คหลังจากที่เราเพิ่ง แก้ไข attribute บางอย่างลงไป

ใช้งานกับ Iframe

$('#myIframe').attr('src', 'somecontent.html').load(function() {

    alert('Iframe Loaded');

});

ใจจริงนั้น วันนี้ขี้เกียจอัพเดทมากๆ แต่นี่ก็ใกล้จะหมดเดือน เมษาแล้ว และถ้าอัพบทความนี้สำเร็จ ก็จะกลายเป็นเดือน ที่มีบทความอัพเดทมากที่สุด นั่นก็คือ "11 บทความ" เรียกว่าเป็นการทำลายสถิติ ตัวเอง นั่นเอง 555+

นานมาแล้วครั้งนึงผมเคยแนะนำ plugin ของ jQuery ที่ชื่อว่า Really Simple Validation ซึ่งก็เอาไว้ใช้ทำงาน validate ข้อมูลจาก Form เป็นตัวที่ค่อนข้างจะใช้งานง่ายมากเลยทีเดียว

แต่ในชีวิตจริงผมไม่ค่อยจะใช้ตัวนั้นหรอกครับ ตัวที่ผมใช้มันคือ ตัวนี้ครับ แต่ด้วยความที่มัน ฉลาดและมากความสามารถ แน่นอน มันต้องทำให้ผมเหนื่อยในการที่จะ่ายทอดออกมาแน่ๆ เลยเพิ่งจะมาขยันเอาตอนนี้แหละครับ

สำหรับ validation plugin ตัวนี้นั้น สามารถที่จะ ตรวจเช็ค ข้อมูลได้หลาย แบบมากๆ เรียกว่าทุกแบบเลยดีกว่า เพราะมันเขียน condition เติมเองได้ รวมไปถึงการ remote เพื่อใช้ตรวจสอบ พวกชื่อ username, email, captcha ได้โดยไม่ต้อง มีการเปลี่ยน page แต่อย่างใด

ทั้งยัง config การแสดง valid, invalid ข้อความ ได้อย่างสวยงาม แต่ว่า ผมคงไม่อธิบายหมดหรอก มันเยอะจัดเลย เหนื่อยนะ เอาแค่พอใช้งาน ได้ไปศึกษาต่อได้ก็พอแล้วล่ะ มาเริ่มกันเลยดีกว่า เริ่มจะง่วงนิดๆ ละ...

ขึ้นหัวข้อมาแบบนี้ ไม่ได้ตั้งใจจะหัดให้เพื่อนๆ เป็นคนขี้เกียจกันนะ แต่ต้องยอมรับก่อนว่า ที่ผมมาเขียน jQuery แทน Javascript แบบปกติ นั้น เป็นเพราะ Syntax มันที่สั้นและสะดวกสะบาย เป็นที่สุด จาก 100 บรรทัด บางทีลดเหลือ บรรทัดเดียวหน้าตาเฉย นี่ล่ะผมเลย ใช้ jQuery มาตลอด

และวันนี้ผมก็จะมานำเสนอ วิธีเขียน jQuery ให้มัน optimize และ สั้นสุดๆ โดยไม่เสีย ความตั้งใจ ในการทำงานของเราไป ลองมาดู วันนี้ผมมีอะไรมาให้ ชิม !

Trigger เป็นส่วนนึงใน Events ของ jQuery โดยอยู่ในหมด event handing

ถ้าจะให้อธิบาย ตาม manual ของ jQuery กันเป๊ะ ผมว่าคงมึนกันเป็นแถบๆ ดังนั้นผมจะขออธิบาย ในภาษาของผมเองก็แล้วกัน 555+

trigger ในภาษาอื่นๆ เช่น SQL การทำงานของมันก็คือ เป็นตัวบ่งบอกว่า จะทำอะไร ก่อน หลัง หรือ ช่วงไหนก็ตาม หลังจากที่มีเหตุการณ์ หรือ ก่อนที่จะมีเหตุการณ์ เกิดขึ้น เช่น

ผมจะบอกว่า ก่อน กินข้าว ให้แปรงฟันก่อน หรือ หลังกินข้าว ให้ล้างจานด้วย หรือ ระหว่างกินข้าว ให้ใช้ข้อนกลาง ยังไงยังงั้นแหละ

trigger ใน jQuery ก็ไม่ได้ต่างกันเลย ลองมาดูตัวอย่างง่ายๆ กันก่อน

มาอัพเดทต่อๆ วันนี้จริงๆว่าจะนอนแล้วล่ะ เหนื่อยๆ ง่วงๆ เพลียๆ มึนๆ ยังไงชอบกล แต่เอาว่า อยากได้ keyword "AJAX" ก็ต้องขยันอัพกันนิดนึง เพราะผมเชื่อในเรื่อง Content is the King เลย พยายมๆ สร้าง Unique Content ที่มีคุณภาพขึ้นมา ^^

วันนี้เราลองมาประยุกต์ใช้ ajax ในการทำ auto save ดีกว่า จริงๆ plugin แบบนี้ ถ้าหาดูจาก Google ก็จะเห็นอยู่ 2-3 ตัว มีทั้งแบบ save ลง Cookie หรือ ส่งไปทำงานตาม url ที่เรากำหนด พร้อม function restore มาเสร็จสรรพ

แต่เนื่องจากวันนี้ผมไม่ได้มา review แต่จะมาอธิบายถึง การประยุกต์ใช้งาน ajax ใน jQuery กัน เลยจะขอลองเขียน plugin แบบ simple ขึ้นมาใช้งานเองกัน เอาแบบง่ายๆ พอเป็นพิธีก็พอ

การทำ Autosave นั้น ก็คือการส่งข้อมูลไป save เป็นระยะๆ ทั้งๆ ที่เรายังไม่ได้กด save เลย โดยการทำแบบนี้ ก็มีข้อดีของมันดังนี้ครับ

1. ช่วยให้ข้อมูล ไม่หายในกรณี ไฟดับ คอมแฮงค์ หรือปัญหาที่ เรียกได้ว่าเป็น อุบัติเหตุ ทางเทคนิค

2. ช่วยเรื่อง session timeout ในกรณีที่ set timeout ของช่วงเวลา login

3. เท่ห์ ....

เอาล่ะ ทีนี้เรามาลองเขียน plugin ง่ายๆกัน สักตัวนึง

หลังจากประสบความสำเร็จ กับ 2 keywords หลัก jQuery และ codeigniter ในผลการค้นหาจาก Google ในหน้าภาษาไทย โดยได้อันดับที่ 1 และ 6 ตามลำดับ ตอนนี้จะขอมาเล่น keyword ต่อไป คือคำว่า "AJAX" ซึ่งตอนนี้ยังไม่มีตำแหน่งใดๆ เลย ฮ่าๆๆ

แต่ด้วยจำนวนคู่แข่งที่มีเพียง 375,000 เท่านั้นเอง เลยคิดว่า ไม่น่าจะยากเย็นอะไร โดยเป้าหมายไม่ได้หวัง ถึงอันดับ 1 ขอแค่หน้าแรกได้ก็ดีใจละ ดังนั้นเอาเป็นว่า บทความในวันนี้จะขอ พูดเรื่อง ajax เลยละกัน

หลายๆ คนที่ใช้ ajax ใน jQuery ก็คงจะรู้แล้วว่ามันง่ายแสนง่ายเพียง ไหน ไม่ต้องมาเสียเวลาเขียนโคด 30-40 บรรทัด เพียงแค่บรรทัดเดียวก็ วิ่งฉิว สบายใจเฉิบแล้ว