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 เสร็จ และสำเร็จสมบูรณ์ถูกต้อง

jQuery.ajax( options )

เริ่มจาก jQuery.ajax ก่อนเลย ตัว main เลยครับ ตัวนี้จะเป็นการโหลดไฟล์จาก Server โดยผ่านทาง HTTP request ซึ่งในวงเล็บ options จะมีหลาย Parameters มาก แต่ทว่า ผมจะพูดเฉพาะตัวที่ใช้หลักๆนะครับ ตัวอื่น จะไม่ค่อยได้ใช้ Options หลักก็จะมี

• type : หมายถึง POST หรือ GET
• url : URL ปลายทาง ไฟล์ php, asp ต่างๆ
• dataType : ข้อมูลที่ทำกาน Request นั้นเป็นอะไร ก็มี xml, html, script, json, หรือ text ส่วนใหญ่จะใช้ html ก็ไม่ต้องใส่อันนี้ก้ได้
• data : arguments หรือ parameters ที่จะส่งไปด้วย ซึ่งตรงนี้จะเป็น object หรือ string ก็ได้เช่น “name=DeaR&location=Thailand”
• success : หมายถึงเมื่อมีการ run สำเร็จจะให้ทำอะไร เช่น function() { alert(”Your request accomplished”); }

เรามาดูตัวอย่างกัน

$.ajax({
	type: "POST",
	url: "getphone.php",
	data: "name=DeaR&location=Thailand",
	success: function(msg){
		alert( "Phone number is " + msg );
	}
});

พอจะเข้าใจกันไหมครับ ผมลืมบอกไปอีกอันนึง jQuery จะใช้สัญลักษณ์ $ แทน jQuery เต็มๆนะครับ เพื่อความสั้น กะทัดรัด จะไม่เขียน jQuery.ajax หน่ะครับ ถ้าจะให้เข้าใจมากยิ่งขึ้นลองดูตัวอย่างจาก Introduction นะครับ ว่าไฟล์ html มีอะไรบ้าง ไฟล์ php ของผมมีอะไรบ้าง มัน link กันอย่างไร แล้วมัน return ค่าอย่างไร ผมว่าเพื่อนๆ น่าจะเข้าใจได้ง่ายๆอยู่แล้วตรงนี้ เพราะผมทึกทักเอาว่า คนที่อ่านบทความผม จะต้องมีความสนใจที่จะทำในเรื่องนี้อยู่แล้ว เพราะฉะนั้นก็น่าจะมีความรู้ html php javascript (นิดหน่อย) มาอยู่แล้ว แต่ถ้าหากไม่เข้าใจ ก็ post comment มาได้เลยครับ ผมจะตอบที่ comment ไป

load( url, data, callback )

ส่วนคำสั่ง load นี้ ถ้าเปรียบเทียบกับ php แล้วจะเหมือนกับคำสั่ง include เลยนะครับ ใช้งานเหมือนกันเลยครับ ต่างกันตรงที่ load นั้นดีกว่าครับ เพราะว่ามันสามารถทำงาน asynchronously แล้วก็สามารถใส่ arguments ได้อีกด้วย อีกทั้ง เราสามารถเลือกให้มัน load เฉพาะบางส่วนในไฟล์ที่เรากำหนดได้อีกด้วย เช่น เราอาจจะเรียกไฟล์ DeaR.html ซึ่งไฟล์นี้จะมีทั้ง ชื่อ ที่อยู่ เบอร์โทรศัพท์ แต่ต้องการเอาเฉพาะเบอร์โทรศัพท์ ก็สามาถทำได้ครับ เป็นไง function นี้ แต่วิธีใช้ต่างกันนะครับ เนื่องจาก load เป็น object function ดังนั้นก่อนใช้จะต้องมีการ select DOM ก่อนว่า จะให้ไปวางที่ DOM ไหน

ตัวอย่างแรก
$(”div.result”).load(”DeaR.html”);
อย่างข้างบนนี้จะหมายความว่า ให้ load file DeaR.html ทั้งหมดเลยแล้วมาใส่ไว้ที่ tag div ที่มีการกำหนด class=result (วิธีการ select DOM อย่างละเอียด ผมจะอธิบายในบทต่อไปนะครับ)

