jQuery-Ajax: Ajax in-depth

• Author: DeaR
• Filed under: Ajax, jQuery
• Date: Jan 20,2008

สวัสดีครับ กลับมาพบกันอีกครับนะครับ หลังจากที่ครั้งที่แล้ว ที่ได้พูดถึง Pre-Concept คร่าวๆ ว่า jQuery มันทำงานอย่างไร แล้วก็อธิบายตัวอย่างโปรแกรม ที่ผมได้ให้ไว้ในบทนำ (Introduction) ของ jQuery-Ajax นะครับ ครั้งนี้ผมจะมาขอพูดอีกครั้ง เกี่ยวกับ Ajax นะครับ ว่าการใช้ jQuery ในการทำ Ajax นั้น มีคำสั่งอะไรบ้าง และแต่ละกัน ใช้งานยังไง ไม่ยากครับ คิดว่าไม่น่ายาวด้วย แล้วครั้งหน้า ผมจะมาพูดถึงความสามารถอื่นๆๆๆๆๆๆๆ ของ jQuery ที่เพื่อนๆๆๆๆ จะต้องชอบ และอยากเล่นอย่างแน่นอน ก่อนอื่น ถ้าใครยังไม่ได้ download jQuery ไป download ก่อนได้เลยนะครับ ฟรฟดดรีครับ ตอนนี้พึ่งออก version ใหม่ด้วย อ้อ ที่ผมเขียนบทความนี้ จริงๆ ผมควรจะเขียนตั้งแต่ Basic ของ jQuery เช่น โครงสร้างของมัน เป็นต้น ก่อนนะครับ แต่ผมดันไปเขียนเรื่อง Ajax แล้ว ผมเลยต้องต่อให้มันจบก่อน แล้วผมค่อยเริ่ม jQuery นะครับ ถ้าหากเพื่อนๆอ่านแล้ว ทำไม่ได้หรือไม่เข้าใจ เดี๋ยวบทหน้า ผมจะมาเขียนเกี่ยวกับ jQuery อีกครั้งนะครับ ทีนี้เรามากันดีกว่า ว่า jQuery นั้นมีคำสั่งอะไรบ้าง ผมจะ list ให้ดูก่อนนะครับ ในส่วนของ Ajax นั้นจะแบ่งเป็น 2 ส่วนนะครับคือ Ajax Requests กับ Ajax Events

• Ajax Requests
  1. jQuery.ajax( options )
  2. load( url, data, callback )
  3. jQuery.get( url, data, callback )
  4. jQuery.getJSON( url, data, callback )
  5. jQuery.getScript( url, callback )
  6. jQuery.post( url, data, callback, type )
• Ajax Events (Global)
  1. ajaxComplete( callback ) หมายถึง เรียกใช้งานเมื่อ Ajax Request เสร็จสิ้นโดยไม่คำนึงว่า จะสำเร็จหรือไม่
  2. ajaxError( callback ) หมายถึง เรียกใช้งานเมื่อเกิด Error
  3. ajaxSend( callback ) หมายถึง เรียกใช้งานก่อนที่จะส่ง Ajax Request
  4. ajaxStart( callback ) หมายถึง เรียกใช้งานเมื่อมีการ Request โดยที่ยังไม่เคยมีการเรียกใช้ Ajax มาก่อน
  5. ajaxStop( callback ) หมายถึง เรียกใช้งานเมื่อ Ajax มีการหยุดการทำงานหรือไม่มีการเรียกใช้ Ajax อีก
  6. ajaxSuccess( callback ) หมายถึง เรียกใช้งานเมื่อ Ajax Request เสร็จ และสำเร็จสมบูรณ์ถูกต้อง

Read the rest of this entry »

5 Comments

jQuery-Ajax: Pre-concepts

• Author: DeaR
• Filed under: Ajax, jQuery
• Date: Jan 13,2008

สวัสดีอีกครั้งครับ เป็นอย่างไรกันบ้าง เรามาต่อกันเลยนะครับในบท Pre-concepts นะครับ (ผมตั้งเองหละครับ ไม่รู้จะตั้งอะไรดี) ครั้งที่แล้ว ผมได้ให้ดูตัวอย่างไปครับ สะดวกดีใช่เปล่าครับ ทีนี้ว่าทำยังไง

