AJAX ( Asynchronous JavaScript and XML )

AJAX คืออะไร

AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML แปลตรงตัวแบบกำปั้นทุบดินก็คือ
เทคนิคการใช้ Javascript และ XML ทำงานแบบไม่สัมพันธ์กันตามช่วงเวลา -__-
อ่านแล้วประสาทแดกแน่นอน เดี๋ยวผมอธิบายด้วยรูปภาพดีกว่าจะได้เข้าใจง่ายๆ

รูปจาก

http://www.adaptivepath.com/publications/essays/archives/000385.php

จากรูป ด้านซ้ายเป็นรูปการทำงานของ Browser เมื่อติดต่อกับ Web Server ตามปกติ
การทำงานก็มันก็อย่างที่เราเข้าใจกันคือ เมื่อเรา เรียก url ไป Browser จะทำการติดต่อ
กับ Web Server และ Web Server ทำการประมวลผลส่งค่าเป็น HTML, Image , CSS อะไรก็แล้วแต่
กลับไปหา Browser นำไปแสดงผล

จากหลักการดังกล่าวการพัฒนาให้หน้า Web แสดงผลแบบมีชีวิตชีวา เช่นการแสดงผลข้อมูลแบบ
Realtime ไม่ว่าจะเป็นข้อมูลข่าวสารที่มีการเปลี่ยนแปลงอย่างทันด่วน ยกตัวอย่าง ราคาหุ้น
มีการเปลี่ยนแปลงทุกวินาที หากการติดต่อแบบนี้ Browser ต้องเรียกขอข้อมูลใหม่กับ
Web Server ทุกๆครั้ง

หลายๆท่านอาจจะบอกว่า ใน HTML ก็มี Tag ที่ว่าให้ใช้แล้วนั้นก็คือ

ก็ใช่ครับ แต่การใช้ Tag refresh นั้นเป็นการเปลี่ยนแปลงทั้งหน้าจอ
บางครั้งข้อมูลที่ต้องการเป็นข้อมูลแค่กรอบๆเดียวในหน้า web การ refresh ทั้งหน้า
จึงไม่ใช่คำตอบที่ดี (ก็เห็นหลายๆ Web ดันทุรังกันด้วย ใช้ IFRAME อยู่ดี เอาจนได้แหล่ะครับอิอิ)

คราวนี้มาดูหลักการของ AJAX ทางด้านขวาบ้างสิ่งที่เราเห็นก็คือจากรูปจะมีสิ่งที่เรียกว่า AJAX Engine
เข้ามาคั้นกลาง เจ้า AJAX Engine นี้จะทำหน้าที่เป็นตัวกลางในการติดต่อ และนำข้อมูลมาแสดงผลให้กับ
Browser เจ้า AJAX Engine นี้ถูกเขียนด้วย Javascript ครับโดยการที่มันมาคั้นกลางนี้ เราสามารถกำหนด
การรูปแบบการติดต่อของ AJAX Engine ตามเงื่อนไขของ Javascript ที่สร้างขึ้นได้

- ทำให้เราสามารถกำหนดได้ว่า เราอยากให้ tag html ก้อนนี้เปลี่ยนแปลงหน้าตาใหม่ทุกๆ 5 วินาที
- ทำให้เราเปลี่ยนแปลงข่าวสารใหม่ๆได้ตลอดเมื่อมีข้อมูลใหม่เข้ามา (โดยไม่ต้องเรียก Load หน้าใหม่)

จากรูปจะเห็นว่าสิ่งที่ส่งกลับมาให้ AJAX Engine นั้นจะเป็น XML Data ความจริงไม่จำเป็นก็ได้ครับ ^^
ถ้าขี้เกียจตัดข้อมูลก็สามารถนำ HTML มาแปะแสดงก็ได้ ตามรูปเป็นแนวคิดเท่านั้นเอง

รูปจาก

http://www.adaptivepath.com/publications/essays/archives/000385.php

จากรูปเป็นการขยายความของคำว่า Asynchronous ครับให้เราพิจารณาว่า
หาก Browser กับ Web Server มีการ synchronous ระบบดังกล่าวก็คือ