อีกตัวอย่างนึง
$(”div#result”).load(”getphone.php”, { name: “DeaR” });
อย่างนี้หมายความว่า ให้ load file getphone.php ออกมาโดยมี argument name ว่า DeaR ดังนั้นที่ไฟล์ getphone.php เราก็จะมีการรับค่ามาว่าชื่ออะไร แล้วก็จะมีการคืนค่าเป็น เบอร์โทรศัพท์กลับมา ฉะนั้น ก็จะโหลดเบอร์โทรศัพท์มาแล้วมาใส่ไว้ที่ tag div ที่มีการกำหนด id=result

ตัวอย่างสุดท้าย
$(”div#result”).load(”DeaR.html #address”);
อย่างนี้ความเหมือนตัวอย่างแรกเลยครับ แต่กำหนดเพิ่มว่า ให้ load มาเฉพาะส่วนที่มีการกำหนด id=address กลับมา

jQuery.get( url, data, callback )

สำหรับอันนี้ จะเป็น short cut สำหรับ jQuery.ajax ที่มี option parameter type เป็น “GET” แต่มีข้อจำกัดอยู่เยอะเช่นจะไม่สามารถใช้ callback error และอื่นๆได้ ใช้ได้เฉพาะ complete เท่านั้น

ตัวอย่าง
$.get(”getphone.php”, { name: “DeaR” }, function () { alert(”Mission accomplished”); });
หมายความว่า run file getphone.php โดยมี argument name=DeaR เมื่อ run เสร็จสิ้น (complete) แล้ว ให้ alert(”Mission accomplished”) ออกมา อันนี้ง่ายดีมั๊ยครับ

jQuery.getJSON( url, data, callback ) กับ jQuery.getScript( url, callback )
ขอไม่กล่าวถึงนะครับ เนื่องจากโอกาสใช้น้อยมาก

jQuery.post( url, data, callback, type )

อันนี้จะเหมือน jQuery.get ทุกอย่างเลยครับ เพียงแต่ type จะเป็น “POST” เท่านั้นเอง

ในส่วนของ Events ถ้าสังเกต จะเห็นว่า จะไม่มี jQuery นำหน้า เห้นมั๊ยครับ หมายความว่า คำสั่งเหล่านี้เป็น object funtion กล่าวคือ จะใช้โดดๆ เหมือน jQuery.ajax หรืออื่นๆ ไม่ได้เช่น $.ajaxComplete เฉยๆเลยจะไม่สามารถทำได้ จะต้อง DOM มารองรับมัน เหมือนกับ load เช่น

$("div#result").ajaxComplete(function(request, settings){
	$(this).append("Request Complete.");
});

ส่วน Events ที่เหลือ การใช้งานจะเหมือนกันตัวอย่างข้างบนนี้เลยครับ ต่างกันตรงความหมายของมัน ตามที่ผมได้เขียนไว้แล้ว ต่อท้ายแต่ละ Event ด้านบน

ทีนี้โปรดสังเกตอีกนิด จะเห็นได้ว่าผมได้เขียน (Global) ต่อท้ายไว้ เพื่อให้รู้ว่า คำสั่งเหล่านี้ เป็น Global หมายความว่า อาจจะมี Ajax Request หลายก็ได้ ก็เมื่อมีการกระทำใดๆเกิดขึ้น ก็ให้เรียกตามที่กำหนดได้เลย โดยไม่เจาะจงว่า ให้เรียกก็ต่อเมื่อ มีการเรียกใช้ Ajax Request อันนี้เท่านั้น เป็นต้น ซึ่งโดยปกติแล้ว เราจะกำหนดเป้น local ของใครของมันไปเลย ในส่วนของ function jQuery.ajax ด้านบน ดังที่เห็นบรรทัดสุดท้ายว่า success : function() { … }; นี่หละครับ คือ Local event

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

Technorati Tags: jQuery, Ajax