First step in Ajax « ห้องลับ

26Aug

First step in Ajax

Posted by คลีนโค้ด | Category: Web applications | No Comments

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

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

สำหรับเพื่อนๆ คนใด อยากอ่านภาพรวม “ทำไมต้องใช้ Ajax?“ คลิกอ่านเพิ่มเติมได้ที่นี่ครับ

ตัวอย่างจะมี 2 ข้อคือ

Prevent duplicate code or text (ป้องกันไม่ให้ข้อมูลซ้ำกัน)
Cascade dropdownlist

เราจะแบ่งการ coding เป็น 2 ส่วน Client-side scripting ใช้ Javascript และ Server-side scripting ใช้ PHP

ตัวอย่างแรก Prevent duplicate code or text เราจะเจอกันบ่อยเช่น เช็คว่า Username หรือเช็ครหัสสินค้าว่าซ้ำไหม ใช้มากในการเช็คความถูกต้องของข้อมูล (Data validation) ก่อนจะถูกจัดเก็บในฐานข้อมูล

ผมประกาศ Array ไว้ตัวนึง เก็บรหัส A001, A002, A003, A004 และ A005 เมื่อเราคีย์รหัสลงใน TextBox ที่ตรงกับใน Array ตัวโปรแกรมจะพ่นข้อความสีแดง และล็อคปุ่ม Save

ตัวอย่างที่ 2 Cascade dropdownlist ผมประกาศ Array ไว้ตัวนึง เช่นเดียวกับตัวอย่างแรก แต่เก็บความสัมพันธ์ของ Main category (ยี่ห้อของ Notebook) และ Subcategory (รุ่นของ Notebook นั้นๆ) เอาไว้ เมื่อเราเลือก dropdownlist ตัวแรก โปรแกรมจะเลือกเฉพาะรุ่นของ Notebook นั้นๆ ใน dropdownlist ที่ 2

ตัวอย่าง : First step in Ajax

พอจะเห็นวิธีการทำงานคร่าวๆ ของโปรแกรมกันนะครับ คราวนี้ลองมาดูหลักการทำงานของโค้ดทั้ง 2 ส่วนกัน

โค้ดส่วนหน้าบ้าน Html และ Javascript

ตัวอย่างที่ 1 เมื่อเราคีย์รหัสลงใน TextBox โปรแกรมจะดักจับ OnBlur event ด้วยฟังก์ชัน chkDuplicateCode โดยจะส่งรหัสดังกล่าวไปเช็คที่ฝั่ง Server เมื่อประมวลผลเสร็จ Ajax จะดักจับ response ที่ตอบกลับมา และแสดงผลบนหน้าจอ

ตัวอย่างที่ 2 เมื่อเราเลือก dropdownlist ตัวแรก โปรแกรมจะดักจับ OnChange event ด้วยฟังก์ชัน selectSubCat โดยจะส่งค่าจาก dropdownlist ตัวแรก ไปเช็คที่ฝั่ง Server เมื่อประมวลผลเสร็จ Ajax จะดักจับ response ที่ตอบกลับมาจาก Server และสร้าง option ภายใต้ dropdownlist ตัวที่สอง และแสดงผลบนหน้าจอ

Html ในไฟล์ ajax01.htm

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>First step in Ajax</title>

  <link rel="stylesheet" type="text/css" href="workshop.css" />

</head>

<center>

  <span class="header">First step in Ajax</span> 

  <span class="link">

    by <a href="http://honglub.com">Honglub.com</a>

  </span>

</center>

<span id="ex1">

  <h1>Ex. 1</h1>

  <span class="content">

    <input id="txtCode" name="txtCode" class="textbox" maxlength="4" onblur="chkDuplicateCode();" />

    <br /><span id="reqCode" class="required"></span>

  </span>

  <span class="content">

    <input id="btnSave" type="button" value="Save" class="button" onclick="saveForm();" />&nbsp;

    <input id="btnCancel" type="button" value="Cancel" class="button" onclick="clearForm(‘ex1′);" />

  </span>

  <br /><br />

</span>

<hr class="line" />

<span id="ex1">

<h1>Ex. 2</h1>

<select id="ddlMainCat" class="ddl" onchange="selectSubCat();">

  <option value="">–Select–</option>

  <option value="Lenovo">Lenovo</option>

  <option value="Toshiba">Toshiba</option>

  <option value="Dell">Dell</option>

</select>&nbsp;

<select id="ddlSubCat" class="ddl" disabled="disabled"></select>

<br /><br />

</span>

</html>

Javascript ในไฟล์ ajax01.htm

โค้ดส่วนหลังบ้าน PHP

ตัวอย่างที่ 1 และ 2 ในส่วนนี้ ใช้การเช็ค Array แบบง่ายๆ เนื่องจากผมรวมทั้ง 2 ตัวอย่าง ในไฟล์ PHP ตัวเดียวกัน จึงได้แอบส่งพารามิเตอร์ตัวนึง ชื่อ method มีค่าเป็น EX1 และ Ex2 เพื่อใช้ในการแยกการทำงาน

<?php
$method=strtoupper(stripslashes($_GET["method"]));
if("EX1"==$method)
{
$arr=array("A001","A002","A003","A004","A005");
$code=strtoupper(stripslashes($_GET["code"]));
if(""==$code){
echo"false|Code is empty";
}
else{
if(in_array($code,$arr))
echo"true|".$code." is duplicated.";
else
echo"false|Code is not duplicated";
}
}
elseif("EX2"==$method){
$cat=strtoupper(stripslashes($_GET["cat"]));
$arr=array(
"LENOVO"=>array("IdeaPad Z460","IdeaPad Z465",
"IdeaPad Z470","IdeaPad Y570",
"IdeaPad NoteBook U160"),
"TOSHIBA"=>array("Satellite Pro C640-1056X",
"Satellite Pro C640-1049XT",
"Satellite L735-1076XTB",
"Satellite L735-1077XTR",
"Satellite L735-1078XTW"),
"DELL"=>array("Vostro 3300","Vostro 3400",
"Vostro V130","Latitude E5410",
"Latitude E5510")
);
  if(!is_array($arr[$cat])) 

    echo "";

  else

    echo implode("|", $arr[$cat]);

}

?>

สำหรับเพื่อนๆ ที่ใช้ jQuery ผมมีโค้ดตัวอย่างให้ลองกัน คลิกที่นี่ครับ First step in Ajax with jQuery

คราวหน้าผมจะทำตัวอย่าง โดยส่งข้อมูลกลับในรูปแบบ XML (responseXml) นะครับ

อ่านย้อนหลัง : ทำไมต้องใช้ Ajax?

จัดทำโดยทีมงาน คลีนโค้ด

No Comments.

ห้องลับ