สำหรับความหมายอื่น ดูที่ Ajax
**เอแจ็กซ์** (อังกฤษ: AJAX: Asynchronous JavaScript and XML /ˈeɪdʒæks/) เป็นกลุ่มของเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม

เอแจ็กซ์นั้นไม่ใช่เทคโนโลยีใหม่ แต่เป็นเทคนิคที่ได้ใช้เทคโนโลยีหลายอย่างที่มีอยู่แล้วรวมกันดังต่อไปนี้:

* XHTML (หรือ HTML) และ CSS ใช้ในการแสดงผลลัพธ์และรูปแบบข้อมูล
* ECMAScript เช่นจาวาสคริปต์ ในการเข้าถึง Document Object Model (DOM) เพื่อใช้ในการแสดงข้อมูลที่มีการเปลี่ยนแปลงหรือโต้ตอบกับผู้ใช้
* XMLHttpRequest ใช้ในการแลกเปลี่ยนข้อมูล asynchronously กับเว็บเซิร์ฟเวอร์
* XML ใช้เป็นรูปแบบข้อมูลในการแลกเปลี่ยน ซึ่งรูปแบบอื่นก็สามารถใช้ได้เช่นกันไม่ว่าจะเป็น HTML, JSON, EBML, หรือ ข้อความธรรมดา

ประวัติ
-------

ภาพเปรียบเทียบการทำงานระหว่างเว็บแอปพลิเคชันแบบดังเดิม กับแบบที่ใช้เอแจ็กซ์
Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งนึกขึ้นได้ระหว่างที่เขากำลังอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาทราบเกี่ยวกับเทคโนโลยีต่างๆ ที่ต้องการจะนำเสนอ

เอแจ็กซ์โดยตัวมันเองแล้วไม่ได้เป็นเทคโนโลยีหรือภาษาโปรแกรมชนิดใหม่ แต่เป็นการรวมกลุ่มของเทคโนโลยีที่มีใชัอยู่แล้วดังที่กล่าวข้างต้น โดยวิวัฒนาการของเอแจ็กซ์เริ่มต้นเมื่อปีค.ศ. 2002 ไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเพื่อเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับ เว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูล ซึ่งในขณะนั้นมีแต่เพียง อินเทอร์เน็ตเอกซ์พลอเรอร์ เท่านั้นที่มีความสามารถนี้ ต่อมาเว็บเบราว์เซอร์อื่นๆ เช่นจาก มอซิลลา ไฟร์ฟอกซ์ ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วย จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น จนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี

ในตอนแรกนั้นไมโครซอฟท์เป็นผู้ที่ได้นำ XMLHttpRequest โดยใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchange Server 2000 ต่อมาเว็บไซต์อย่างกูเกิล ได้เปิดบริการใหม่ชื่อจีเมล ซึ่งใช้ XMLHttpRequest เป็นหัวใจหลักในการดึงข้อมูลจากเว็บเซิร์ฟเวอร์ จึงทำให้แนวคิดและเทคนิคการพัฒนาเว็บแอปพลิเคชันด้วย เอแจ็กซ์ เริ่มเป็นที่รู้จักกันกว้างขวางขึ้น จนปัจจุบันถือว่าเป็นหนึ่งในหัวใจหลักของแนวคิดเรื่อง Web 2.0

หลักการทำงาน
------------

วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอโดยใช้โพรโทคอล HTTP เพื่อติดต่อกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น (ทำงานอยู่เบื้องหลัง)

ภาพเปรียบเทียบการติดต่อสื่อสาร ระหว่างเว็บแอปพลิเคชันแบบดังเดิมกับแบบที่ใช้ เอแจ็กซ์

ข้อดี
-----

สามารถประมวลผลได้เร็ว เรียกดูข้อมูลได้ทันที โดยไม่ต้องรีเฟรชหน้านั้นๆ

ขนาดการรับส่งข้อมูล
-------------------

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

### ความรวดเร็วในการตอบสนอง

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

ปัญหาที่พบ
----------

### ปัญหาการใช้งานเกี่ยวกับปุ่ม "ย้อนกลับ"

เนื่องจากว่าเทคนิค เอแจ็กซ์นั้นทำงานในฉากหลัง และไม่ได้เรียกหน้าใหม่ ทำให้เวลาใช้ปุ่ม "ย้อนกลับ" (back) ในเว็บเบราว์เซอร์ อาจจะไม่ได้หน้าที่ควรจะเป็น ผู้พัฒนานั้นได้คิดค้นวิธีการแก้ไขปัญหานี้หลากหลายรูปแบบด้วยกัน หนึ่งในวิธีที่ใช้แก้ไขปัญหานี้อย่างแพร่หลายคือการใส่ IFRAME ที่มองไม่เห็นเพื่อสั่งให้เว็บเบราว์เซอร์เปลี่ยนแปลงรายการหน้าของปุ่มก่อนหน้านี้

### ปัญหาในการคั่นหน้า

