R i j j y -[a x k i z e l]

อุ้ย อ๊าย~ ดีใจจริงๆ ที่มีคนสนใจอยากให้เขียนเรื่อง ajax เร็วๆ ด้วย
entry นี้ผมขออุทิศให้กับ ajax แล้วกันน่อ ^[]^/ อ่ะๆ แต่มีแถมท้ายด้วย color scheme นะครับ ^^ เป็นประโยชน์มาก ผมเลยขอรวมไว้ด้วยกัน

Ajax หนอ AJAX
ajax ไม่ได้อ่านว่า อะ-แจ๊ะ หรือ อะ-แจ๊กซ์ แต่อ่านว่า เอ-แจกซ์

แล้วมันมีประโยชน์อะไร ทำไมต้องรู้จักด้วย?

นั่นก็เพราะมันแจ่มมากน่ะสิคุณ ทำไมมันถึงดี? เคยเข้าเว็บบางเว็บที่ไม่มี flash แต่คุณรู้สึกว่ามันแจ่มจัง กดรูปแล้วเด้งขึ้นมาเลยไหม? เคยสังเกตไหมครับ หรือเว็บที่มีภาพ มีเมนู แจ่มๆ เวลาเอาเมาท์ชี้ หรือ คลิก แล้วภาพเด้งไปข้างๆ เมนูเด้งขึ้่นลง แบบสวยๆ เฮ้ย! เค้าทำได้ไง? css เหรอ? java เหรอ?

อ่ะๆ ส่วนหนึ่งทำได้ด้วย java+css ครับ แต่ส่วนใหญ่ที่เห็นแล้วมันแตกต่าง มันแจ่มจอร์จมาก มันไม่เหมือนใคร แต่มีคนเหมือน แต่ไม่ได้หมายความว่านั่น AJAX นะครับ เอิ๊กๆ งงกันใหญ่ ตกลงริจจะบอกอะไรกันแน่ ก่อนรู้ว่าผมต้องการบอกอะไร อ่านแล้วงง เข้าเรื่องกันก่อนนะครับ

AJAX เป็นอีกรูปแบบหนึ่งของ script ที่ใช้เพื่อพัฒนาเว็บให้ดูมีความ interactive มากขึ้น เป็นการผสมผสานระหว่าง XML และ JavaScript เว็บมาสเตอร์ส่วนใหญ่ (อ่า ส่วนใหญ่นั่นแหละเนอะ) นำ ajax มาช่วยในการตอบสนองกับผู้ใช้ จากบทความเรื่อง php ผมบอกว่า php มีการตอบสนองต่อผู้ใช้มากกว่า html แต่ ajax มีความวิลิศมาหรากว่าเยอะครับ ตอบสนองต่อผู้ใช้ได้ดีกว่า ลูกเล่นเยอะกว่า การส่งข้อมูลกับ server ก็รวดเร็ว เพราะไม่ต้องรอ server เค้นกำลังประมวณผล เค้าเรียกว่าทำงานแบบ Asynchronous คือ browser + sever ไม่ต้องมาตบตีแย้งชิงส่งข้อมูลกันเหมือนก่อน (ลดการสื่อสารระหว่างคนขายงานกับคนทำงานลง 555 เขียนเองขำเอง แซวนิดๆ ไม่ต้องจำนะครับ เหอๆ) แถมการโหลดก็ใช้เวลาน้อยนิด ดีดนิ้วเปาะ! (ถ้าเน็ตเร็ว) ก็แปบๆ เอ๊ะ! เสร็จแล้วเหรอ ไม่ทันรู้ตัวเลย (แต่เผอิญกำลังรอโหลดภาพอยู่ก็ช้ากันไป 555)