Browser เรียก -> Web Server ตอบ -> Browser รับทราบ แสดงผล
Browser เรียก -> Web Server ตอบ -> Browser รับทราบ แสดงผล

ไปเรื่อยๆ จะเห็นว่า Browser จะทำงานสัมพันธ์กับ Web Server เรียก -> ตอบ -> แสดงผล

แต่กรณีที่ เป็น AJAX นั้น การ Asynchronous นั้นก็คือ

Browser เรียก-> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ แสดงผล -> Browser รับทราบ แสดงผล
Browser ไม่เรียก -> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ บอกว่าไม่ต้องแสดงผล -> Browser รับทราบไม่แสดงผล
Browser ไม่เรียก -> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ แสดงผล -> Browser รับทราบ แสดงผล

กล่าวคือคำว่า Asynchronous มันก็หน้าที่ของ AJAX ที่มาคั้นการไม่ให้ Browser และ Web Server
ทำงานสัมพันธ์กันนั้นแหล่ะ

ส่วนเหตุที่มีคำว่า XML มาด้วย เนื่องจากการเขียน Javascript แบบ AJAX นี้มีการเข้าไปเรียกใช้ Object ของ XMLHTTP
เราจึงให้เกียรติใส่เข้าคำว่า XML ไปด้วย อิอิ ซึ่งจริงๆแล้วข้อมูลอาจจะไม่จำเป็นต้องเป็น XML ก็ได้

อธิบายให้พอคร่าวๆพอเข้าใจก็พอครับ เพราะ อยากให้เข้าใจแนวคิดในรูปแรก ก็พอ
พอเข้าใจแนวคิดรูปแรกแล้วจะกระจ่างในเรื่องต่อไปครับ

ก่อนจะตะลุยผมขอเพิ่มเติมความรู้เรื่อง HTML Javascript ก่อนนะครับ

DIV, innerHTML คือเครื่องมือของเรา

DIV

Tag DIV มันเป็นเหมือน หมุด กำหนด กลุ่ม HTML กล่าวคือ ตัวของ Tag เอง
ไม่มีผลต่อการแสดงผล ของ HTML

เช่น

<div>ข้อความๆ</div>

ผลที่ได้

ก็คือแสดงข้อความตามปกติ

แต่ DIV จะมีความหมายก็ต่อเมื่อเรากำหนดคุณสมบัติให้มัน
เช่น การกำหนดตำแหน่ง ซ้ายขวา กำหนด Style และการแสดงผล

<div align="center">ข้อความๆ</div>
<div align="left">ข้อความๆ</div>
<div align="right">ข้อความๆ</div>
<div style="display: none;">ข้อความถูกซ่อน</div>

ผลที่ได้

จะเห็นว่า การกำหนดคุณสมบัติของ DIV จะมีผลต่อ DIV นั้นโดยตรง
ส่วนใหญ่จากการเขียน AJAX ของผม ผมจะใช้ DIV
- เป็นหมุดในการดึงข้อมูลใน DIV ออกมาแสดงผลหรือเปลี่ยนแปลงข้อมูล
- เป็นหมุดในการเปิดปิดการแสดงผล
ฉะนั้นเราต้องระบุชื่อให้กับ DIV นั้นๆด้วย

สรุปก็คือ

ก็จะเป็นรูปแบบสุดท้ายให้อ่านพอเข้าใจครับเดี๋ยวศึกษาเพิ่มเติมจาก ตัวอย่างอีกที

innerHTML

อธิบายไงดีหว่า -__- เป็นการกำหนดว่าสิ่งที่ถูกกำหนดด้วย innerHTML จะแสดงคุณสมบัติเป็น HTML นั้นเอง

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changediv(text){
textshow.innerHTML = text;
}
</SCRIPT>
<BODY>
<br>
<br>
<div id="textshow">ยังไม่มีการคลิกครับ</div>
<br>
<br>
<a href="javascript:changediv('<H1>ข้อความ ขนาด H1</H1>');">ทดสอบ H1</a><br>
<a href="javascript:changediv('<u>ข้อความขีดเส้นใต้</u>');">ทดสอบขีดเส้นใต้</a><br>
<a href="javascript:changediv('<font color=#FF0000>ข้อความๆ</font>');">ทดสอบข้อความสีๆ</a><br>
</BODY>
</HTML>

