Ajax คืออะไร แล้วมันใช้ยังไง? – ตอนที่ 3 ภาคปฏิบัติ (ใช้ jQuery)

บทความนี้ต่อจาก Ajax คืออะไร แล้วมันใช้ยังไง? - ตอนที่ 1 ภาคทฤษฎี และ Ajax คืออะไร แล้วมันใช้ยังไง? – ตอนที่ 2 ภาคปฏิบัติ (แบบธรรมดา) ยังไม่ได้อ่านลองกลับไปดูก่อนนะ

Ajax with jQuery

ต่อจากวันก่อน วันนี้เราจะมาลองเขียน Ajax โดยใช้ JavaScript Libraryยอดนิยมตัวหนึ่งชื่อว่า jQuery กัน [มันคืออะไร อ่านได้ ที่นี่ ]

ในวันนี้เราจะมาลองทำ workshop ง่ายๆ ดู โดยกำหนดให้เรามีไฟล์ serv.php ดังนี้

<?php

$simple_data = array(
    0 => 'a',
    1 => 'b',
    2 => 'c',
    3 => 'd',
    4 => 'e',
    5 => 'f',
    6 => 'g',
    7 => 'h',
    8 => 'i',
    9 => 'j',
);

if( isset($_GET['index']) ){
    $index = $_GET['index'];
}
else{
    $index = 0;
}

echo $simple_data[$index];

โค้ด php ง่ายๆ ไม่มีอะไร รับ index มาว่าจะเอาข้อมูลตัวไหนแล้วก็ echo ออกมาซะ (ถ้าไม่ได้เซ็ตมาถือว่าเป็นตัวแรกที่ index=0)

เช่น

serv.php?index=4

ก็จะได้ผลเป็น

e

ทีนี้ ถ้าเราจะทำ pagging สำหรับให้เขากดดูข้อมูลในหน้าต่อไปได้ส่วนใหญ่ก็จะเขียนประมาณ

//ต่อจากเมื่อกี้

foreach( $simple_data as $index => $value){
    echo "<a href='serv.php?index='$index'>$value</a>";
}

ใช้ php ทำการลูปสร้างลิงค์ (แท็ก <a> ) ไปหน้าอื่นๆ ขึ้นมา

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

คำตอบก็คือ Ajax นั่นเอง!
(แน่นอนล่ะ ก็วันนี้จะมาสอนเรื่องนี้นิ)

ใช้ JavaScript สร้าง"ข้อมูล"ขึ้นมา

คอนเซ็ปของการทำให้หน้าเพจมีการเปลี่ยนแปลงข้อมูลโดยไม่ต้องโหลดหน้าใหม่คือใช้ JavaScript ทำการเปลี่ยนแปลง html ในหน้านั้น

ตัวอย่างเช่น

<div id="world">
    hello
</div>

<button id="btn">กดฉันสิิ!</button>

<script>
    $("#btn").on('click', function(){
        $("#world").html("อันนี้เป็นเนื้อหาใหม่นะ");
    });
</script>

ตัวอย่างนี้ เราเตรียม คำว่า hello และปุ่มเอาไว้