มาดูกันว่า Key Element มีอะไรกันบ้างที่มาเกี่ยวข้องกับการทำงาน
1. Javascript แน่นอนครับ มาใช้ในการควบคุมคำสั่งต่างๆ
2. CSS (Cascading Style Sheet) อันนี้ก็เช่นเดียวกัน มาใช้ควบคุมในการแสดงผล
3. DOM (Document Object Model) อันนี้ก็เช่นเดียวกันครับ เอาไว้ควบคุมว่า จะให้ทำงานกับ Element ไหน เช่น จะใช้กับ <div> ที่มี class เป็น showresult เป็นต้น
4. XMLHttpRequest Object อันนี้ อาจจะไม่เคยได้ยินกัน (สำหรับคนใหม่จริงๆนะครับ คิดว่าคนที่พออ่านมาบ้างแล้ว น่าจะรู้จักดี) อันนี้จะเป็น Object ครับที่ใช้ในการสร้าง Instance สำหรับติดต่อกับ Server

ที่ผมบอกมาข้างต้น แค่ต้องการให้เห็นว่า การจะใช้งานจริงๆ มีอะไรมาเกียวข้องบ้าง ควรจะมีความรู้เรื่องอะไรบ้าง โดยเฉพาะข้อ ４ จะค่อนข้างยากเลยครับ แต่ทว่า ในปัจจุบันได้มีผู้พัฒนา Framework ออกมามากมาย ทั้งฟรีและเสียตัง เพื่อประโยชน์และความง่ายต่อการใช้ของ XMLHttpRequest โดยแท้เลยครับ เช่น Prototype, MooTools, jQuery, GWT ของ Google, YUI ของ Yahoo และอื่นๆ อีกมากมายนัก ซึ่งเท่าที่ผมได้สังเกตจากหลายๆๆๆๆๆๆเว็บไซต์ในประเทศไทย ส่วนใหญ่มากกว่า 99% เลยครับ จะใช้ Prototype ซึ่งจริงๆPrototype ใช้งานค่อนข้างง่ายเลยทีเดียว ลักษณะการเขียนจะเขียนไปในทาง OOP (Object Oriented Programming) ซึ่งนักโปรแกรมเม่อย่อมรู้จักดีอยู่แล้ว ถึงข้อดีข้อเสียของมัน แต่ที่ผมจะมาแนะนำหรือสอน ผมจะสอน jquery นะครับ ซึ่งเท่าที่ดูมา แทบไม่มีคนใช้เลย ไม่ใช่มันไม่ดีนะครับ จริงๆแล้ว มันดีมากๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ เลยหละ ถ้าลองไปดูเว็บไซต์ของต่างประเทศ เราจะเห็นเลยครับว่า คนใช้ jQuery มากกว่า Prototype เยอะมากๆๆๆๆๆๆ เนื่องจากมีข้อดีมากกว่าหลายๆๆๆๆๆข้อ และที่สำคัญ มันสามารถทำ chaining ได้ ความหมายของ chaining ก็คือ สามารถใส่ effect ต่างๆ หรือคำสั่งต่างๆ แบบหลายๆคำสั่งต่อเนื่องให้กับ element หรือ DOM ที่เราเลือกได้ ซึ่งมีประโยชน์มาก ดังที่ท่านจะได้เห็น ในอีกสักครู่ (ถ้าไม่เห็น ก็อาจจะอยู่บทหน้านะครับ) อีกเหตุผลหนึ่งที่ผมเลือกที่จะเขียน jquery ก็เพราะว่าผม search ดูแล้ว รู้สึกว่าผมจะยังไม่เห็นใครเขียน(ภาษาไทยนะครับ)เรื่อง jQuery เลยครับ เท่าที่ดูส่วนใหญ่จะเห็นแบบ Original XMLHttpRequest และก็ Prototype ครับ ยังไม่เห็น jquery เลย อีกทั้งขณะนี้ก็ได้เริ่มมีหนังสือเกี่ยวกับ Ajax ออกมาบ้างแล้ว ซึ่งเท่าที่ดูก็มีแต่ Prototype นี่คือเหตุผลที่ผมเลือกเขียน jQuery ครับ

