0 Comments | Posted by Mr. Moc in Programming
การใช้ AJAX สร้าง Sign up Form
AJAX = Asynchronous JavaScript and XML
AJAX ไม่ใช่ภาษา Programming ใหม่ แต่เป็นเทคนิคและวิธีการที่ทำให้เราทำงานได้เร็วขึ้น ง่ายขึ้น มีการโต้ตอบกันสวยงามขึ้นบนหน้าเว็บ
AJAX สามารถติดต่อไปยัง Server ดโดยตรงได้โดยการใช้ XMLHttpRequest object. ด้วย object ตัวนี้ (มาพร้อมกับ Javascript) ทำให้เราสามารถรับ-ส่งข้อมูลได้โดยไม่ต้องมีการ Refresh หน้าจอ
AJAX สามารถแลกเปลี่ยนข้อมูลที่ไม่มากนัก เพราะฉะนั้้นเราไม่ควรพยายามที่จะส่งหน้า Page ทั้งหน้า (พวกทีมี Javascript และ Flash เยอะๆ)
เริ่มสร้างกันเลย
ขั้นตอนที่ 1 . สร้าง Sign up Form ปล่าวๆ ตัว form ที่ใช้กับ AJAX อาจจะแปลกนิดนึงตรงที่เราไม่จำเป็นต้องมี action attribute ของ <form> tag เพราะเราจะใช้ความสามารถของ DOM เพื่อใช้งาน Object ต่างๆบนหน้า HTML document.
Code HTML ของ Form ของเรา (index.html)
<form>
<label>First Name</label><input type=’text’ name=’first_name’ id=’first_name’ /><br />
<label>Last Name</label><input type=’text’ name=’last_name’ id=’last_name’ /><br />
<label>Email</label><input type=’text’ name=’email’ id=’email’ /><br />
<input type=’submit’ value=’Register’ />
</form>
หน้าตาของ Form จะออกมาเป็นแบบนี้
เรื่องความสวยงามของ Form อันนี้้ก็แล้วแต่ความสามารถของแต่ละคนแล้วล่ะครับ 
1.เตรียม Code หน้า Sign Up เพื่อไว้รอรับข้อมูลจาก Form ก่อน
มาถึงขั้นตอนที่เราจะเขียน Code PHP เพื่อรับข้อมูลจาก Form กันแล้ว โดยปกติเราจะส่งข้อมูลไปยังหน้าต่อไปนั้น จะนิยมใช้การส่งข้อมูลแบบ POST และ GET ซึ่งทาง PHP ได้สร้าง Global Variables เอาไว้รองรับแล้ว ชื่อว่า $_POST และ $_GET ตรงๆตัวครบ และแถมยังใจดี สร้างตัวแปรที่ชื่อว่า $_REQUEST เพื่อมาไว้รองรับ การส่งข้อมูลทางการ Submit ได้ทั้สองแบบคือ POST and GET ไม่ว่าจะส่งมาแบบใดก็ได้ครับ (ส่วนตัวผมชอบใช้ตัวนี้ สะดวกดี ดังนั้นขอใช้อันนี้ละกันนะครับ)
สำหรับ Code PHP ที่เราเอาไว้รับ Sign up data เป็นดังนี้ (signup.php)
<?
echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].”<br />”;
echo “Email : “.$_REQUEST['email'].”<br />”;
?>
2.เตรียม Code AJAX และ DIV ของการแสดงผล
เพิ่มเติมตรงปุ่ม Submit ให้เรียบร้อย จาก
<input type=’submit’ value=’Register’ />
เปลี่ยนเป็น
<input type=’submit’ value=’Register’ onclick=’sendRequest();’ />
ส่วน Function sendRequest(); จะเป็นของ AJAX code ดังนี้
<script>
var xmlhttp
function sendRequest()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (”Your browser does not support XMLHTTP!”);
return;
}
// ใช้ DOM เพื่อ ดึงค่าจาก first name text box
var first_name = document.getElementById(’first_name’).value;
// ใช้ DOM เพื่อ ดึงค่าจาก last name text box
var last_name = document.getElementById(’last_name’).value;
// ใช้ DOM เพื่อ ดึงค่าจาก email
var email = document.getElementById(’email’).value;
var url=”signup.php”;
// ชื่อ file ของ script ปลายทาง
url=url+”?first_name=”+first_name;
url=url+”&last_name=”+last_name;
url=url+”&email=”+email;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(”GET”,url,true);
xmlhttp.send(null);
// ส่งข้อมูลไปยังปลายทาง
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(”result”).innerHTML=xmlhttp.responseText;
//รับข้อมูลและแสดงใน DIV ที่ต้องการ (เราต้องสร้าง DIV ชื่อ result เพื่อไว้แสดงผล)
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(”Microsoft.XMLHTTP”);
}
return null;
}
</script>
เมื่อรวม ทั้งหมดเข้าด้วยกัน จะได้ code ทั้งหมด ดังนัี้
1.
index.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>AJAX-Example Form : DeeMocDIY Whitepaper</title>
<script>
var xmlhttp
function sendRequest()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (”Your browser does not support XMLHTTP!”);
return;
}
var first_name = document.getElementById(’first_name’).value;
var last_name = document.getElementById(’last_name’).value;
var email = document.getElementById(’email’).value;
var url=”signup.php”;
url=url+”?first_name=”+first_name;
url=url+”&last_name=”+last_name;
url=url+”&email=”+email;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(”GET”,url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(”result”).innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(”Microsoft.XMLHTTP”);
}
return null;
}
</script>
</head>
<body>
<br /><br />
<center>
<div id=’result’ style=’border:1px solid #ddd; padding:5px; margin:3px; width: 300px;’></div>
<br /><br />
<form>
<label>First Name :</label><input type=’text’ name=’first_name’ id=’first_name’ /><br />
<label>Last Name :</label><input type=’text’ name=’last_name’ id=’last_name’ /><br />
<label style=’padding-right:10px;’>Email :</label><input type=’text’ name=’email’ id=’email’ /><br />
<input type=’button’ value=’Register’ onclick=’sendRequest();’ />
</form>
</center>
</body>
</html>
2. signup.php
<?
echo “Name : “.$_REQUEST['first_name'].” “.$_REQUEST['last_name'].”<br />”;
echo “Email : “.$_REQUEST['email'].”<br />”;
?>
ผลลัพธ์ที่ได้ ออกมาเป็นแบบนี้
เป็นอย่างไรบ้างครับ การส้ราง Register Form โดยใช้ AJAX ง่ายมากใช่มั้ยครับ ส่วนเราสามารถเอาไปต่อยอดได้โดย เช่น
เพิ่ม Script Validation ของ Form หรือ เอาข้อมูลจากหน้า signup.php ไปลง database เป็นต้น หากมีข้อสงสัยติดต่อมาได้ที่
watcharagon@deemoc.com นะครับ ส่วนบทต่อไปจะเป็นเรื่องเกี่ยวกับการใช้ RSS reader & Parser นะครับ สนุกแน่นอนครับ
