AJAX (Asynchronous JavaScript and XML)
เป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น
โดยการรับส่งข้อมูลในฉากหลัง
ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง
ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม
ภาพเปรียบเทียบการติดต่อสื่อสาร
ระหว่างเว็บแอปพลิเคชันแบบดังเดิมกับแบบที่ใช้ เอแจ็กซ์
องค์ประกอบของ AJAX
JavaScript
AJAX ใช้ JavaScript
ควบคุมการแสดงข้อมูล รวมทั้งโต้ตอบกับผู้ใช้
กล่าวได้ว่าการทำงานหลักๆ ที่เกี่ยวข้องกับการตอบสนองผู้ใช้จะเป็นหน้าที่ของ JavaScript
ทั้งสิ้น
XML
AJAX
ได้ดึงความสามารถของ XML มาเป็นสื่อกลางในการสื่อสารข้อมูลระหว่างเว็บบราวเซอร์กับเว็บเซิร์ฟเวอร์ทำให้แอปพลิเคชั่นทำงานได้มีประสิทธิภาพมากขึ้น
และเร็วขึ้น
CSS
AJAX ได้นำความสามารถของ
CSS มาใช้กำหนดโครงสร้างหรือลักษณะการแสดงผลของเว็บเพจ
และส่งผลให้การแสดงผลที่มีลักษณะซ้ำๆ กันเป็นไปอย่างรวดเร็ว
DOM
AJAX ได้ดึงความสามารถของ
DOM ทำให้สามารถจัดการกับเอการ XHTML (HTML) หรือ XML ได้อย่างมีประสิทธิภาพ อีกทั้งทำให้โค๊ดของเว็บแอปพลิเคชั่นที่ใช้
AJAX มีความเป็นระเบียบง่ายต่อการจัดการ
XMLHttpRequest
Object
โปรโตคอล HTTP
สร้างการเชื่อมต่อระหว่างบราวเซอร์กับเว็บเซิร์ฟเวอร์ XMLHttpRequest
ถือได้ว่าเป็นส่วนสำคัญในการพัฒนาเว้บแอปพลิเคชั่นที่ใช้ AJAX
XSLT
และ Xpath
AJAX ได้ใช้ XSLT
ซึ่งตัวมันเองใช้ XPath เพื่อจะสร้างผลลัพธ์ที่ต้องการจากข้อมูล
mark-up ที่เป็น XML
ข้อดีของ AJAX
v ขนาดการรับส่งข้อมูล
- เทคนิคเอแจ็กซ์นั้นสามารถสร้าง HTML ได้ในเครื่องผู้ใช้
ทำให้ขนาดข้อมูลนั้นเล็กลงในครั้งต่อๆไป
v สามารถส่งเพียงข้อมูล
และคำสั่งจาวาสคริปต์ลงมาเฉพาะส่วนที่มีการเปลี่ยนแปลง
แทนที่จะต้องส่งข้อมูลใหม่หมดมาทั้งหน้า
ซึ่งทั้งนี้ขึ้นอยู่กับการออกแบบของเว็บแอปพลิเคชันนั้นๆ
v มีความรวดเร็วในการตอบสนอง
- เนื่องจากการใช้เทคนิค
v เอแจ็กซ์นั้นทำให้การเปลี่ยนแปลงต่างๆ
เช่นการแก้ไข เพิ่มเติม ลบทิ้งรายการข้อมูล หรือการดึงข้อมูลที่ต้องการจะค้นหานั้น
สามารถทำได้ในฉากหลัง ทำให้ผู้ใช้รู้สึกการตอบสนองนั้น
คล้ายคลึงกับโปรแกรมคอมพิวเตอร์
มากกว่าเว็บปกติที่ต้องรอโหลดใหม่ทั้งหน้าสำหรับการเปลี่ยนแปลงต่างๆ
ข้อเสียของ AJAX
v มีปัญหาการใช้งานเกี่ยวกับปุ่ม
"ย้อนกลับ" - เนื่องจากว่าเทคนิค เอแจ็กซ์นั้นทำงานในฉากหลัง
และไม่ได้เรียกหน้าใหม่ ทำให้เวลาใช้ปุ่ม "ย้อนกลับ" (back)
ในเว็บเบราว์เซอร์ อาจจะไม่ได้หน้าที่ควรจะเป็น
ผู้พัฒนานั้นได้คิดค้นวิธีการแก้ไขปัญหานี้หลากหลายรูปแบบด้วยกัน
v มีปัญหาในการคั่นหน้า
- เนื่องจากว่าข้อมูลสามารถเปลี่ยนแปลงโดยไม่ต้องโหลดหน้าใหม่นั้น
ทำให้ยากต่อการที่จะคั่นหน้าในสถานะปัจจุบันที่ต้องการ
v เวลาที่ใช้ในการรับส่งข้อมูล
- เนื่องจากว่าผู้ใช้อาจจะรู้สึกถึงความล่าช้าได้
ซึ่งในหลายกรณีผู้ใช้อาจจะไม่เข้าใจถึงสาเหตุ. ความล่าช้าในเทคนิค
เอแจ็กซ์นั้นจะเห็นได้ชัดกว่าการโหลดหน้าใหม่ทั้งหน้า
v ปัญหาความเข้ากันได้กับเสิร์ชเอนจิน
- ผู้พัฒนายังต้องคำนึงการออกแบบ
ที่จะให้เสิร์ชเอนจินต่างๆนั้นสามารถอ่านและจัดทำดัชนีได้.
ปัญหานี้ไม่ใช่ปัญหาที่เกิดขึ้นกับเว็บแอปพลิเคชันที่ใช้เทคนิค เอแจ็กซ์เท่านั้น
แต่ยังเกิดขึ้นกับเว็บที่ดึงข้อมูลหน้าใหม่ทั้งหมดจากการตอบรับ เช่น กดปุ่ม
เป็นต้น
v ความน่าเชื่อถือของจาวาสคริปต์
- เนื่องจากว่าเอแจ็กซ์ใช้จาวาสคริปต์
ซึ่งจาวาสคริปต์นั้นอาจทำงานแตกต่างกันขึ้นอยู่กับเว็บเบราว์เซอร์หรือรุ่นของเว็บเบราว์เซอร์นั้นๆ
และหากต้องการให้เข้ากันได้ในหลายเว็บเบราว์เซอร์
อาจต้องการการทดสอบและตรวจสอบความเข้ากันได้บนเบราว์เซอร์ต่างๆ
ซึ่งบางครั้งอาจจำเป็นที่จะต้องเขียนโค้ดแยกเช่นบางส่วนสำหรับไออี
และอีกส่วนสำหรับไฟร์ฟอกซ์เป็นต้น
--------------------------------------
ตัวอย่างโค้ด : onClick
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form & JavaScript</title>
<script language="javascript">
function readText(){
document.getElementById("div1").innerHTML = "สวัสดีคุณ:" +
document.getElementById("txtName").value;
}
</script>
</head>
<body>
<h1>Reading Text</h1>
<form>
ชื่อ <input type="text" id="txtName" />
<input type="button" onclick="readText()"
value="Enter" />
</form>
<div id="div1">
</div>
</body>
</html>
อธิบายโค้ด
<input type="button" onclick="readText()" value="Enter" /> = เป็นการเรียกใช้ฟังก์ชัน readText เมื่อเกิด onClick ซึ่งเป็นอีเวนต์ที่เกิดขึ้นเมื่อผู้ใช้คลิกปุ่ม Enter ดังภาพ
function readText(){
และ
document.getElementById("div1").innerHTML = "สวัสดีคุณ:" +
document.getElementById("txtName").value;
}
= เป็นการเรียกใช้ฟังก์ชัน readText ซึ่งจะอ่านค่าที่ผู้ใช้กรอกลงกล่องข้อความด้วยพรอเพอร์ตี value และแสดงบนเว็บเพจด้วยการอัปเดตแท็ก <div> ผ่านพรอเพอร์ตี innerHTML
ภาพตัวอย่าง :
แสดงการใช้งานอีเวนต์แฮนเดลอร์เพื่ออ่านค่าที่ผู้ใช้กรอกมาแสดงบนเว็บเพจ
