มาเล่น Ajax กันเถอะ
ajax กับ PHP เล่นง่ายๆ ตอนที่ 1
AJAX ตอนแรกเรียกมันว่า “อะ-จ้าก” ที่แบบว่านักคาราเต้เขาร้องกันก่อนที่จะกระโดดใส่กัน ดูไปดูมาน่าจะเรียกว่า "เอ-แจ็ก” หรืออะไรประมาณนี้ หรือ AJAX ตอนแรกเรียกมันว่า “อะ-จ้าก” ที่แบบว่านักคาราเต้เขาร้องกันก่อนที่จะกระโดดใส่กัน ดูไปดูมาน่าจะเรียกว่า "เอ-แจ็ก” หรืออะไรประมาณนี้ หรือจะอ่านว่า “เอ เจ เอ เอ็กซ์” ก็ได้ ไม่ว่ากัน เอาล่ะ เจ้า AJAX นี้มันย่อมาจาก Asynchronous JavaScript And XML คือ มันเอาตัว A, J, A และ A ของแต่ละคำมาต่อกัน เจ้า AJAX นี้มันไม่ใช่ภาษาใหม่นะครับ มันไม่ได้เป็นภาษาใหม่ๆ อะไรเลย มันเป็นเทคนิคหนึ่งที่จะทำให้เว็บสามารถปฏิสัมพันธ์กับผู้ใช้งานได้เร็วขึ้น เพราะว่าเทคนิค AJAX นี้ใช้ JavaScript เป็นตัวส่งข้อมูลไปประมวลผลที่ฝั่ง Server และรับข้อมูลผลลัพธ์กลับมาแสดงที่ฝั่ง client ดูๆ ไปถ้าท่านศึกษา AJAX ไปแล้วจากหนังสือเล่มนี้ ท่านก็จะพบว่า มันเหมือนกับการทำงานแบบหลังฉาก คือ ประมวลผลเสร็จ มันก็เอาผลลัพธ์มาแสดงที่หน้าเว็บเลย โดยไม่ต้อง Refresh ใหม่
ประเด็นของ AJAX อยู่ที่ไหน...มันเป็นอย่างนี้ครับ ท่านเขียน PHP + MySQL ได้แล้วใช่มั้ยครับ ลองนึกถึงเวลาที่ท่านทำตัว Submit Form สิครับ ท่านจะสร้างสร้างไฟล์ html มาไฟล์หนึ่ง จากนั้นก็สร้าง PHP มาอีกไฟล์หนึ่งแยกกัน ดังรูป จากรูป พิจารณาดีๆ นะครับ ไฟล์ login.html จะต้องมีแบบฟอร์มให้เรากรอก login + Password ถูกมั้ยครับ และไฟล์ login.php ก็จะต้องมี Script ที่จะเอา login และ password ไปตรวจสอบ โดยการ submit นั้น เราจะ submit ข้อมูลจากไฟล์ login.html ไปให้กับไฟล์ login.php การแสดงผลลัพธ์ก็จะเป็นหน้าที่ของไฟล์ login.php ซึ่งจะต้องเขียนโค้ดพร้อมกับหน้าตาที่เป็น HTML ออกมา ถูกมั้ยครับ...จากที่กล่าวมานี้ก็คือ การรันโปรแกรม PHP แบบคลาสสิค คือ คลิก Submit, รอ, refresh หน้าใหม่แล้วค่อยแสดงผลออกมา ซึ่งอาจจะทำให้ช้า เพราะว่าในหน้าที่เราแสดงผลนั้น ถ้ามีตารางมากๆ มีเมนูมากๆ มันก็จะทำให้การถ่ายโอนข้อมูลนั้นล่าช้าด้วย เช่น สมมติว่าไฟล์ login.html มีแบบฟอร์มและมีเมนูสวยงามมากมาย เมื่อ submit ไปแล้ว ไฟล์ login.php ก็จะต้องเป็นแบบเดียวกันด้วย มีวิธีการหรือไม่ที่เราจะเอาแค่ผลลัพธ์ในการประมวลผลของ PHP หรือผลลัพธ์ที่ได้จากการประมวลผลบนฝั่ง Server มาแสดงในพื้นที่ๆ ต้องการโดยไม่ต้อง Refersh หน้าใหม่
ประเด็นที่ต้องการชี้ในตอนนี้ก็คือ เรามีวิธีการที่จะส่งค่าไปให้โปรแกรม PHP ที่อยู่บน Web Server หรือส่งค่าไปประมวลผลที่ PHP แล้วเอาผลลัพธ์ที่ได้ส่งกลับมายังหน้าเว็บเพจ โดยไม่ต้อง Reload หรือ Refresh หน้าใหม่ได้หรือไม่... นี่ไงครับ AJAX เป็นเทคนิคที่ทำเช่นนั้นได้
เทคนิคการส่งข้อมูลไปประมวลผลที่ฝั่ง Web Server โดยใช้เทคนิค AJAX นี้ จะต้องใช้ความรู้ในเรื่องของ HTML, JavaScript พอสมควร รวมไปถึง XML, CSS พอประมาณเพื่อให้มันประมวลผลได้ เรามาดูการทำงานของเจ้า Aj
ยกตัวอย่างรูปในข้างต้น เรามีแบบฟอร์ม Login อยู่ในไฟล์ที่ชื่อ login.html ไฟล์ๆ นี้ ปกติแล้ว เมื่อทำการ Login มันจะต้อง refresh หน้าเว็บไปที่ไฟล์ PHP ที่รับการ Submit ถูกมั้ยครับ แต่คราวนี้ ถ้าเราใช้เทคนิค AJAX เข้ามาช่วย ในไฟล์ HTML ไฟล์นี้ แบบฟอร์มของเราไม่จำเป็นต้องมีปุ่ม Submit เลย เราจะกำหนดให้ปุ่ม Login นั้นเป็นปุ่มแบบธรรมดาๆ แต่เราจะกำหนด Event ที่ชื่อ onclick เอาไว้ ดังตัวอย่าง
<form>
Login: <input type='text' name='username' /> <br />
Password: <input type='text' name='password'/><br />
<input type='button' onclick='doquery()' value='Login' />
<input type=reset>
</form>
จากตัวอย่าง จะเห็นว่าแบบฟอร์มของเราเปลี่ยนไป นั่นก็คือ ในแท็ก <form> เราไม่ได้กำหนด action ให้ชี้ไปที่ไฟล์ PHP ใดๆ เลย และอีกจุดหนึ่งก็คือปุ่ม Login ในแบบฟอร์มของเรานั้น เราจะให้เป็นปุ่มแบบธรรมดาๆ ซึ่งปกติแล้ว การสร้างแบบฟอร์ม เราจะต้องสร้างปุ่มที่มี type=’submit’ แต่นี่เราให้เป็นแบบ type=’button’ และเราก็ได้กำหนด onclick เอาไว้ให้ชี้ไปที่ฟังก์ชั่น doquery() ซึ่งฟังก์ชั่นนี้ เป็นฟังก์ชั่นที่เราจะเขียนเอาไว้ใน JavaScript ซึ่งอยู่ในไฟล์ HTML ไฟล์เดียวกันนี้
ดูนะครับ เมื่อเรากดปุ่ม Login แล้ว อีเวนต์ onclick ก็จะส่งการทำงานต่อไปยังฟังก์ชั่น doquery() ซึ่งฟังก์ชั่นนี้มันเขียนด้วย JavaScript ดังนั้น มันจึงทำงานที่ฝั่ง Client คือ ทำงานด้วย Web Browser เอง สิ่งที่ฟังก์ชั่นนี้จะทำให้กับเราก็คือ มันจะเอาข้อมูลที่ผู้ใช้กรอกลงไปในช่อง Login และ Password ส่งต่อไปให้กับไฟล์ login.php ที่อยู่บนฝั่ง Server ดังรูป
คราวนี้ เจ้าไฟล์ login.php ก็จะรับเอา root และรหัส 1234 ไปประมวลผล คือ ไปตรวจสอบว่าใช่สมาชิกหรือไม่ โดยเขียนโค้ดโปรแกรมตามปกติ คือ คิวรี่จาก MySQL จากนั้นได้ผลอย่างไร ก็จะส่งผลกลับไป โดยใช้การ echo ซึ่งโค้ดในฟังก์ชั่น doquery ที่เป็น JavaScript ที่เราเขียนเอาไว้นั้น ได้เขียนโค้ดรอผลตอบกลับเอาไว้แล้ว มันก็จะเอาผลที่ได้นั้น มาแสดงในส่วนที่ต้องการ ดังรูป
จากตัวอย่างที่ได้ยกมาในข้างต้น จะเห็นว่า ถ้าเราทำแบบนี้ได้ เราก็ไม่จำเป็นจะต้องมีการ Refresh หรือ Reload หน้าใหม่ทั้งหมด ซึ่งปกติแล้ว การเขียนโค้ดให้ submit แล้วโหลดหน้าใหม่ทั้งหมดนั้น ค่อนข้างช้าเวลาประมวลผล เพราะอย่าลืมว่าในหน้าๆ หนึ่งของเว็บเพจนั้น จะมีส่วนที่เป็นโลโก้ของเว็บ จะมีส่วนที่เป็นเมนูด้านซ้าย, ส่วนของ Footer คือ ส่วนที่เราจะเขียนพวก Copyright ต่างๆ ส่วนต่างๆ เหล่านี้จะต้องถูกโหลดมาใหม่หมดเลย แต่ถ้าเราใช้เทคนิคของ AJAX นี้ เราไม่ต้องโหลดใหม่ทั้งหมด เราเพียงแค่ส่งข้อมูลที่ต้องการไปให้กับ PHP ที่อยู่บนฝั่ง Server พร้อมกันนั้น เราก็เตรียมตำแหน่ง หรือพื้นที่ที่จะแสดงผลลัพธ์ของการประมวลผลนั้นเอาไว้ในหน้านั้น เมื่อมันได้ผลอย่างไร มันก็จะ return ผลลัพธ์นั้นกลับมาแสดงในตำแหน่งที่เราต้องการได้....
จากที่ได้กล่าวไปทั้งหมดนี้ จะเห็นได้ว่า เทคนิคนี้จะช่วยลดระยะเวลา ลดขั้นตอนในการโหลดไปได้เยอะ คือ ไม่ต้องคลิก Submit แล้วรอให้มันโหลดหน้าใหม่ถึงจะดูได้ว่าได้ผลอย่างไร เทคนิค AJAX จะตัดขั้นตอนตรงนี้ออกไป ทำให้ความยุ่งยากลดลงไปได้มากขึ้นเยอะเลย
เอาล่ะครับ บทนี้ เรารู้จักกันไปพอสมควรแล้ว โดยเฉพาะอย่างยิ่ง อยากให้ท่านผู้อ่านได้ทราบประเด็นที่ชัดๆ ว่าเพราะเหตุใดถึงต้องใช้เทคนิค AJAX นี้เข้ามาช่วยในการเขียนเว็บ ลองดูตัวอย่างเว็บไซต์ google.com, gmail.com หรืออย่าง Microsoft.com ก็ได้ ลองดูในช่อง Search ท่านก็จะเห็นว่าที่เว็บเหล่านี้ เขาก็ใช้เทคนิคนี้ เพื่อคงให้รูปแบบเดิมของหน้าเว็บไซต์ปรากฏอยู่เหมือนเดิม แต่เพียงแค่เปลี่ยนเนื้อหาไปตามเงื่อนไขที่เราเขียนเข้าไปนั่นเอง
ตอนที่ 2 ต่อไป มาดูวิธีการเขียนโปรแกรมจากตัวอย่างง่ายๆ กันครับ
AJAX กับ PHP เล่นง่ายๆ ตอนที่ 2
เรามาเริ่มต้นกันกับตัวอย่างง่ายๆ กันนะครับ ตัวอย่างแรกนี้ เราจะทำหน้าเว็บมาหนึ่งหน้า โดยเราจะ Save ให้เป็นไฟล์นามสกุล .html ดังโค้ดต่อไปนี้ครับ....
เรามาเริ่มต้นกันกับตัวอย่างง่ายๆ กันนะครับ ตัวอย่างแรกนี้ เราจะทำหน้าเว็บมาหนึ่งหน้า โดยเราจะ Save ให้เป็นไฟล์นามสกุล .html ดังโค้ดต่อไปนี้ครับ....
Ajax01.html
<html>
<body>
<h3>ทดสอบ</h3>
<div id='result'> This is result </div>
<br>
</body>
</html>
จากตัวอย่าง จะเห็นได้ว่า เราได้สร้างแท็กที่ชื่อ <div> ขึ้นมา โดยกำหนดให้มี id เป็น result เริ่มต้น เราให้มันมีข้อความว่า “This is result” ก่อน เมื่อเรารันไฟล์นี้ผ่านทาง localhost/ajax/ajax01.html เราก็จะได้ผลดังรูปในข้างต้น
จากนั้นเราจะสร้างไฟล์ hello.php ขึ้นมา โดยในไฟล์ hello.php นั้น ให้ท่านเขียนดังนี้
Hello.php
<?
for ($i=0;$i<10;$i++) echo "Hello ";
?>
ดูนะครับ ตอนนี้ เรามีไฟล์ ajax01.html และไฟล์ hello.php แล้ว ทั้งหมด 2 ไฟล์ เราจะทำอย่างไรที่จะให้ผลของ hello.php นั้นไปปรากฏในหน้า ajax01.html ได้ โดยให้ปรากฏในส่วนของแท็ก <div> ที่เรากำหนดเอาไว้
การที่จะทำเช่นนั้นได้ เราจะต้องเขียนโค้ด JavaScript ให้ส่งสัญญาณ Request แบบ HTTP ไปยัง Web Server เพื่อขอผลลัพธ์ของการประมวลผลของไฟล์ hello.php กลับมา คือ ในการเชื่อมต่อแบบ World Wide Web นั้น เราจะใช้โปรโตคอล HTTP ซึ่งในการเปิดเว็บแต่ละครั้ง การขอ Download ไฟล์อะไรก็ตาม มันจะต้องส่งคำสั่ง GET พร้อมด้วยชื่อไฟล์ที่ต้องการ เช่น
GET /test.html ขอไฟล์ test.html
GET /logo.gif ขอไฟล์ logo.gif มันจะมาแสดงที่หน้า Web Browser
GET /display.php ขอไฟล์ display.php มันจะส่งผลลัพธ์กลับมา
GET /data.zip ขอไฟล์ data.zip ซึ่งมันจะทำการ Download มา save ที่เครื่องเรา
จากหลักการตรงนี้ โค้ด JavaScript ที่เราจะเขียนนี้ จะต้องส่งเชื่อมต่อเข้าไปที่ Web Server และใช้คำสั่ง GET ส่งสัญญาณ Request เพื่อไปรันไฟล์ hello.php และเอาผลกลับมา เราจะเขียนโค้ดเพิ่มที่ไฟล์ ajax01.html ดังนี้
Ajax01.html
<html>
<head>
<script language=JavaScript>
function doajax()
{
var req;
try{
req= new XMLHttpRequest();
}catch (e)
{
try{
req= new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser error!");
return false;
}
}
}
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = req.responseText;
}
}
req.open("GET", "hello.php", true);
req.send(null);
}
</script>
</head>
<body>
<h3>ทดสอบ</h3>
<div id='result'> This is result </div>
<br>
</body>
</html>
ในตอนนี้ เมื่อเราลอง refresh ไฟล์ ajax01.html แล้ว มันจะยังไม่มีอะไร เพราะว่าฟังก์ชั่น doajax() มันไม่ได้ถูกเรียกให้ทำงาน เราสามารถเรียกฟังก์ชั่นที่เราเขียนเอาไว้ได้โดยใช้อีเวนต์ใน HTML ลองดูตัวอย่างนี้ครับ ให้ท่านแก้ไขไฟล์ ajax01.html อีกครั้ง โดยเพิ่มโค้ดสร้างปุ่มเข้าไปอีกหนึ่งปุ่ม โดยเขียนเอาไว้ระหว่างแท็ก <body> กับ </body> ดังนี้
……………….
………………..
<body>
<h3>ทดสอบ</h3>
<div id='result'> This is result </div>
<br>
<form>
<input type=button onclick="doajax()" value="click me">
</form>
</body>
</html>
จากตัวอย่าง เห็นมั้ยครับว่า เมื่อเรากดปุ่ม มันก็จะทำการเรียกฟังก์ชั่น doajax() ที่เราเขียนเอาไว้ด้วยภาษา JavaScript ในข้างบน ซึ่งในฟังก์ชั่นนี้ มันก็จะทำการสร้างตัวแปรชื่อ req ขึ้นมา ซึ่งเจ้า req นี้เราจะใช้เป็นตัวแปรอ้างอิงการเชื่อมต่อ (ย่อมาจากคำว่า request) โค้ดในส่วนต่อไป เราจะทำการสร้าง object ของ XMLHttpRequest ซึ่งฟังก์ชั่นนี้จะใช้กับ Web Browser ที่ไม่ใช่ IE เช่น พวก Mozilla หรือ FireFox แต่ถ้าผู้ที่เปิดเว็บใช้ IE เปิด ก็จะเข้ามาที่เงื่อนไขของ catch ดังนี้
var req;
try{
// ถ้าผู้เข้าเว็บ ใช้ Mozilla, FireFox จะสร้าง object ด้วยบรรทัดนี้
req= new XMLHttpRequest();
}catch (e)
{
try{
// ถ้าผู้เข้าเว็บ ใช้ IE จะสร้าง object ด้วยบรรทัดนี้
req= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// ถ้ามี Error จะมาทำที่นี่ มันจะแสดงข้อความ Error ออกมา
alert("Your browser error!");
return false;
}
}
}
เมื่อถึงตอนนี้แล้ว ตัวแปร req พร้อมที่จะทำการเชื่อมต่อแล้ว โค้ดในบรรทัดต่อไป ก็จะเป็นการกำหนดว่าจะให้ผลลัพธ์ของการประมวลผลนั้นแสดงออกมา ณ ตำแหน่งใดในหน้าเว็บ ดังนี้
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = req.responseText;
}
}
จากตัวอย่าง พิจารณาตรงนี้ให้ดีนะครับ ตรงนี้ล่ะครับ จะเป็นการตรวจสอบผลของการเชื่อมต่อว่าเป็นอย่างไร โดยที่เราจะเขียนเป็นขอบเขตของฟังก์ชั่นเอาไว้ และตรวจดูค่าที่อยู่ในตัวแปร req.readyState ซึ่งเป็นค่าตัวเลขที่แสดงผลลัพธ์ของการเชื่อมต่อ ค่า req.readyState นี้ สามารถเป็นได้ 5 ตัวเลข คือ
0 การร้องขอ (request) มีปัญหา ไม่สามารถกำหนดค่าเริ่มต้นได้
1 การร้องขอ (request) ถูกกำหนดขึ้น
2 การร้องขอ (request) ถูกส่งไปแล้ว
3 การร้องขอ (request) กำลังประมวลผล
4 การร้องขอ (request) ให้ผลกลับมาเรียบร้อย
จากตัวอย่างในข้างต้น เราได้ตรวจสอบค่าที่อยู่ในตัวแปร req.requestState ว่าเท่ากับ 4 หรือไม่ ถ้าใช่ก็แสดงว่าได้ผลกลับมาเรียบร้อยแล้ว เราก็จะสร้างตัวแปร resultarea อ้างถึงตำแหน่ง result ที่เรากำหนดเอาไว้โดยใช้ <div id=result> ตรงนี้ไงครับ เป็นการอ้างถึงตำแหน่งที่ต้องการให้มันแสดงผลของการเชื่อมต่อว่าให้มาแสดงผลที่นี่นะ อย่าไปแสดงที่ไหน จากนั้นเราก็กำหนดค่าให้กับ resultarea.innerHTML เก็บค่าผลของการร้องขอ ซึ่งก็คือ req.responseText เอาไว้ ดังนี้
var resultarea= document.getElementById('result');
resultarea.innerHTML = req.responseText;
เสร็จสิ้นโค้ดในส่วนนี้ ส่วนสุดท้ายของฟังก์ชั่น doajax() ก็คือ การ open เพื่อเชื่อมต่อ โดยจะส่งคำสั่ง GET พร้อมกับชื่อไฟล์ที่ต้องการประมวลผล นั่นก็คือ hello.php นั่นเอง พารามิเตอร์ true ยังไม่ต้องสนใจในตอนนี้ และบรรทัดสุดท้าย มันจะทำการ send การร้องขอไฟล์ hello.php นั้นไปให้กับ Web Server
req.open("GET", "hello.php", true);
req.send(null);
เมื่อมาถึงตรงนี้ พอ Web Server ได้รับการร้องขอไฟล์ hello.php จากไฟล์นี้ มันก็จะประมวลผลตามประสาของ PHP ตามปกติ เมื่อได้ผลกลับมา มันก็จะมาตกที่ โค้ดในส่วนของการตรวจจับการคืนค่าจากการเชื่อมต่อดังที่เราได้ดูกันไปแล้วนั่นเอง ดังนี้....
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = req.responseText;
}
}
เห็นมั้ยครับ การทำงานมันก็จะเป็นไปตามขั้นตอนที่ว่านี้ คือ ส่งการเชื่อมต่อไปโดยใช้ฟังก์ชั่น req.open และ req.send จากนั้นเมื่อได้ผลอย่างไรมา มันก็จะมาตกที่โค้ดในข้างต้น โดยเงื่อนไข if จะดูว่า req.readyState เป็น 4 หรือไม่ ถ้าใช่แสดงว่าการร้องขอนั้นให้ผลเรียบร้อยแล้ว มันก็จะเอาผลที่ได้ (req.responseText) มาแสดงในพื้นที่ที่เรากำหนดเอาไว้ นั่นก็คือ ในส่วนที่เราเขียนว่า <div id=result> ด้านล่างของไฟล์นี้นั่นเอง....
เพิ่มการตรวจจับสถานะของ req.readyState ค่าอื่นๆ
เรามาดูกันต่ออีกสักนิดในเรื่องของการเขียนโค้ดเพื่อดูค่าสถานะของการตอบกลับ เพราะว่าค่าที่ตอบกลับมาจาก req.readyState นั้นมีค่าได้ 5 อย่าง ดังในตารางที่ได้เสนอไปแล้วในหัวข้อที่แล้วนั่นเอง เราลองมาเขียนโค้ดดักเข้าไปอีกก็ได้ครับ ดังนี้
req.onreadystatechange = function()
{
if (req.readyState == 3)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = "Processing...";
}
if (req.readyState == 4)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = req.responseText;
}
}
จากตัวอย่าง เมื่อเราทำการรันตัวอย่างนี้ มันจะคืนค่ากลับมา ตรงตามเงื่อนไข 3 และ 4 คือ ตัวแปร req.readyState จะมีค่า 3 ก่อน เพราะว่ามันอยู่ในขั้นตอนการ Process จากนั้นก็จะเข้าสู่ค่า 4 ก็คือ การประมวลผลเสร็จสิ้นแล้ว ในช่วงที่มันกำลังรอการประมวลผลนั้น มันก็คือช่วงที่เรากำลังเชื่อมต่อนั่นเอง
เอาล่ะครับ บทความทั้งสองนี้ก็ได้แนะนำ AJAX มาในระดับเบื้องต้นแล้ว คราวนี้ ลองไป implement ดูใน project ต่อนะครับ เผื่อจะได้ idea ดีๆ กัน
Submit ข้อมูลจาก MySQL มาแสดงโดยใช้เทคนิค AJAX
มาดูตัวอย่างนี้กันดีกว่า เราจะ upgrade สู่ MySQL กัน คือ เราจะสร้าง Form เอาไว้อันหนึ่ง รับค่าเข้ามาเป็น ID ของสินค้าหรืออะไรนี่ล่ะ คราวนี้ พอเรากด submit มันก็จะเอาค่า ID ที่รับเข้ามานี้ไปทำการคิวรี่เพื่อเอาข้อมูลผลลัพธ์ออกมาแสดงในช่องที่ต้องการมาดูตัวอย่างนี้กันดีกว่า เราจะ upgrade สู่ MySQL กัน คือ เราจะสร้าง Form เอาไว้อันหนึ่ง รับค่าเข้ามาเป็น ID ของสินค้าหรืออะไรนี่ล่ะ คราวนี้ พอเรากด submit มันก็จะเอาค่า ID ที่รับเข้ามานี้ไปทำการคิวรี่เพื่อเอาข้อมูลผลลัพธ์ออกมาแสดงในช่องที่ต้องการที่อยู่ในหน้าเว็บนั้น โดยไม่ต้อง refresh เลย เราจะทำยังไง เรามาดูตัวอย่างกันนะครับ แล้วปรับเอาตามความเหมาะสมนะครับ
ตอนแรก เราจะสร้างฟอร์มขึ้นมาก่อน ดังนี้
Idform.html
<html>
<head>
<title>Test AJAX</title>
</head>
<script language=JavaScript>
function doajax()
{
var req;
try{
req= new XMLHttpRequest();
}catch (e)
{
try{
req= new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser error!");
return false;
}
}
}
req.onreadystatechange = function()
{
if (req.readyState == 3)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = "Processing...";
}
if (req.readyState == 4)
{
var resultarea= document.getElementById('result');
resultarea.innerHTML = req.responseText;
}
}
var id = document.getElementById('id').value;
req.open("GET", "getid.php?id="+id, true);
req.send(null);
}
</script>
<body>
<form>
ID : <input type=text name=id> <input type=button onclick="doajax()" value=click>
</form>
<div id='result'> This is result </div>
</body>
</html>
เมื่อรัน Form นี้จะได้ดังรูป
เมื่อทำการกดปุ่ม click แล้ว มันก็จะเอาค่า id ที่อยู่ในช่อง ส่งไปให้กับ getid.php ทาง QUERY STRING ตามเทคนิคที่เราเคยรู้กันมาแล้วนั่นเอง ไฟล์ getid.php มีดังนี้
Getid.php
<?
$link=mysql_connect("localhost","root","1234");
if (!$link)
{
print("ERROR MYSQL");
}
else
{
mysql_select_db("mysql",$link);
$sql="select * from help_keyword where help_keyword_id='$id'";
$result=mysql_query($sql,$link);
$n=mysql_num_rows($result);
if ($n<=0)
{
print("No result!");
}
else
{
$row=mysql_fetch_row($result);
print("Result = $row[0] $row[1]<br>");
}
mysql_close($link);
}
?>
นี่ไงครับ ไฟล์ getid.php ไม่มีอะไรมากไปกว่าการสั่ง connect เข้า mysql และทำการคิวรี่ข้อมูลออกมาจากตาราง help_keyword โดยกำหนดให้ where help_keyword_id มีค่าเท่ากับ id ที่เราส่งเข้าไปนั่นเอง ลองดูรูปแสดงผลการรันนะครับ ดังนี้
ส่งค่าจาก Form ไปให้กับ PHP โดยใช้ AJAX
ในบทนี้ เราลองมาดูวิธีการเล่นกับ Form กัน คือ ถ้าเราทำแบบฟอร์มเอาไว้ แล้วเมื่อมีการ Submit เราจะส่งค่าจาก Form ไปให้กับ PHP ได้อย่างไร โดยใช้เทคนิค AJAX เข้ามาช่วย และเราจะเอาผลการรันของโปรแกรม PHP นั้นมาแสดงในจุดที่ต้
ในบทนี้ เราลองมาดูวิธีการเล่นกับ Form กัน คือ ถ้าเราทำแบบฟอร์มเอาไว้ แล้วเมื่อมีการ Submit เราจะส่งค่าจาก Form ไปให้กับ PHP ได้อย่างไร โดยใช้เทคนิค AJAX เข้ามาช่วย และเราจะเอาผลการรันของโปรแกรม PHP นั้นมาแสดงในจุดที่ต้องการได้อย่างไร... มีหลายเทคนิค และหลายสไตล์ครับ เรามาดูกันทีละหัวข้อ ดังนี้
ส่งค่าจาก Form ไปให้กับ PHP
ตัวอย่างนี้ เราจะสร้างฟอร์มขึ้นมาแบบนี้
Simpleform.html
<html>
<body>
<form name=myform>
Name <input type=text name=name>
<br>
<input type=button value="send">
<br>
</form>
<div id='area'>Your result will display here</div>
</body>
</html>
เมื่อรันฟอร์มนี้จาก Web Browser แล้วจะได้ดังรูป
จากฟอร์มนี้ สิ่งที่เราต้องการก็คือ เราจะมาศึกษากันว่า ทำอย่างไรจึงจะส่งค่าจากช่อง name ไปให้กับไฟล์ PHP ได้ โดยใช้เทคนิค AJAX เข้ามาช่วย และเมื่อได้ผลอย่างไร ก็ให้มาแสดงในพื้นที่ <div id=”area”> ที่เรากำหนดเอาไว้ด้านล่างของฟอร์ม เราจะมาทำกันตามขั้นตอนต่อไปนี้
ขั้นตอนที่ 1 แก้ไขไฟล์ simpleform.html เพิ่ม JavaScript
เอาล่ะครับ แก้ไขไฟล์ simpleform.html ในข้างต้น เพิ่มโค้ดของ JavaScript เข้าไป ดังนี้
Simpleform.html (new)
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function send()
{
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4)
{
var area = document.getElementById('area');
area.innerHTML = ajaxRequest.responseText;
}
}
var name = document.getElementById('name').value;
ajaxRequest.open("GET", "serversay.php?" + "name=" + name , true);
ajaxRequest.send(null);
}
//-->
</script>
<form name=myform>
Name <input type=text name=name>
<br>
<input type=button onclick="send();" value="send">
<br>
</form>
<div id='area'>Your result will display here</div>
</body>
</html>
จากข้างต้น จะเห็นว่าเราได้เพิ่มฟังก์ชั่นชื่อว่า send() ที่เป็น JavaScript เข้าไป ซึ่งฟังก์ชั่นนี้ ดูสิครับก่อนที่จะเรียกฟังก์ชั่น open เพื่อส่งคำสั่ง GET มันจะสร้างตัวแปรในบรรทัดนี้
var name = document.getElementById('name').value;
บรรทัดนี้ มันจะสร้างตัวแปรชื่อว่า name ให้เก็บค่า ซึ่งค่านั้นก็คือค่าที่ผู้ใช้กรอกเข้าไปในช
ความเห็น (2)
ละเอียดมากๆ ไม่เคยอ่านบทความไหนที่ละเอียดและเข้าใจง่ายขนาดนี้เลย