แล้วใช้ jQuery สั่งว่า ถ้าปุ่ม btn (#ที่นำหน้าหมายถึงอ้างชื่อด้วยid) มีการกดลงไปเมื่อไหร่ ให้ทำ การเปลี่ยนhtmlของ #world ให้กลายเป็นจ้อความใหม่ซะ

แล้วจะเอาข้อมูลชุดใหม่มาจากไหน?

ก็ในเมื่อข้อมูลของเราเก็บไว้ในฝั่งเซิร์ฟเวอร์ (ไม่ว่าจะเป็บตัวแปรphp SESSION Database หรือพวกไฟล์XML บลาๆ) ดังนั้นก็ต้องให้ JavaScript ทำการเรียกข้อมูลโดย "request" ขอไปหาเซิร์ฟเวอร์

แล้วเราขออะไรได้บ้าง?

ให้คิดว่าการขออะไรสักอย่างที่กำลังทำอยู่นี่ เป็นเหมือนการ "เรียกใช้งานฟังก์ชั่น" อย่างหนึ่งละกัน

สิ่งที่ฟังก์ชั่นทำได้ก็คือ

ถ้าเราใส่ค่า x เข้าไป มันจะให้ค่า y ออกมา

เปรียบเทียบเป็นกรณีของเราก็จะได้ว่า

ถ้าเราส่งค่า 4 ไป ก็อยากได้ข้อมูลคำว่า 'e' กลับมา (จากตัวแปร $simple_data นะ)

ติ๊ต่างว่า e เป็นเป็นข้อมูลชุดใหญ่ๆ ที่เก็บอยู่ใน database แบบข้างบนละกัน

แต่เนื่องจากว่า Ajax มีการทำงานแบบ Asynchronous เราไม่รู้ว่ามันจะตอบกลับมาตอนไหนการเรียกแบบฟังก์ชั่นปกติเช่น

y = ajax('serv.php', x);

จึงไม่สามารถทำได้ แต่ต้องเรียกแบบ

function callback(y){...ได้รับข้อมูลกลับมาแล้วจะทำอะไรสักอย่าง...}
//แล้วจึงเรียก
ajax('serv.php', x);

ต้องเตรียมฟังก์ชั่น "callback" เอาไว้ (ไม่อธิบายแล้วนะ ถ้าไม่เข้าใจให้กลับไปอ่านตอน 1-2 ) ซึ่งเราเคยทำกันไปแล้วในบล๊อกที่แล้ว แต่ก็ยุ่งยากพอสมควรนะ

$.ajax

เป็นฟังก์ชั่นสำหรับใช้งาน Ajax ที่ไลบรารี่ jQuery เตรียมไว้ให้โดยมีวิธีเรียกแบบนี้

$.ajax({
    url: 'xxx.php',
    type: 'get', //หรือ post (ค่าเริ่มต้นเป็นแบบ get)
    data: [data],
    dataType: 'html', //หรือ json หรือ xml
    success: function(response){
        //callbackที่เตรียมไว้รันตอนเซิร์ฟเวอร์ตอบกลับมา
    }
});

โครงสร้างหลักๆ คือ

• url เป็นการบอกว่าเราจะส่ง Ajax ไปถามหน้าไหน
• type บอกว่าข้อมูลของเราจะส่งไปให้เซิร์ฟเวอร์แบบ get หรือ post
• data แนบค่าพวกนี้ติดไปให้ด้วยนะ (ค่า x น่ะ ส่งไปให้เซิร์ฟเวอร์)
• dataType เพื่อบอกว่าข้อมูลที่รับ-ส่งกันนี่น่ะ ส่งใน FORMAT อะไร (มันจะได้อ่านออก)
• success เป็นตัว callback จะทำงานเมื่อเซิร์ฟเวอร์ตอบกลับมา

*หมายเหตุ option จริงๆ มีเยอะกว่านี้ อ่านเพิ่มเติมได้ที่ http://api.jquery.com/jQuery.ajax/

ตัวอย่างต่อไปจะใช้ dataType เป็นแบบ json ให้ดู เพราะเป็นที่นิยมที่สุดในตอนนี้

เราต้องกลับไปแก้ serv.php สักเล็กน้อย คือไปเพิ่มเคสให้มันตอบกลับแบบที่เราต้องการได้ด้วย

<?php

$simple_data = array(
	0 => 'a',
	1 => 'b',
	2 => 'c',
	3 => 'd',
	4 => 'e',
	5 => 'f',
	6 => 'g',
	7 => 'h',
	8 => 'i',
	9 => 'j',
);

if( isset($_GET['index']) ){
	$index = $_GET['index'];
}
else{
	$index = 0;
}


if( isset($_GET['requestByAjax']) ){
	echo json_encode( array(
		'data1' => $simple_data[$index]
	));
}
else {
	echo $simple_data[$index];
}

เพิ่มตัวเช็กว่าถ้ามีตัวแปร requestByAjax ส่งมาให้ด้วยแปลว่าเราจะตอบกลับแบบ Ajax และในเมื่อเราบอกแล้วว่าจะใช้รูปแบบ json แทนที่จะ echo กลับแบบธรรมดา ก็จะใช้ json_encode ครอบลงไป (มันก็จะกลายเป็น json แล้ว)

ทีนี้ก็มาเซ็ตค่าฟังclientต่อบ้าง

$.ajax({
	url: 'serv.php',
	type: 'get',
	data: {
		requestByAjax: 1
	},
	dataType: 'json', //หรือ json หรือ xml
	success: function(response){
		$("#world").html(response.data1);
	}
});

แบบนี้เราตั้งให้มันเรียกกลับไปที่ serv.php ที่เดิม และเนื่องจาก ฝั่งphpรอรับตัวแปร $_GET อยู่เลยบอกว่าให้ type=get (ถ้าเป็น $_POST ก็ต้องเซ็ต type=post นะ ง่ายๆ ตรงมาก)

ส่ง data ที่จะส่งไปเราบอกว่าแนบตัวแปรชื่อ requestByAjax ไปด้วยละกัน แล้วให้ตอบกลับมาเป็น json

หลังจากเซิร์ฟเวอร์ทำงานเสร็จแล้ว มันก็จะตอบกลับมาแล้ว jQuery ก็จะรันฟังก์ชั่นที่เราเตรียมไว้ตรง success ให้

เมื่อกี้เซิร์ฟเวอร์ตอบกลับมาเป็น

array(
    'data1' => $simple_data[$index]
)

เป็นarrayที่มีค่า data1 ดังนั้นตัวแปร response ใน success ก็จะสามารถเรียก .data1 ได้เลย

แล้วเราก็เอาข้อมูลชุดใหม่ที่ได้นี้ ไปแปะลงใน html ที่เตรียมไว้ เป็นอันจบ

ยากมั้ย? จริงๆ มันไม่ยากหรอกนะ เจ้า Ajax เนี่ย ... แต่มันยากตรงวิธีเขียนเว็บ JavaScript ใช้ยังไง PHP เขียนแบบไหน ถ้าคุณไม่แม่นเรื่องพวกนี้ก็จะลำบากนิดหน่อย แต่คอนเซ็ปของมันก็แค่ขอข้อมูลแล้วเดี๋ยวเซิร์ฟเวอร์จะตอบมาให้ก็เท่านั้น 😉