AJAX Development
AJAX คืออะไร ?
Ajax (Asynchronous JavaScript and XML) เป็นวิธีการสร้างโปรแกรมประยุกต์ปฏิสัมพันธ์สำหรับเว็บที่ประมวลผลคำขอของ
ผู้ใช้ทันที Ajax รวมเครื่องมือโปรแกรมหลายอย่างรวมถึง JavaScript,
dynamic HTML (DHTML), Extensible Markup Language (XML), cascading style sheets
(CSS), the Document Object Model (DOM) และ Microsoft
object, XMLHttpRequest โดย Ajax ยอมให้เนื้อหาบนเว็บเพจเพื่อปรับปรุงอย่างทันที
เมื่อผู้ใช้ทำการกระทำ ต่างจาก HTTP request ซึ่งผู้ใช้ต้องคอยเพจใหม่เพื่อโหลดทั้งหมด
ตัวอย่าง การไซต์พยากรณ์อากาศสามารถแสดงเงื่อนไขท้องถิ่นบนด้านหนึ่งของเพจ ปราศจากการล่าช้าหลังจากผู้ใช้พิมพ์รหัสไปรษณีย์
Google Maps เป็นโปรแกรมประยุกต์ที่รู้จักกันดีที่ใช้ Ajax อินเตอร์เฟซนี้ยอมให้ผู้ใช้ที่เปลี่ยนมุมมองและควบคุมแผนที่ในเวลาจริง
โปรแกรมประยุกต์ Ajax ไม่ต้องมีการติดตั้ง plug-in แต่ทำงานโดยตรงกับ browser เนื่องจากความมั่นทางเทคนิคกับ
XMLHttpRequest โปรแกรมประยุกต์ก่อนหน้าที่ทำงานเฉพาะกับ Internet
Explorer browser ของ Microsoft แต่ browser
อื่นส่วนมากสนับสนุน Ajax
โปรแกรมประยุกต์ที่สร้างด้วย
Ajax ใช้ engine ที่กระทำเป็นตัวกลางระหว่าง
browser ของผู้ใช้กับแม่ข่ายที่กำลังขอสารสนเทศ แทนที่การโหลดเว็บเพจแบบดั้งเดิม
browserของผู้ใช้โหลด Ajax engine ซึ่งแสดงเพจที่ผู้ใช้มองเห็น
โดย engine นี้ยังคงทำงานอยู่เบื้องหลัง ด้วยการใช้ JavaScript
ติอต่อกับ browser การนำเข้าของผู้ใช้หรือการคลิกบนเพจส่ง
JavaScript เรียก Ajax engine ซึ่งสามารถตอบสนองในหลายกรณีอย่างทันที
ถ้า engine ต้องการข้อมูลเพิ่ม จะขอจากแม่ข่าย ตามปกติใช้ XML
ที่สามารถปรับปรุงเพจได้พร้อมกัน
Ajax ไม่ใช่เทคโนโลยีที่เจ้าของหรือผลิตภัณฑ์แพ็คเกจ
ผู้พัฒนาเว็บต้องใช้ JavaScript และ XML รวมกันเป็นเวลาหลายปี Jesse James Garrett จากบริษัทที่ปรึกษา
Adaptive Path ได้รับเครดิตกับการตั้งชื่แ “Ajax” เป็นชื่อย่อที่อ้างถึงเทคโนโลยีเฉพาะที่เกี่ยวข้องกับวิธีการทำให้สำเร็จใน
ปัจจุบัน
เมื่ออ่านแล้วจะยากต่อการทำความเข้าใจ การอธิบายด้วยรูปภาพจะทำให้สามารถทำความเข้าใจได้ง่ายยิ่งขึ้น
รูปจาก
จากรูป
ด้านซ้ายเป็นรูปการทำงานของ Browser เมื่อติดต่อกับ
Web Server ตามปกติการทำงานก็มันก็อย่างที่เราเข้าใจกันคือ
เมื่อเรา เรียก url ไป Browser จะทำการติดต่อกับ
Web Server และ Web Server ทำการประมวลผลส่งค่าเป็น
HTML, Image , CSS อะไรก็แล้วแต่กลับไปหา Browser นำไปแสดงผลจากหลักการดังกล่าวการพัฒนาให้หน้า Web แสดงผลแบบมีชีวิตชีวา
เช่นการแสดงผลข้อมูลแบบ Realtime ไม่ว่าจะเป็นข้อมูลข่าวสารที่มีการเปลี่ยนแปลงอย่างทันด่วน
ยกตัวอย่าง ราคาหุ้นมีการเปลี่ยนแปลงทุกวินาที หากการติดต่อแบบนี้ Browser ต้องเรียกขอข้อมูลใหม่กับ Web Server ทุกๆครั้งหลายๆท่านอาจจะบอกว่า
ใน HTML ก็มี Tag ที่ว่าให้ใช้แล้วนั้นก็คือ
<meta
http-equiv="refresh" content="5;URL=url"> ก็ใช่
แต่การใช้ Tag refresh นั้นเป็นการเปลี่ยนแปลงทั้งหน้าจอ
บางครั้งข้อมูลที่ต้องการเป็นข้อมูลแค่กรอบๆเดียวในหน้า web การ refresh ทั้งหน้าจึงไม่ใช่คำตอบที่ดี คราวนี้มาดูหลักการของ AJAX ทางด้านขวาบ้างสิ่งที่เราเห็นก็คือจากรูปจะมีสิ่งที่เรียกว่า AJAX Engine เข้ามาคั้นกลางเจ้า AJAX Engine
บางครั้งข้อมูลที่ต้องการเป็นข้อมูลแค่กรอบๆเดียวในหน้า web การ refresh ทั้งหน้าจึงไม่ใช่คำตอบที่ดี คราวนี้มาดูหลักการของ AJAX ทางด้านขวาบ้างสิ่งที่เราเห็นก็คือจากรูปจะมีสิ่งที่เรียกว่า AJAX Engine เข้ามาคั้นกลางเจ้า AJAX Engine
นี้จะทำหน้าที่เป็นตัวกลางในการติดต่อ
และนำข้อมูลมาแสดงผลให้กับ Browser เจ้า AJAX
Engine นี้ถูกเขียนด้วย Javascript โดยการที่มันมาคั้นกลางนี้
เราสามารถกำหนดการรูปแบบการติดต่อของ AJAX Engine ตามเงื่อนไขของ
Javascript ที่สร้างขึ้นได้
- ทำให้เราสามารถกำหนดได้ว่า เราอยากให้ tag
html ก้อนนี้เปลี่ยนแปลงหน้าตาใหม่ทุกๆ 5 วินาที
- ทำให้เราเปลี่ยนแปลงข่าวสารใหม่ๆได้ตลอดเมื่อมีข้อมูลใหม่เข้ามา (โดยไม่ต้องเรียก Load หน้าใหม่)
- ทำให้เราเปลี่ยนแปลงข่าวสารใหม่ๆได้ตลอดเมื่อมีข้อมูลใหม่เข้ามา (โดยไม่ต้องเรียก Load หน้าใหม่)
จากรูปจะเห็นว่าสิ่งที่ส่งกลับมาให้ AJAX Engine นั้นจะเป็น XML Data ความจริงไม่จำเป็นก็ได้
ถ้าขี้เกียจตัดข้อมูลก็สามารถนำ HTML มาแปะแสดงก็ได้ ตามรูปเป็นแนวคิดเท่านั้นเอง
ถ้าขี้เกียจตัดข้อมูลก็สามารถนำ HTML มาแปะแสดงก็ได้ ตามรูปเป็นแนวคิดเท่านั้นเอง
รูปจาก
จากรูปเป็นการขยายความของคำว่า
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 ไปด้วย
ซึ่งจริงๆแล้วข้อมูลอาจจะไม่จำเป็นต้องเป็น X ML ก็ได้พอเข้าใจแนวคิดรูปแรกแล้วจะกระจ่างในเรื่องต่อไป
คลิปวีดีโอ Training AJAX from BuyCDToday
แนวทางการพัฒนา AJAX
แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบเดิม
รูปที่
1.1 แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบเดิม
การทำงานของเว็บแอ ปพลิเคชั่นแบบเดิม (Classic Web Application) จะเริ่มจากผู้ใช้ (User) เปิดเว็บบราวเซอร์ (Web
Brower) เช่น Internet Explorer(IE) หรือ Firefox
แล้วร้องขอข้อมูลหรือ Web Page ที่เราต้องการโดยการพิมพ์ชื่อ
ที่อยู่ หรือที่เราเรียกกันว่า "URL" เช่น www.ktpbook.com
หรือ wwwgoogle.com เป็นต้น สำหรับ User
ที่เปิด Web Broser ก็คือ ลูกค้า หรือ ผู้ใช้ ที่อยู่ทางฝั่งไคลเอนต์
(Client Side) จากนั้น URL ที่ถูกร้องขอจะถูกส่งผ่านอินเตอร์เน็ตไปยังฝั่งผู้ให้บริการ
(Server Side) เมื่อผู้ให้บริการได้รับการร้องขอก็จะจัดการส่ง
Web Page กลับมาให้ และทันทีที่ Server ส่ง Web Page มาให้ตามที่ User ร้องขอไป การติดต่อระหว่างฝั่ง Server และฝั่ง Client
จะสิ้นสุดหรือขาดการติดต่อจากกันทันที (ภาษาเทคนิคเรียกว่า "Stateless"
ดังนั้นเมื่อ User ต้องการข้อมูลหรือ Web
Page ใหม่จาก Server เดิม ต้องเริ่มการติดต่อหรือร้องขอ
URL ใหม่อีกครั้ง Server จะส่งหน้า Web
Page ใหม่มาให้ จากนั้น Web Browser จะนำ Web
Page ที่ได้มานั้นแสดงเป็นหน้าใหม่ ผลที่เกิดขึ้นคือ จอกระพริบ
เนื่องจากมี Web Page ใหม่จึงต้องรีเฟรซ (Refresh) หน้าจอใหม่มีความล่าช้าเนื่องจากต้องรอการประมวลผลที่ฝั่ง Server ให้เสร็จก่อนแล้วจึงส่งผลลัพธ์ตอบกลับมาให้ User อีกทั้งข้อมูลที่ใช้ในการส่งแต่ละครั้งมีจำนวนมากทำให้ใช้แบนด์วิธ
(Bandwidth) ค่อนข้างสูง
ส่งผลให้การส่งข้อมูลเกิดความล่าช้าตามไปด้วย
แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบ AJAX
จากปัญหาที่เกิดขึ้นกับเว็บแอปพลิเคชั่นแบบเดิม จึงเกิดแนวคิดใหม่ที่นำมาใช้ในการแก้ปัญหาดังกล่าว นั่นคือ การใช้ AJAX โดยเว็บแอปพลิเคชั่นที่ใช้ AJAX สามารถลดการรีเฟรซของหน้าจอทำให้การแสดงผลมีความนุ่มนวล และเปลี่ยนรูปแบบเอกสารให้มีขนาดเล็กลง โดยจากเดิมที่เป็นการส่ง Web Page ทั้งหน้าที่มีข้อมูลรวมกันมากมาย (HTML + CSS Data ในรูปที่ 1.1) กลายมาเป็นเพียงข้อมูลชิ้นเล็กๆ (XML Data ในรูปที่ 1.2) ซึ่งใช้แบนด์วิธน้อยกว่าการส่งข้อมูลในเว็บแอปพลิเคชั่นแบบเดิม มีผลทำให้สามารถส่งข้อมูลได้เร็วขึ้น
รูปที่
1.2 แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบ AJAX
จากรูปที่ 1.2 หัวใจสำคัญในการทำงานของ AJAX คือ "XMLHttpRequest Object" ซึ่งทำหน้าที่ติดต่อร้องขอข้อมูลจากฝั่ง
Server โดยข้อมูลที่ร้องขอนั้นเป็นแค่ข้อมูลเล็กๆ ทาง Server
จัดหาข้อมูลและตอบกลับมาในรูปแบบ XML Data จากนั้นเป็นหน้าที่ของ
JavaScript ในการนำผลลัพธ์มาแสดงผลใน Web Page เดิมที่ปรากฎอยู่บน Web Browser การแสดงผลบนหน้าจอจะแสดงข้อมูลในช่องว่างหรือบางส่วนบนหน้าจอเท่านั้น
ไม่ต้องรีเฟรซหน้าจอใหม่ อีกทั้งสามารถแสดผลข้อมูลใน Web Page ได้เร็วขึ้นเนื่องจากข้อมูลที่ส่งมาจากฝั่ง Server มีจำนวนน้อยไม่ต้องส่ง
Web Page ทั้งหน้าทำหน้าใช้แบนด์วิธน้อยลง เช่น หาก User ป้อนข้อมูลที่เป็น "รหัสไปรษณีย์" ลงไปบน Web
Page ข้อมูลที่เป็นส่วน "เมือง" หรือ "เขต" จะปรากฎขึ้นมาทันที
โดยที่ไม่ต้องมีการรีเฟรซหน้าจอ
ดังนั้นลักษณะการทำงานของเว็บแอปพลิเคชั่นที่พัฒนาตามแบบ AJAX จะคล้ายกับการทำงานของโปรแกรมทั่วไปที่ทำงานบน Desktop หรือทำงานบนระบบปฏิบัติการ Windows กล่าวคือ โปรแกรมจะโต้ตอบกับผู้ใช้ได้ทันทีในเหตุการณ์ใดเหตุการณ์หนึ่งโดยไม่ต้องรอ
องค์ประกอบของ AJAX
AJAX ไม่ใช่ภาษาโปรแกรมหรือเทคโนโลยีที่คิดค้นขึ้นมาใหม่
แต่เป็นวิธีการใช้ประโยชน์จากภาษาและเทคโนโลยีต่างๆที่มีอยู่แล้ว โดยประกอบด้วยส่วนต่างๆที่สำคัญดังนี้
- การแสดงผลในเบราเซอร์โดยใช้ HTML, CSS และ DOM
- ข้อมูลที่ดึงมาจากเซิร์ฟเวอร์ ซึ่งเก็บอยู่ในรูปแบบของ Database หรือ XML
- การดึงข้อมูลข้อมูลจากเซิร์ฟเวอร์โดยใช้ XMLHttpRequest Object ในเบราเซอร์ซึ่งเป็นการดึงข้อมูลแบบฉากหลัง (behind-the-scence หรือ background) เพราะไม่ทำให้เบราเซอร์รีเฟรซหน้าจอ
- ภาษา JavaScript สำหรับเขียนโค้ดควบคุมการทำงานทั้งหมด
ความจริงการเขียน AJAX ไม่จำเป็นต้องใช้ส่วนประกอบเหล่านี้ทั้งหมด
เช่น ข้อมูลที่เก็บอยู่ในเซิร์ฟเวอร์ไม่จำเป็นต้องเป็น XML แต่เป็นข้อความธรรมดาก็ได้
ซึ่งทำให้เราไม่ต้องยุ่งเกี่ยวกับ XML แต่โดยทั่วไปนิยมใช้ XML
เพราะช่วยให้ทำงานกับข้อมูลได้สะดวกกว่า และที่ต้องไม่ลืมก็คือ
ตัวอักษร X ในคำว่า AJAX นั้นย่อมาจาก XML
ดังนั้นถ้าหากเราไม่ใช้ XML ก็คงเรียกเทคนิคนี้ว่า
AJAX ได้ไม่เต็มปาก
ในทางกลับกัน AJAX ไม่ได้จำกัดอยู่แค่ส่วนประกอบตามที่กล่าวข้างต้น
แต่อาจมีส่วนประกอบอื่นๆอีก เช่น ภาษาหรือเทคโนโลยีที่ใช้เขียนโปรแกรมทางฝั่งเซิร์ฟเวอร์
เช่น PHP,JSP,ASP.NET และอื่นๆ เป็นต้น ช่วยให้การนำ AJAX
ไปประยุกต์ใช้งานมีความหลากหลายยิ่งขึ้น
ขั้นตอนการทำงานของ AJAX
ขั้นตอนการทำงานของ AJAX อย่างคร่าวๆ
สามารถอธิบายได้ดังนี้
1.
เขียนโค้ด JavaScript ไว้ในเพจ ซึ่งจะทำให้ดึงข้อมูลจากเซิร์ฟเวอร์
และนำข้อมูลนั้นมาปรับปรุงในเพจ
2.
เมื่อต้องการข้อมูลจากเวิร์ฟเวอร์
JavaScript ของเราจะสั่ง XMLHttpRequest Object ให้ส่ง Request ไปยังเซิร์ฟเวอร์แบบหลังฉาก (ถ้าหากเบราเซอร์มีข้อมูลที่ต้อวการส่งให้เซิร์ฟเวอร์ด้วย ก็จะส่งไปพร้อมกับ
Request นี้ ) ทั้งนี้ JavaScript จะไม่ทำให้เพจหยุดการทำงานในระหว่างที่รอข้อมูลจากเซิร์ฟเวอร์
เพราะมันจะรอข้อมูลอยู่หลังฉาก (เรียกว่าเป็นการดึงข้อมูลแบบ Asynchronous)
ผู้ใช้จึงไม่รู้สึกว่าถูกขัดจังหวะในช่วงที่ JavaScript กำลังรอข้อมูลจากเซิร์ฟเวอร์
3.
เมื่อข้อมูลส่งมาถึง
โค้ด JavaScript ของเราก็จะนำข้อมูลนั้นออกมาแสดงตรงตำแหน่งที่เรากำหนดไว้ในหน้าเว็บเพจ
ข้อมูลนี้อาจมีรูปแบบเป็น XML หรืแเป็นข้อความธรรมดาก็ได้แล้วแต่การออกแบบที่ฝั่งเซิร์ฟเวอร์
AJAX มีหลักการทำงานง่ายๆแค่นี้เอง โดยสรุปคือ เราจะใช้
XMLHttpRequest Object ติดต่อขอข้อมูลจากเซิร์ฟเวอร์ โดยไม่ทำให้เบราเซอร์รีเฟรซหน้าจอ
แล้วนำข้อมูลที่ได้มาใช้ในหน้าเน็บเพจ การทำงานทั้งหมดเกิดจากโค้ด JavaScript
ที่เราเขียนไว้ในเว็บเพจ ซึ่งเป็นการทำงานที่ฝั่งเบราเซอร์หรือไคล์เอนท์
ไม่มีความคิดเห็น:
แสดงความคิดเห็น