CHƯƠNG 4. PHÁT TRIỂN MẪU THIẾT KẾ VÀ ỨNG DỤNG
4.2. Mẫu thiết kế Ajax
Thế hệ Web 2.0 vừa mới bắt đầu và có lẽ sẽ phải trải qua một chặng đường dài phía trước để có thể làm thay đổi những gì vốn đã trở nên quen thuộc trong giai đoạn hiện nay. Đóng vai trò then chốt trong giai đoạn thứ hai của web là tổ hợp công nghệ AJAX. Những thành công vang dội và sự hấp dẫn kì lạ của Gmail, Google Suggest và Google Maps đã khiến cho Ajax đƣợc chú ý một cách đặc biệt. Dù hiện nay nó chƣa thực sự được sẵn sàng đón nhận, nhiều người cho rằng các ứng dụng AJAX sẽ phát triển một cách nhanh chóng.
Thuật ngữ AJAX đƣợc xuất hiện vào ngày 18/2/2005 trong bài báo AJAX:
A New Approach to Web Applications của Jesse James Garrett thuộc công ty Adapativeath. Ngay sau đó thuật ngữ AJAX đã nhanh chóng trở lên phổ biến trong
cộng đồng phát triển Web và trở thành trung tâm trong mọi câu chuyện liên quan đến thế hệ Web 2.0.
4.2.2. AJAX là gì
AJAX là viết tắt của cụm từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ) [5], là kỹ thuật cho phép tăng tốc độ của các ứng dụng web bằng cách chia nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. Kỹ thuật kết hợp hai tính năng mạnh của JavaScript đƣợc các nhà phát trển đánh giá rất cao:
Gửi yêu cầu đến máy chủ mà không cần nạp lại trang.
Phân tách và làm việc với XML.
AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ:
CSS , DOM, XMLHttpRequest, JavaScript. Trong đó
Trình bày trang web theo tiêu chuẩn XHTML và CSS;
Biểu diễn động và tương tác bằng DOM (Document Object Model);
Trao đổi và xử lý dữ liệu bằng XML và XSLT;
Truy cập dữ liệu không đồng bộ bằng MLHttpRequest;
Liên kết các công nghệ trên với nhau bằng JavaScript.
4.2.3. AJAX hoạt động như thế nào
Trong ứng dụng web truyền thống, khi cần thay đổi dữ liệu trên trang web, người dùng tạo ra một yêu cầu HTTP tới server. Server thực hiện một số thao tác xử lý nhƣ lấy dữ liệu, tính toán, thẩm định tính hợp lệ thông tin, sau đó gửi lại một trang web hoàn chỉnh tới client yêu cầu. Tuy nhiên, kỹ thuật này có hạn chế là: khi server đang thực hiện công việc xử lý của mình thì client phải chờ đến khi server xử lý xong thì mới có thể tiếp tục thực hiện các công việc khác.
Để khắc phục hạn chế nêu trên, người ta đưa ra một kỹ thuật trung gian, cơ chế Ajax, giữa client và server. Khi đó, các yêu cầu gửi và nhận do AJAX Engine thực hiện. Mọi thao tác người dùng sẽ gửi lệnh JavaScript tới bộ xử lý Ajax, thay vì tạo ra một truy vấn HTTP tới máy chủ. Nếu cần thông tin từ server, nhƣ tải về bổ sung mã giao diện hay dữ liệu mới cập nhật, AJAX sẽ truyền yêu cầu tới server một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người dùng với ứng dụng web. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, server gửi dữ liệu phản hồi dưới dạng XML tới Ajax Engine. AJAX
Hình 4.14. Ứng dụng web truyền thống (trái) và ứng dụng AJAX
Nhƣ vậy, việc sử dụng cơ chế kỹ thuật Ajax đã làm giảm quá trình “đi lại” của thông tin và thời gian phản ứng. Thay vì tải lại toàn bộ một trang web, nó chỉ nạp những thông tin được thay đổi, còn các phần khác được giữ nguyên. Vì thế, người dùng không gặp hiện tƣợng cửa sổ trắng và biểu tƣợng đồng hồ cát - dấu hiệu khi server đang thực hiện nhiệm vụ.
Hình 4.15. Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX.
4.2.4. Các ứng dụng AJAX phổ biến
Hãng Google đã đầu tƣ nhiều vào việc phát triển ứng dụng AJAX. Các ứng dụng của họ gần đây, từ Orkut, Gmail đến phiên bản thử nghiệm Google Groups, đều ứng dụng công nghệ AJAX. Google Suggest hiển thị các thuật ngữ gợi ý gần nhƣ ngay lập tức khi người sử dụng chưa gõ xong từ khóa. Với Google Maps, người dùng có thể xê dịch, kéo thả bản đồ như trên môi trường desktop.
Yahoo dự định sẽ ra mắt bản Yahoo Mail Beta 1 sử dụng AJAX trên toàn thế giới. Hãng cũng đang xây dựng một công cụ Ajax có thể nhanh chóng cập nhật thông tin về sân bay, chuyến bay, thời gian... phục vụ khách hàng.
Microsoft cũng đang triển khai chương trình Windows Live Mail và Windows Live Messenger hỗ trợ AJAX.
Những ứng dụng trên cho thấy AJAX không phải là một công nghệ quá xa xôi mà đang hiện diện ngay trong thế giới thực, từ mô hình đơn giản nhƣ Google Suggest đến phức tạp nhƣ Google Maps.
4.2.5. Tổng quan về mẫu thiết kế Ajax
Ajax chứa đựng rất nhiều hứa hẹn trong việc thiết kế các ứng dụng web. Hiện tại nó đã đƣợc sử dụng trong nhiều ứng dụng tiêu biểu. Khi Ajax bắt đầu, các mẫu thiết kế đã đƣợc ứng dụng rộng rãi. Mẫu thiết kế giúp cho quá trình phát triển phần mềm trở lên hiệu quả hơn bởi nó đẩy nhanh quá trình lập trình thông thường và loại bỏ nhu cầu viết các mã dƣ thừa qua các dự án. Ajax design pattern đang nổi lên với việc sử dụng ngày càng phổ biến trong việc phát triển các ứng dụng web. Ajax design patters giúp cho ta cách thực hành tốt nhất mà cải tiến một cách nhanh chóng các dự án phát triển ứng dụng web. Nó chỉ cho người dùng biết làm thế nào để áp dụng các nguyên lý thiết kế một cách hiệu quả trong các ứng dụng web sử dụng công nghệ Ajax.
Có thể đáng ngạc nhiên là đã có nhiều mẫu thiết kế Ajax khi mà thuật ngữ Ajax chỉ mới xuất hiện. Dù sao, các ý tưởng đó không phải là mới, đã có nhiều phần liên quan Ajax trên web trước khi thuật ngữ đó hình thành để mô tả chúng. Đã có hàng trăm các site mới hiện tại sử dụng Ajax cung với các công cụ mạnh nhƣ RSS, Technorati, Google và Wikis để xác định chúng ngay khi chúng sẵn sàng.
Hiện tại đã xây dựng đƣợc hơn 60 mẫu Ajax đƣợc phân làm 4 nhóm [9]:
Foundational Technology, Programming, Functionality and Usability, và Development.
nhƣ là việc thiết kế các dịch vụ web, quản lý luồng thông tin giữa trình duyệt và server, định vị DOM khi một phản hồi đến và tối ƣu hóa thực thi.
Các mẫu Functionality and Usability: gồm 28 mẫu, hướng dẫn giao diện người dùng và các khái niệm về khả năng sử dụng. Chúng là những thứ quan trọng với người dùng, bao gồm widgets và các kỹ thuật tương tác, cấu trúc và duy trì những thứ trên trang web, hiệu ứng trực quan và các chức năng mà Ajax có khả năng.
Các mẫu Development: 8 mẫu. Chúng là các mẫu tiến trình đƣợc sử dụng trong thực hành cho phát triển, như là đối lập với các mẫu trước, đó là những thứ mà tồn tại bên cạnh một ứng dụng Ajax. Các thực hành đó là phát hiện vấn đề và chạy kiểm thử.
Hình 4.16. Nhóm các mẫu AJAX.
Hình bên trên chỉ ra vị trí của 4 nhóm thiết kế mẫu Ajax trong một ứng dụng Ajax. Các mẫu trong 3 nhóm đầu là về sản phẩm, trong khi nhóm còn lại, Development patterns là về tiến trình. Trong các mẫu hướng sản phẩm, Foundational Technologies giải thích làm thế nào sử dụng các công nghệ web thô nhƣ là XMLHttpRequest và DOM. Ở mức trung bình là Programming Patterns, hướng dẫn các kế hoạch sử dụng các công nghệ này. Ở mức cao là các Functionality and Usability patterns. Foundational Technology Patterns là lõi của ngôn ngữ mẫu Ajax. Các nhóm còn lại tất cả đƣợc xây dựng trên đó, và khá độc lập với những nhóm khác.