(อ่านแล้วรู้สึกถึงสาระอันน้อยนิดในไร้สาระอันบานเบอะรึเปล่าครับ ><")

อีกนิดนะครับ บางแหล่งบอกว่า ajax มาจาก

JavaScript
XML
HTML
CSS

รวมกันกลายเป็น AJAX นั่นก็ไม่ผิดครับ เพราะรูปแบบ AJAX เป็นอย่างนั้นจริงๆ แถมเอาไปใช้กับ ASP , PHP ก็ได้สบายแฮ~

หากคุณอยากรู้ว่า ajax กำเนิดจากอะไร ใครเป็นคนคิดค้น ประวัติที่มาอย่างไร ก็หาได้ตาม google หรือ wikipedia ทั่วไปครับ  

สรุป ถ้าสนใจก็หาโค้ดมาลองใช้กันฟรีๆ ได้ที่ http://freeajaxscripts.net/ อันนี้แนะนำนะ 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

AJAX Scripts มีอะไรน่าสนใจบ้าง?

อันนี้อยู่ที่ว่าคุณชอบแนวไหน อยากเอาไปใช้กับอะไร? แต่ที่ผมอยากแนะนำเด่นๆ นะครับ พวกเกี่ยวกับรูปภาพ ถ้าคุณทำเว็บแสดงผลงาน gallery ของตัวคุณเอง อยากให้มันวิลิศมาหราล่ะก็ เอา ajax เข้ามาช่วยเถอะครับ

menu เอา ajax มาใส่ก็ ลั่ล ล้า สุดๆ

form ก็ใส่ ajax ได้นะ ><

shopping carts! ตะกร้ารถเข็น ajaX aJax ก็มี

rss ใส่ ajax ก็สุดยอด

สรุปว่า อยากได้อะไรต้องลองครับ มีหลายเว็บที่แจกสคริป AJAX แต่เว็บที่ผมแนะนำไว้นั้น ผมชอบเข้ามากที่สุดแล้วครับ ผมอยากให้คนที่สนใจลองเล่นกันดูนะครับ แล้วคุณจะติดใจกับ ajax แม้คุณจะไม่เข้าใจ JavaScript ก็ตาม แต่เอามันไปใช้งานได้ก็แล้วกันเนอะ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

AJAX ทำงานยังไง?

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

หน้าร้านลูกค้าเข้าร้านสั่งอาหาร -> พนักงานเสิร์ฟรับ order อาหาร -> พ่อครัวประมวณผลว่าอาหารจานั้นต้องทำยังไง -> วัตถุดิบในการทำอาหาร -> พ่อครัวทำอาหารเสร็จแล้วหอมฉุยเลย -> พนักงานเสิร์ฟรับอาหารไปส่ง -> ลูกค้ากินอร่อยเหาะ! โอ้ว~ ร้านนี้แจ่มไว้มาอีกคราวหน้าแน่นอน

อ่านแล้วไร้สาระดีเนอะครับ 55 แต่มันก็คล้ายๆ กันแหละ แต่ขั้นตอนการทำงานของ AJAX แบบเต็มรูปแบบเป็นยังไง ผมไม่พลาดที่จะนำมาให้ผ่านสายตากันแน่นอน (ไม่สนใจอะไรมากก็ผ่านไปได้ครับ)

User Interface (JavaScript Call)->XMLHttpRequest (HTTP Request)-> Web Server (data exchange)-> datastores (data exchange)-> Web Server (XML DATA)-> XMLHttpRequest (HTML & css data)-> User Interface

กระอักกระอ่วงกันไหมครับ จริงๆ เป็นเรื่องควรใส่ใจกับมันไว้หน่อยก็ดี เพราะคือพื้นฐานการทำงานของ AJAX ที่ควรรู้ไว้

การเขียนคำสั่งเป็นแบบ javascript ครับ แต่ผมไม่ถนัด Java เพราะงั้นไม่ต้องพูดถึงโค้ด ผมพอแกะออกแต่เขียนไม่ได้ จึงได้แต่ใช้ฟรีสคริปอยู่ร่ำไป 555 (เวลาต้องใช้งานก็มาทำความเข้าใจมันทีนึงน่ะครับ) 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

ถ้าคุณอยากรู้จัก AJAX แบบลึกซึ้งก็ต้องศึกษาการเขียน JavaScript และ XML ด้วยนะครับ สำหลับเว็บที่ผมอยากแนะนำเกี่ยว AJAX ตั้งแต่แรกจนเขียน AJAX ยังไงนั้นก็ต้องเว็บนี้เลย

W3Schools.com : AJAX Introduction

IBM : Mastering Ajax , Part 1 (อันนี้ part อื่นหาเอาเองนะครับ)

ที่ผมให้ไปล้วนแล้วแต่เป็นภาษาอังกฤษทั้งสิ้น หากต้องการภาษาไทยสามารถหาได้ โดยใช้ google + ความพยายาม หาเอานะครับ (แต่มีแน่นอนหาไม่ยากครับ)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Color Scheme

เอาไว้ใช้เลือกสีเพื่อใช้ในการออกแบบ หรืองานอื่นๆ เหมาะสำหรับเวลาคุณนึกไม่ออกว่า จะใช้สีนี้คู่กับสีอะไร ถึงจะออกมาดูดีนะ (ขอโทษที่ผมนึกคำภาษาไทยดีมาอธิบายไม่ออก)

ไอ้ color scheme เนี่ย ถ้าใครเคยเรียนทฤษฎีสีมา จะรู้เรื่องสีคู่ตรงข้าม แล้วในวงล้อสีเนี่ยก็จะมีการใช้สีัแบบ

Monochromatic color scheme

Analogous color scheme 

Complementary color scheme

Split-complementary color scheme

Tetradic color scheme

Neutral color scheme

Accented neutral color scheme 

ขอโทษที่ผมไม่ได้บอกความหมายว่าคืออะไร ผมไม่รู้จะอธิบายเป็นไทยง่ายๆ ยังไง แต่ไม่ต้องห่วงครับ หากสนใจเข้าไปที่

Wikipedia : Color Scheme 

หรือหาเกี่ยวกับเรื่อง "วงล้อสี" ใน google ก็ได้ครับ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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

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

^ กดที่ภาพข้างบนเพื่อเข้าสู่เว็บเค้าได้เลยครับ มีตัวอย่างสีัมากมายให้เลือกใช้

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

เวลาเซฟภาพพวกสีแบบนี้เก็บไว้ในเครื่อง ควรเซฟเป็นไฟล์ png เพราะความละเอียดของสีจะยังคงอยู่ ไม่ลอก 555 (บางทีเซฟแบบความละเอียดต่ำมันแตกไม่งามน่ะครับ)

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

ขอให้สนุกกับการเลือกใช้สีนะครับ ^^ 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Related Links

• [How to] วาดรองเท้า+รถไฟ
• เรียนรู้ php เบื้องต้น
• [How To] วาดเท้ายังไงดีนะ