มีคนเข้าใจผิดว่า การใช้ JQuery ในเว็บแล้วจะทำให้เว็บนั้นเป็น Ajax ไปด้วย หรือถ้าจะเขียน ajax ต้องใช้ jQuery การอธิบายต้องเริ่มจากวิวัตนาการของเว็บตั้งแต่เริ่มแรกครับ
- ในยุคแรกเว็บแบบดังเดิมมีเพียงภาษา html เพื่อแสดงผลที่ทำสำเร็จรูปเอาไว้แล้วเท่านั้น ใครก็ตามที่เข้าไปอ่านข้อมูลจะพบกับข้อมูลเดียวกัน เหมือนหนังสือเล่มเดียวกันที่ทุกคนจะอ่านเนื้อหาเดียวกันเพราะว่าภาษา html มีต้นแบบมาจากการกำหนดในการทำต้นฉบับหนังสือ จึงเรียกเว็บแบบ static
- ต่อมามีการนำภาษาฝั่งเว็บเซิร์ฟเวอร์ มาใช้เพื่อตอบสนองความต้องการเฉพาะบุคลขึ้นมาเป็นเว็บแบบ dynamic โดยเว็บเซิร์ฟเวอร สร้างหน้าเว็บจากต้นแบบ (โดยใช้ภาษาสำหรับเขียนเว็บบนเว็บเซิร์ฟเวอร เช่น php ,asp ,cgi คำนวณและส่งผลลัพธ์ออกมาเป็นภาษา html ) โดยเริ่มจากระบบเว็บเมล์ (คงไม่อยากให้ใครมาอ่านเมล์คุณเหมือนยุคที่ 1 นะครับ) การกระทำกิจกรรมแต่ละครั้ง เช่น login เข้าสู่ระบบจะมีขั้นตอน
- เข้าหน้าล็อกอิน
- โปรแกรมเว็บเบราว์เซอร์จะสร้างหน้าจาก html ที่ได้จาก server
- พิมพ์ข้อมูลและส่ง
- ส่งข้อมูลให้ server ถ้า net ช้าเราจะเห็นหน้าขาวๆ เพราะเว็บเบราว์เซอร์ไม่มีหน้าเว็บที่จะแสดง ระหว่างรอผลตอบกลับจาก server
- ถ้าชื่อผู้ใช้และรหัสผ่านถูกต้องก็จะเห็นหน้าต้อไป ถ้าไม่ก็จะโดนสั่งให้ไปหน้า login อีกครั้ง
- เว็บยุคต่อมาเนื่องจากภาษา html ทำได้แค่แสดงหน้าตา ทำลิงค์และจัดข้อความเท่านั้นจึงมีการนำภาษา JavaScript ซึ่งทำงานบนเว็บเบราว์เซอรมาช่วย เรียกว่า dhtml (dynamic html) โดยมันใช้เพื่อ
- นำมาตรวจสอบข้อมูล เช่น ถ้าผู้ใช้ลืมใส่รหัสผ่านและกดปุ่ม login ระบบจำส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ โดยผลลัพธ์แน่นอนว่าจะต้องโดนปฏิเสธไม่ให้เข้าระบบ JavaScript จะช่วยตรวจสอบเบื้องต้นเช่น ถ้าไม่ได้กรอกชื่อผู้ใช้หรือรหัสผ่าน ก็จะมีข้อความเตือนให้กรอกข้อมูลให้ครบก่อน การบังคับให้กรอกอีเมล์ ให้ใส่ได้เฉพาะตัวเลข ก่อนจะยอมให้ส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ เมื่อข้อมูลทั้งหมดถูกต้อง
- ตกแต่งให้หน้าเว็บมีความน่าสนใจมากขึ้น มี animation เช่น ทำเป็นรูปตัวการ์ตูนวิ่งตามเมาส์ ตัวหนังสือวิ่ง ซ่อนบางส่วนไว้ไม่แสดงจนกว่าคลิกที่บางจุด
- คำนวณเล็กๆ น้อย ๆ เช่น บวกราคาสินค้าที่ต้องจ่าย
- อำนวยความสะดวกมักจะเป็น ปุ่มเลือก / ทั้งหมดในอีเมล์เป็นต้น
วิธีนี้มีข้อดีคือ
- เว็บเซิร์ฟเวอร์ทำงานน้อยลง เพราะบางส่วนจะทำที่เครื่องผู้ใช้
- ผู้ใช้ไม่ต้องเสียเวลารอและกรอกข้อมูลใหม่ทั้งหมด โอกาสที่จะรอการทำงาน ซึ่งเห็นเป็นหน้าขาวน้อยลง (ช่วยให้รู้สึกว่าเร็วขึ้น )
- ผู้ใช้ได้ใช้เว็บที่สวยงาม น่าสนใจใช้สะดวก
- นอกจากนี้ยังนำ JavaScript มาช่วยในการคำนวณเล็กๆน้อย เข่น บวกราคาสินค้าทั้งหมด
- ต่อมา พ.ศ. 2545 บริษัทไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับเว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูลโดยไม่ต้องส่งข้อมูลหน้าเว็บทั้งหมดมาใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchangeเว็บเซิร์ฟเวอร 2000 โดยต้องใช้กับ ไออี (อินเทอร์เน็ตเอกซ์พลอเรอ) เท่านั้นต่อมาเว็บเบราว์เซอร์อื่นๆ เช่นจาก มอซิลลา ไฟร์ฟอกซ์ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วยจนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี เมื่อ กูเกิล ได้เปิดบริการจีเมล ซึ่งใช้ XMLHttpRequest จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น
เทคนิคนี้ไม่มีชื่อเรียกอย่างเป็นทางการจน Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งนึกขึ้นได้ระหว่างที่เขากำลังอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาทราบเกี่ยวกับเทคโนโลยีต่างๆ ที่ต้องการจะนำเสนอ
เอแจ็กซ์ (AJAX – Asynchronous JavaScript And XML) เป็นชื่อของเทคนิคที่จะเปลี่ยนแปลงบางส่วนของหน้าเว็บเท่าที่เปลี่ยนไปจริงๆ โดยไม่ต้องเปลี่ยนส่วนที่ไม่เกี่ยวข้อง
หลักการทำงานคือ
วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous
แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น (ทำงานอยู่เบื้องหลัง)
วิธีนี้มีข้อดีคือ
- สามารถเรียกดูข้อมูลได้ทันที โดยไม่ต้องรีเฟรชหน้านั้นๆ บ่อย และไม่เสียเวลากับส่วนที่ไม่จำเป็น ไม่ว่าจะเป็น ต้องสร้างหน้าเว็บใหม่ทั้งหมด เพราะจะเปลี่ยนเฉพาะบริเวณที่ต้องการเท่านั้น
- ลดการใช้เครือข่ายเพราะ ทำให้ขนาดข้อมูลนั้นเล็กลงในครั้งต่อๆไป เพราะสามารถส่งเพียงข้อมูล และคำสั่งจาวาสคริปต์ลงมาเฉพาะส่วนที่มีการเปลี่ยนแปลง แทนที่จะต้องส่งข้อมูลใหม่หมดมาทั้งหน้า
- ความรวดเร็วในการตอบสนอง เนื่องจากการใช้เทคนิค เอแจ็กซ์นั้นทำให้การเปลี่ยนแปลงต่างๆ เช่นการแก้ไข เพิ่มเติม ลบทิ้งรายการข้อมูล หรือการดึงข้อมูลที่ต้องการจะค้นหานั้น สามารถทำได้ในฉากหลัง ทำให้ผู้ใช้รู้สึกการตอบสนองนั้น คล้ายคลึงกับโปรแกรมบนเครื่องคอมพิวเตอร์มากกว่าเว็บปกติที่ต้องรอโหลดใหม่ทั้งหน้าสำหรับการเปลี่ยนแปลงต่างๆ
เพราะว่า เว็บเบราว์เซอร์แต่ละตัวมีความแตกต่างกันมาก การเขียนโปรแกรมต้องคำนึงถึงความแตกต่างของแต่ละตัว โดยเฉพาะไออีต่างเวอร์ชั่นกันก็อาจจะเขียนต่างกันอย่างสิ้นเชิง จึงมีการเขียนไลบรารี่ (Library) มาช่วยแก้ปัญหานี้หลายตัว เช่น dojo ,ext และ JQuery เป็นหนึ่งในนั้น โดยเป็นไลบรารี่ที่สามารถใช้เขียนงานที่เป็น dhtml และ ajax
สรุปคือ
- เป็น dhtml เมื่อใช้ javascript เช่น พวก accordion tab เปลี่ยนการแสดงผลหน้าเว็บ
- เป็น Ajax ถ้ามีการทำงานโดยแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์ เฉพาะที่จำเป็นเท่านั้น เช่น ใช้คำสั่งส่งข้อมูลไปเว็บเซิร์ฟเวอร์และรับข้อมูลมาเปลี่ยนเฉพาะที่เปลี่ยนไปจริงๆ