เนื่องจากว่าข้อมูลสามารถเปลี่ยนแปลงโดยไม่ต้องโหลดหน้าใหม่นั้น ทำให้ยากต่อการที่จะคั่นหน้าในสถานะปัจจุบันที่ต้องการ เนื่องจากถือว่าเป็นหน้าเดียวกัน. อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์ได้คิดค้นวิธีการแก้ไขปัญหานี้ โดยการใส่ *ชิ้นส่วนตัวแปร* (fragment identifier) ใส่ในส่วนของURL ตามหลังเครื่องหมาย '#' เพื่อใช้ในการระบุสถานะของเว็บแอปพลิเคชัน สาเหตุที่ใช้วิธีนี้ได้นั้นเนื่องจากว่าจาวาสคริปต์นั้นสามารถเปลี่ยนชิ้นส่วนตัวแปรนี้ได้โดยไม่ต้องโหลดหน้าใหม่. อย่างไรก็ตามวิธีแก้ไขปัญหานี้ไม่ใช่วิธีที่สมบูรณ์แบบ

### เวลาที่ใช้ในการรับส่งข้อมูล

เนื่องจากว่าผู้ใช้อาจจะรู้สึกถึงความล่าช้าได้ ซึ่งในหลายกรณีผู้ใช้อาจจะไม่เข้าใจถึงสาเหตุ. ความล่าช้าในเทคนิค เอแจ็กซ์นั้นจะเห็นได้ชัดกว่าการโหลดหน้าใหม่ทั้งหน้า เนื่องจากเวลาโหลดทั้งหน้าใหม่นั้น สายตาจะได้รับข้อมูลการปรับเปลี่ยน ทำให้ผู้ใช้รับทราบว่าหน้ากำลังโหลดอยู่ ประเด็นนี้จึงเป็นปัจจัยที่ผู้พัฒนาควรที่จะคำนึงถึงระหว่างการออกแบบเว็บแอปพลิเคชัน โดยผู้พัฒนาส่วนใหญ่นั้น ได้แก้ไขปัญหานี้โดยใช้รูปภาพแสดงว่าข้อมูลส่วนดังกล่าวกำลังโหลดอยู่ในฉากหลัง เพื่อลดความรู้สึกดังกล่าว

### ปัญหาความเข้ากันได้กับเสิร์ชเอนจิน

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

### ความน่าเชื่อถือของจาวาสคริปต์

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

ตัวอย่าง
--------

js.js

```
var xhr = XMLHttpRequest();//ประกาศ object
xhr.open("post", "data.php");//ดึงข้อความจาก data.php
xhr.send(null);//ไม่ต้องส่งข้อมูลไป ดึงแค่ข้อความ
alert(xhr.responseText);//จะ alert ว่า "This is Message."

```

data.php

```
<?PHP
echo 'This is Message.';//แสดงผลคำว่า "This is Message." ด้วย function echo
?>

```

### jQuery example

```
$.ajax({
 url: "data.php"//ดึงข้อความจาก data.php
}).done(function(data){//เมื่อเสร็จแล้วให้นำข้อความที่ส่งกลับมาเก็บเอาใว้ในตัวแปร data
 alert(data);//จะ alert ว่า "This is Message."
});

```

เอแจ็กซ์เฟรมเวิร์ก
------------------

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

### สำหรับเอเอสพี

* xinteleport

### สำหรับเอเอสพีดอตเน็ต

* เอเอสพีดอตเน็ต เอแจ็กซ์
* Ajax.NET Professional
* Anthem.NET - controls and utilities for ASP.NET 1.1 and 2.0

### สำหรับ ColdFusion

* ajaxCFC

### สำหรับจาวา

* DWR
* Google Web Toolkit

### สำหรับจาวาสคริปต์ที่ไม่มีส่วนประกอบด้านเซิร์ฟเวอร์

* Prototype
* Dojo Toolkit
* SmartClient
* qooxdoo
* Clean AJAX
* Yahoo! UI Library[*ลิงก์เสีย*]
* Prototype.js ใช้ในRuby on Rails CakePHP และอื่นๆ
* jQuery

### สำหรับพีเอชพี

* Sajax
* Xajax
* Projax
* PHPLiveX

### สำหรับไพทอน

* Mochikit ใช้ในเทอร์โบเกียร์

ดูเพิ่ม
-------

* เว็บแอปพลิเคชัน
* เว็บ 2.0
* จาวาสคริปต์
* XMLHttpRequest

แหล่งข้อมูลอื่น
---------------

* ASP.NET AJAX (อังกฤษ)
* Google Web Toolkit (อังกฤษ)
* เว็บไซต์ที่สอนภาษา (AJAX) และอื่น ๆ ที่เกี่ยวข้อง (ภาษาไทย)

### ตัวอย่างเว็บไซต์ที่ได้ใช้เทคนิคเอแจ็กซ์

* facebook.com
* The Wos
* Windows Live Local
* Google Gmail
* pageflakes.com เก็บถาวร 2009-08-28 ที่ เวย์แบ็กแมชชีน
* flickr
* A9 เก็บถาวร 2005-06-30 ที่ เวย์แบ็กแมชชีน
* Goragod.com (ไทย)
* Sanook.com
* Clipsociety.com เก็บถาวร 2009-02-18 ที่ เวย์แบ็กแมชชีน
* Thaigunners.com (ไทย)