มาเขียน AJAX กันดีกว่า # 1

AJAX คืออะไร?
AJAX ย่อมาจาก Asynchronous JavaScript and XML เป็นวิธีการเขียนที่ใช้ JavaScript ร่วมกับ XML เพื่อสื่อสารกับ Server

ทำไมต้องใช้ AJAX?
ถ้าใครเคยเขียน Web Application ที่ซับซ้อนหน่อยโดยเฉพาะงานที่ต้องมีการส่งค่าไปกลับระหวาง Server และ Client บ่อย ๆ จะเห็นว่าเราจะต้องให้ Page นั้น Reload ทุก ๆ ครั้งที่ต้องการติดต่อไปยัง Server แล้ว Server ก็จะส่งข้อมูลกลับมาใหม่ทั้งหมด ซึ่งบางครั้งข้อมูลที่ต้องการจาก Server มีเพียงเล็กน้อยเท่านั้น แต่ก็ต้อง Load ข้อมูลมาใหม่ทั้งหมด ยกตัวอย่างเช่นพวก Header หรือ Footer ซึ่งปกติจะเป็นสิ่งที่ Fix ไว้อยู่แล้ว แต่การ Reload แต่ละครั้งก็ต้องส่งข้อมูลพวกนี้มาใหม่ทุก ๆ รอบ เป็นผลให้ช้า และเปลือง Bandwidth ของ Network เป็นอย่างมาก

AJAX นั้นเข้ามาช่วยแก้จุดอ่อนตรงนี้ หลักการทำงานของ AJAX คือ จะมีการส่งและรับข้อมูลเฉพาะส่วนที่จำเป็นหรือต้องการเท่านั้น โดยใช้ JavaScript เป็นตัวกลางในการติดต่อกลับไปยัง Server ข้อมูลที่รับส่งนั้น จะอยู่ในรูปแบบของ XML (จริง ๆ แล้วไม่จำเป็นต้องเป็น XML เสมอไป ขึ้นอยู่กับเรามากกว่า) ด้วยเหตุนี้ระบบจะทำงานเร็วขึ้น พร้อมทั้งลดปริมาณของข้อมูลที่วิ่งในเครือข่าย ช่วยลด Bandwidth ของ Network ไปในตัวอีกด้วย

ตอนนี้มีใครใช้ AJAX อยู่บ้าง ?
Google เป็นผู้บุกเบิกและพัฒนา AJAX ซึ่งจะเห็นได้จาก Product เป็นจำนวนมากของ Google ที่ใช้ AJAX เช่น OrKut, Gmail, Google Groups, Google Suggess และ Google Maps เป็นต้น ส่วนค่ายอื่น ๆ นั้นเข้าใจว่าจะค่อย ๆ ทยอยตามมา เช่น Microsoft ก็อยู่ในช่วงทดลอง Hotmail ตัวใหม่ซึ่งตอนนี้ใช้ชื่อว่า Kahuna และ สามารถดู Review ได้ที่นี่