ซึ่งก่อนที่จะเริ่มทำการเขียน script จะต้องไป download jquery มาก่อนครับ ได้จากเว็บนี้เลย http://www.jquery.com ลืมบอกว่า jquery คืออะไร jquery เปรียบเสมือน Javascript ฉบับปรับปรุงนั่นเอง สามารถใช้งานได้ง่ายมาก

ร่ายมาซะเยอะเลย - -” คราวนี้ผมจะเอาตัวอย่างที่ได้ให้ดูคราวที่แล้วนะครับ มาให้ดูว่า ทำยังไง ซึ่งท่านเห็นแล้วจะบอกว่า สั้นอย่างนั้นเชียวหรือ !!! มาดู code กันเลยครับ ผมจะให้ดูของ ตัวอย่างที่ 1 ก่อนนะครับ

ส่วนแรก CSS
Read the rest of this entry »

4 Comments

jQuery-Ajax: Introduction

• Author: DeaR
• Filed under: Ajax, jQuery
• Date: Jan 1,2008

As introduced, I’m going to make a tutorial on Ajax (Asynchronous Javascript And XML) for everyone especially for Thai people. Therefore, after sometime in English here, I’ll be posting in Thai. So, let’s get started here.

ก่อนอื่นขอออกตัวก่อนนะครับ ว่าผมไม่ใช่ expert ในเรื่อง ajax หรือเรื่องที่ผมอาจจะสอนอื่นๆในอนาคตนะครับ เช่น ajax ผมได้ศึกษาหาความรู้เองทั้งหมดจาก internet และส่วนมากจะมาจากเว็บพวกภาษาอังกฤษ เนื่องจากยังไม่มีเว็บภาษาไทยที่ทำออกมาได้สมบูรณ์ จึงเป็นที่มาของการเขียนบทความนี้นะครับ บทความผมจะเน้นเนื้อหา และ ตัวอย่าง จะไม่ค่อยมีน้ำนะครับ ผมใส่น้ำไม่ค่อยเก่ง..

Ajax คืออะไร

Ajax stands for Asynchronous Javascript And XML, and is the main component of Web applications and Web 2.0 sites, and provides a simple mean to interact with the server. Ajax is using JavaScript, DOM and CSS…

Ajax ย่อมาจาก Asynchronous Javascript And XML ไม่ใช่เทคโนโลยีใหม่หรือ script ใหม่นะครับ แต่ใช้หลายๆ script มาทำงานพร้อมๆกันได้ เช่น Javascript & PHP เป็นต้นที่เป็นที่นิยมกันมาก แต่ไม่ใช่ว่าเราไม่มีความรู้ หรือว่ามีความรู้ javascript น้อยแล้วจะไม่สามารถใช้ ajax ได้ ไม่ใช่นะครับ เนื่องจากเดี๋ยวนี้ มี library หรือ framework ให้เราเลือกโหลดใช้มากมาย เช่น prototype, jQuery, Mootool, YUI, GWT เพื่อจะใช้ในการทำ ajax นี้ เนื้อหาในส่วนนี้เดี่ยวผมจะขอพูดในครั้งต่อไปนะครับ ครั้งนี้จะพูดถึง introduction แล้วก็ที่มาก่อนนะครับ

ความหมายที่แท้จริงของ ajax ก็คือการที่เราสามารถ run server side script ได้โดยที่ไม่ต้องมีการ refresh หน้าเกิดขึ้น ซึ่งการทำแบบนี้จะช่วยประหยัดเวลาในการโหลดได้อย่างมากทีเดียว พูดง่ายๆ เช่นเราต้องการบันทึกข้อมูลลงฐานข้อมูล พอลงเสร็จต้องการให้มันมาที่หน้าเว็บเพจ ตามปกติ พอลงเสร็จ มันจะต้อง redirect หรือ refresh มาที่หน้าเดิม แต่ถ้าทำ ajax เราไม่ต้องทำอย่างนั้นเลย สามารถทำได้ใน background แล้วให้มันแสดงผลออกมาทางหน้าเว็บเพจทันทีว่า บันทึกเสร็จแล้ว หรือว่า มี error เกิดขึ้น

ซึ่ง ajax นี้ มีทั้ง Server Side และก็ Client Side แต่เนื้อหาที่ผมจะกล่าวถึงใน Blog ผมนี้จะเป็น Client นะครับ

Read the rest of this entry »

3 Comments