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

<style type="text/css">
body,input {
	font-family: Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 0.9em;
}
label {
	font-weight: bold;
}
#myform_result span.successful, #myform_result span.failed {
	font-weight: bold;
}
#myform_result span.successful {
	color: green;
}
#myform_result span.failed {
	color: red;
}
</style>

ส่วนนี้น่าจะเข้าใจได้อยู่แล้วนะครับ ไปดูส่วนต่อไปเลย
ส่วนสอง Javascript และ Ajax โดย jquery

ส่วนนี้ จะเห็นได้ว่า บรรทัดแรก ก็ต้องมีการโหลดไฟล์ jquery ก่อน เพื่อว่าเราจะได้สามารถใช้ บรรทัดที่ 8 ประกาศตัวแปร word ให้รับค่าจาก tag input ที่กำหนดname=word ในฟอร์ม HTML เสร็จแล้วบรรทัดที่ 10 จะเป็นการใช้งาน ajax หละครับ ว่าเรา run file php $.post(”example-1-ajax-html.php”) โดยมีการส่งตัวแปร word ไป { word: word } แล้วถ้าหากสำเร็จ ให้รัน funtion ตามนี้ function(data) { $(”#myform_result”).html(data); } เป็นไงครับ พอจะเข้าใจได้ไม่ยากใช่เปล่าครับ

เนื่องจากอาจจะยังไม่มี basic เกี่ยวกับ ｊQuery เลย เลยอาจจะไม่เข้าใจนะครับ เดี๋ยวครั้งหน้าผมจะสอน jqueryนะครับ ตั้งแต่ขุดดิน ลงเสาเข็ม เทคอนกรีตกันเลยทีเดียวเชียวนะครับ เรามาดูกันต่อนะครับ

ส่วนสุดท้าย ส่วน HTML ปกติ

	 Enter word: 
 List words : dear, admin, cool
	

ส่วนนี้คิดว่าทุกคนน่าจะรู้จักดีนะครับ ดูไม่ยากเลยใช่มั๊ยครับ แต่สังเกตนิดนึง ว่าผมจะมีกำหนดชื่อ tag ไว้ทุก tag เลยเห็นมั๊ยครับ อันนี้เอาไว้สำหรับให้ jquery มาใช้ในการ select ครับ ซึ่ง jQuery สามารถเลือกแบบ เจาะได้เลย เช่นถ้าเป็น Javascript ธรรมดา จะเป็น document.getElementbyId(”myform_result”) แต่ถ้าเป็น jQuery จะเป็น $(”#myform_result”) เท่านี้เองครับ ซึ่งตรงนี้เดี่ยวผมจะมาสอน jqueryอีกคราวหน้านะครับ

เรามาดูต่อกันเลย อันนี้เป็นของไฟล์ php นะครับ

<?PHP
// Our list of words
$words = array (
	"dear",
	"admin",
	"cool",
);

// set err to false first of all
$err = false;

// Check if our variable was sent
if (!isset($_POST["word"]) || empty($_POST["word"])) {
	$err = true;
	$errstr = "Please enter a word";
	$errcode = 401;
}

// Check if it's a word. "word" is pretty narrow here, only alphabet
// characters are allowed
else if (!preg_match("/^[A-Za-z]+$/", $_POST["word"])) {
	$err = true;
	$errstr = "Illegal characters in word";
	$errcode = 403;
}

// search where this word might be in our list of words. If it's not
// there then we send a 404 error code.
else if (($windex = array_search($_POST["word"], $words)) === FALSE) {
	$err = true;
	$errstr = "Word not found";
	$errcode = 404;
}

// Word found .... cool
else {
	$msgstr = "Word found at $windex";
}

if ($err) {
	echo " Error: $errstr";
}
else {
	echo " Success: $msgstr";
}
?>

ก็เหมือนไฟล์ php ทั่วไปเลยครับ คิดว่ามาถึงจุดนี้ น่าจะเข้าใจกันทุกคนนะครับ จะมีไม่เข้าใจแค่ตรงที่คำสั่งต่างๆเท่านั้นที่ใช้ใน jQuery ส่วนตัวอย่างที่ 2 นั้นก็คล้ายๆกันครับ ต่างการตรงที่จะเป็น XML ซึ่งจะยากขึ้นมาอีกนิด แต่ผมคิดว่า เวลาใช้งานจริงๆ เราใช้ปกติแบบตัวอย่าง 1 ก็เพียงพอแล้วครับ

จบการบรรยายสำหรับครั้งนี้นะครับ เดี๋ยวครั้งต่อไป ผมจะมาสอน Query กันมากกว่านี้นะครับ

ขอบคุณมากครับ ที่ทนอ่านมาจนถึงจุดนี้….^___^

Technorati Tags: jQuery, Ajax