ลองเรียก Link ต่างๆดูครับ

เรื่อง DIV, innerHTML ก็คงเป็นแนวคิดและมันสามารถช่วยเพิ่มสีสรรให้กับหน้า HTML แห้งๆ
ได้ดีมากลองดูตัวอย่างอีกตัวจาก www.settrade.com

เจ้าเมนูนี้หากเราลองคลิกดูแล้วเมนูจะมีการเปลี่ยนแปลงทันทีโดยไม่มีการ Load ใหม่
หลักการของเมนูแบบนี้ก็คือ การสร้าง Div ไว้หลายๆตัวคือ เริ่มแรกให้ Load ทุกตัว
เข้ามาและกำหนดให้ ซ่อนเอาไว้ เหลือแสดงตัวเดียว และเมื่อมีการคลิก Link ก็ให้เปลี่ยนแปลง
คุณสมบัติของ DIV นั้น

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function showdiv(id){

if (id == 1){
menu1.style.display = '';
menu2.style.display = 'none';
menu3.style.display = 'none';
menu4.style.display = 'none';
menu5.style.display = 'none';
}
if (id == 2){
menu1.style.display = 'none';
menu2.style.display = '';
menu3.style.display = 'none';
menu4.style.display = 'none';
menu5.style.display = 'none';
}
if (id == 3){
menu1.style.display = 'none';
menu2.style.display = 'none';
menu3.style.display = '';
menu4.style.display = 'none';
menu5.style.display = 'none';
}
if (id == 4){
menu1.style.display = 'none';
menu2.style.display = 'none';
menu3.style.display = 'none';
menu4.style.display = '';
menu5.style.display = 'none';
}
if (id == 5){
menu1.style.display = 'none';
menu2.style.display = 'none';
menu3.style.display = 'none';
menu4.style.display = 'none';
menu5.style.display = '';
}
}
</SCRIPT>
<BODY>
<br>
<br>

หมดกระบวนท่าของ DIV และ innerHTML แล้วครับหวังว่าคงได้แนวคิดกัน
ต่อไปผมจะเข้าเรื่อง AJAX จริงๆแล้วว่ามันจะทำงานอย่างไร

้เนื่อหาบทความนี้ค่อนข้างยาวและอยากปูพื้นความเข้าใจก่อน ถ้าท่านใดมีปัญหาสงสัยก็ post ถามกันได้นะครับจะได้อธิบายเป็นจุดๆไป

AJAX จากโจทย์ตัวอย่าง

หลังจากได้เข้าใจไอเดียและหลักการของ AJAX แล้วผมจะเริ่มการเขียน AJAX โดยขอยกตัวอย่างขึ้นมาให้ลองเล่นกันดู
จริงๆมันเป็นวิธีการสอนที่ผิดหลักการวิชาครุศาสตร์โดยสิ้นเชิงเล่นไม่บอกเนื้อหาเลยล่อตัวอย่างซะแล้ว -__- เอาน่ะลองดู อิอิ

โจทย์ที่ 1 ทำ Script แปลงตัวเลขเป็นตัวอักษร

ออกแนวปัญญาอ่อนแบบนี้แหล่ะครับจะให้เห็นการทำงานและส่งค่าของ AJAX กับ Server

1. อันดับแรกทำ Script ฝั่ง Server ด้วย php เพื่อแปลงตัวเลขเป็นตัวอักษรก่อน

อันนี้ผมไปตบมา -__- นิสัยเสียจริงๆ จำไม่ได้ว่า เอามาจากไหน คุ้นๆว่าจาก php.deeserver.com นี่แหล่ะ

num2text.php