AJAX กับ ASP.NET
ในที่นี้ผมจะอธิบายการใช้ AJAX ร่วมกับ ASP.NET (C#) ซึ่งเป็นเครื่องมือตัวนึงที่ใช้ทำ Web Application ถ้าใครจะใช้ภาษาอื่นก็ตามใจนะครับ หรือจะใช้ HTML ดิบ ๆ เลยก็ได้ ขอให้ Page นั้น Return เป็น String ไปก็พอแล้ว

มาเริ่มกันเลยดีกว่า
อันดับแรก ให้ Add Web Form เข้าไปใน Project ตั้งชื่อว่า WebForm1.aspx แล้วเพิ่ม Code ตามนี้

(Click เพื่อดูรูปใหญ่)

ใน Header จะเห็นว่ามีการประกาศไฟล์ JavaScript ที่ชื่อ request.js เข้าไปด้วย ซึ่งภายในไฟล์ request.js มีรายละเอียดดังนี้

/--------------------------------------------------------------------------------------

/* XmlHttpRequest library */
/* Version 0.9.2.2, 6 May 2005, Adamv.com */
function _getXmlHttp()
{
try { return new XMLHttpRequest();}
catch (e2) {return null; }
}

function CachedResponse(response) {
this.readyState = ReadyState.Complete
this.status = HttpStatus.OK
this.responseText = response
}

ReadyState = {
Uninitialized: 0,
Loading: 1,
Loaded:2,
Interactive:3,
Complete: 4
}

HttpStatus = {
OK: 200,
NotFound: 404
}

function Request_from_cache(url, f_change) {
var result = this._cache[url];

if (result != null) {
var response = new CachedResponse(result)
f_change(response)
return true
}
else
return false
}

function Request_cached_get(url, f_change) {
if (!this.FromCache(url, f_change)){
var request = this
this.Get(url,
/* Cache results if request completed */
function(x){
if ((x.readyState==ReadyState.Complete)&&(x.status==HttpStatus.OK))
{request._cache[url]=x.responseText}
f_change(x)
},
"GET")
}
}

function Request_get(url, f_change, method) {
if (!this._get) return;

if (method == null) method="GET"
if (this._get.readyState != ReadyState.Uninitialized)
this._get.abort()

this._get.open(method, url, true);

if (f_change != null) {
var _get = this._get;
this._get.onreadystatechange = function(){f_change(_get);}
}
this._get.send(null);
}

function Request_get_no_cache(url, f_change, method){
var sep = (-1 < newurl =" url" __="" get =" Request_get" getnocache =" Request_get_no_cache" cachedget =" Request_cached_get" fromcache =" Request_from_cache" use =" function(){return" cancel =" function(){if" _cache =" new" _get =" _getXmlHttp();" _get ="=">

/--------------------------------------------------------------------------------------

ถ้าเราทำการ Run ไฟล์ WebForm1.aspx เฉย ๆ จะได้ Output เป็นแบบนี้

ถ้ากดปุ่ม Get Hello World ก็จะเป็นการเรียกฟังก์ชัน GetHello ด้วย event onclick="GetHello();" ซึ่งฟังก์ชั่น GetHello นี้จะทำงานอยู่ที่ฝั่ง Client แล้วไปเรียก Page ที่ชื่อ GetHelloWorld.aspx ซึ่งใน Page นี้มีรายละเอียดดังนี้
/--------------------------------------------------------------------------------------




/--------------------------------------------------------------------------------------

ตรง "=result" จะ Return ค่าของตัวแปรซึ่ง ประกาศไว้ในฝั่ง Codebehide ที่ชื่อ GetHelloWorld.aspx.cs ซึ่งมีรายละเอียดดังนี้

/--------------------------------------------------------------------------------------
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace TestAJAX
{
public class GetHelloWorld : System.Web.UI.Page
{
protected string result = string.Empty;
private void Page_Load(object sender, System.EventArgs e)
{
result = "Hello World !!!";
}


#region Web Form Designer generated code
//..... ตรงนี้ไม่ต้องไปแก้ไข และไม่ต้องสนใจ เพราะมัน Auto Generate มาให้อยู่แล้ว
#endregion
}
}
/--------------------------------------------------------------------------------------

ซึ่งไฟล์นี้ไม่ทำอะไรมาก แค่ return "Hello World !!!" กลับไปเท่านั้น ถ้าคุณเรียก Page GetHelloWorld.aspx แล้ว View Source ดูก็จะเห็นแค่

Hello World !!!

หลังจาก Click ปุ่ม Get Hello World จะได้ผลดังนี้

มันทำงานยังไง
หลักการทำงานของมันก็คือ เมื่อเรา Load Page ที่ชื่อ WebForm1.aspx มา และ Click ที่ปุ่ม Get Hello World ฟังก์ชั้น JavaScript ที่ชื่อ GetHello() ก็จะไปเรียกเพจที่ชื่อ GetHelloWorld.aspx แล้วได้ String เป็น Output มา จากนั้นก็มา Set ค่าของ Textbox ให้เปลี่ยนไปตาม Output ที่ได้มา จะเห็นว่า Page WebForm1.aspx นั้นไม่ต้อง Reload ใหม่ เหมือนการเขียนทั่ว ๆ ไป

ทำไมมันยากจัง ง่าย ๆ กว่านี้มีหรือเปล่า
คำตอบคือ มีครับ ถ้าคุณเคยเคยเขียน Web Application แบบธรรมดา จะเห็นว่าการเขียนแบบนี้ต้องเพิ่มภาระให้เราเป็นอย่างมาก มิหนำซ้ำการเขียน Code กับ JavaScript นั้นไม่สามารถ Debug ได้ง่าย ๆ อีกด้วย แต่ถ้าคุณขี้เกียจเขียนทุกอย่างด้วยตัวเอง คุณสามารถใช้ AJAX Libary for The Microsoft .NET Framework ซึ่งเป็นของฟรี สามารถ Download ได้ที่ Ajax.NET มา Add เข้าไปในโปรเจคของคุณ แล้วค่อยเรียกใช้ ก็ได้เหมือนกัน

การใช้ Ajax.NET Libary รอติดตามตอนต่อไปครับ วันนี้เพียงแต่ต้องการให้เข้าใจ Concept ว่า มันทำงานยังไงเพียงแค่นั้น

อ้างอิง
AJAX Links at OpenAJAX
AJAX at TheCodeProject