<?
function num2thai($number){
$t1 = array("ศูนย์", "หนึ่ง", "สอง", "สาม", "สี่", "ห้า", "หก", "เจ็ด", "แปด", "เก้า");
$t2 = array("เอ็ด", "ยี่", "สิบ", "ร้อย", "พัน", "หมื่น", "แสน", "ล้าน");
$zerobahtshow = 0; // ในกรณีที่มีแต่จำนวนสตางค์ เช่น 0.25 หรือ .75 จะให้แสดงคำว่า ศูนย์บาท หรือไม่ 0 = ไม่แสดง, 1 = แสดง
(string) $number;
$number = explode(".", $number);
if(!empty($number[1])){
if(strlen($number[1]) == 1){
$number[1] .= "0";
}elseif(strlen($number[1]) > 2){
if($number[1]{2} < 5){
$number[1] = substr($number[1], 0, 2);
}else{
$number[1] = $number[1]{0}.($number[1]{1}+1);
}
}
}
for($i=0; $i<count($number); $i++){
$countnum[$i] = strlen($number[$i]);
if($countnum[$i] <= 7){
$var[$i][] = $number[$i];
}else{
$loopround = ceil($countnum[$i]/6);
for($j=1; $j<=$loopround; $j++){
if($j == 1){
$slen = 0;
$elen = $countnum[$i]-(($loopround-1)*6);
}else{
$slen = $countnum[$i]-((($loopround+1)-$j)*6);
$elen = 6;
}
$var[$i][] = substr($number[$i], $slen, $elen);
}
}
$nstring[$i] = "";
for($k=0; $k<count($var[$i]); $k++){
if($k > 0) $nstring[$i] .= $t2[7];
$val = $var[$i][$k];
$tnstring = "";
$countval = strlen($val);
for($l=7; $l>=2; $l--){
if($countval >= $l){
$v = substr($val, -$l, 1);
if($v > 0){
if($l == 2 && $v == 1){
$tnstring .= $t2[($l)];
}elseif($l == 2 && $v == 2){
$tnstring .= $t2[1].$t2[($l)];
}else{
$tnstring .= $t1[$v].$t2[($l)];
}
}
}
}
if($countval >= 1){
$v = substr($val, -1, 1);
if($v > 0){
if($v == 1 && $countval > 1 && substr($val, -2, 1) > 0){
$tnstring .= $t2[0];
}else{
$tnstring .= $t1[$v];
}
}
}
$nstring[$i] .= $tnstring;
}
}
$rstring = "";
if(!empty($nstring[0]) || $zerobahtshow == 1 || empty($nstring[1])){
if($nstring[0] == "") $nstring[0] = $t1[0];
$rstring .= $nstring[0]."บาท";
}
if(count($number) == 1 || empty($nstring[1])){
$rstring .= "ถ้วน";
}else{
$rstring .= $nstring[1]."สตางค์";
}
return $rstring;
}

header('Content-Type: text/html; charset=tis-620');
$id = $HTTP_GET_VARS["id"];
echo num2thai($id);
?>

เป็น Script แปลงตัวเลขเป็นตัวอักษรธรรมดาครับ โดยกำหนดผ่าน Get parameter ด้วยตัวแปร id

header('Content-Type: text/html; charset=tis-620');

ผมลองทดสอบกับ Server ผมมันมีปํญหาว่าถ้าไม่ใส่ Text ที่ออกมาจะไม่เป็นภาษาไทย ก็เลยระบุเอาไว้ให้ชัวร์ๆน่ะครับไม่มีอะไร

ผลที่ได้ลองใส่ id = 123456 ไปลงก็ OK

2. อันดับสองทำหน้า HTML Form กรอกตัวเลขเป็นกรอบรอเขียน AJAX

num2txt.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Form แปลงตัวเลขเป็นตัวอักษร</title>
</head>
<body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><strong>ตัวเลขที่แปลงเป็นตัวอักษรแล้ว</strong><br><div id="numtxt"><font color="#FF0000"> <br>
ยังไม่ได้กรอกข้อมูลจ้า<br>
</font></div></td>
</tr>
</table>
 
<form name="form1">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>กรุณากรอกตัวเลขที่ต้องการแปลง<br>
<input name="id" type="text" id="id" size="50" maxlength="20">
<br>
<br>
<input type="button" name="Button" value=" แปลงค่า "></td>
</tr>
</table>
</form>
</body>
</html>

Form ที่จะใช้แปลงค่า มีช่องให้กรอกตัวเลขและส่วนที่ใช้แสดงผลค่าที่ส่งกลับมา
ในที่นี้ผมจะให้แสดงใน <div id="numtxt">

3. ลง Code ส่วน AJAX ได้เลย

เมื่อเริ่มเขียน AJAX เราก็เริ่มจากการกำหนด Object XMLHTTP ขึ้นมาก่อนแต่เนื่องจากว่า Browser หลายเจ้าก็ต่างมี Object จัดการเรื่อง XMLHTTP
ต่างกันไป ผมก็สรุปเป็น Function (จริงๆก็ copy ตามๆกันมาแหล่ะ) ได้ดังนี้

function newXmlHttp(){
var xmlhttp = false;

try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}

if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function javascript นี้จะทำการพยายามเปิด Object ไล่ไปตามลำดับ คือ อันไหนเปิดได้ก็ใช้อันนั้นแหล่ะครับ
เมื่อเปิด function ได้ก็จะส่งค่า return กลับไป

มาดู Script ในส่วนการแปลงค่าตัวเลขเป็นข้อความกันเลยครับ

function num2text(){

var id = document.form1.id.value;
var url = "/ctdd/web/ajax/num2txt.php?id="+id

xmlhttp = newXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);

document.getElementById("numtxt").innerHTML = xmlhttp.responseText;

}

การทำงานของ function num2text ก็คือจะอ่านค่าตัวเลขที่ได้จาก form มาลงตัวแปร id
ตัวแปร id ก็จะผูกเป็น url ลงตัวแปร url ส่งไปเข้า การ xmlHttp ทำการติดต่อกับ Server แบบ Get method
แล้วค่าที่ return กลับมาจาก Server (ก็คือข้อมูลที่แปลงเป็นตัวอักษรแล้ว) จะ ถูก innerHTML แสดงผลใน Div numtxt

จบหลักสูตร AJAX ละคร๊าบ ฮา ว่าแล้วสรุป HTML ทั้งหมดได้ดังนี้

num2txt.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Form แปลงตัวเลขเป็นตัวอักษร</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function newXmlHttp(){
var xmlhttp = false;

try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}

if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}

return xmlhttp;
}

function num2text(){
var id = document.form1.id.value;
var url = "/ctdd/web/ajax/num2txt.php?id="+id

xmlhttp = newXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);

document.getElementById("numtxt").innerHTML = xmlhttp.responseText;
}
//-->
</SCRIPT>
</head>
<body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><strong>ตัวเลขที่แปลงเป็นตัวอักษรแล้ว</strong><br> <br><div id="numtxt"><font color="#FF0000">
ยังไม่ได้กรอกข้อมูลจ้า<br>
</font></div></td>
</tr>
</table>
 
<form name="form1">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>กรุณากรอกตัวเลขที่ต้องการแปลง<br>
<input name="id" type="text" id="id" size="50" maxlength="20">
<br>
<br>
<input type="button" name="Button" value=" แปลงค่า " onclick="num2text();"></td>
</tr>
</table>
</form>
</body>
</html>

Download ไปลองซะ

num2txt.zip

Form เมื่อเสร็จเรียบร้อยแล้ว

กรอกข้อมูลลงไปแล้วคลิกแปลงค่า

ข้อมูลเมื่อคลิกปุ่ม แปลงค่า ไป Javascript จะเปิด Socket เข้ากลับมาที่ Server โดยส่ง Parameter ตามที่เรากำหนดไว้

ข้อสังเกต

การเขียน AJAX คุณจะไม่สามารถ Socket AJAX ข้าม Server ได้เช่น file html วางไว้ที่ Scriptdd.com แต่จะ AJAX ไป หา Sixhead.com เพื่อเรียกใช้งาน
แบบนี้ไม่ได้นะครับ เพราะเป็นเรื่องความปลอดภัย ... คิดดูถ้าทำได้คง ฮาดี เอา Javascript Socket ตัดหน้าแสดงผลดึง Content มาเป็นของตัวเองกัน
มันส์เลย

Welcome

AJAX ( Asynchronous JavaScript and XML )

0 ความคิดเห็น :

แสดงความคิดเห็น

AJAX ( Asynchronous JavaScript and XML )

Next

บทความใหม่กว่า

Previous

บทความที่เก่ากว่า

0 ความคิดเห็น :

แสดงความคิดเห็น