AJAX – Tương lai của Web 2.0 collection by traibingo 1 AJAX VÀ ỨNG DỤNG CỦA NÓ Có thể nói, kể từ khi cái tên "Ajax" ra đời đến nay, tiềm năng của nó vẫn chưa được đánh giá hết và các nhà phát triển web vẫn còn đang mày mò nghiên cứu tìm ra những ứng dụng của công nghệ này. Đến thời điểm hiện tại, đã có rất nhiều những ví dụ thể hiện khả năng đặc biệt của công nghệ này như các ứng dụng liệt kê ở đầu bài viết mà nổi bật nhất có thể kể đến Gmail và Google Map. Thử duyệt Google Map và chắc chắn bạn sẽ không khỏi bất ngờ trước những gì mà Ajax có thể làm được: thử phóng to, thu nhỏ, di chuyển quanh bản đồ trong Google Map - bạn gần như không phải đợi chút xíu nào; hình ảnh cứ xuất hiện thành một chuỗi liên tục như bạn đang xem bản đồ trên phần mềm ở máy mình vậy. Tất nhiên, những ứng dụng như Gmail và Google Maps là những ví dụ vô cùng phức tạp của những ứng dụng của công nghệ Ajax. Tuy nhiên, Ajax không chỉ thể hiện ưu điểm của nó đối với các ứng dụng lớn như vậy. Bạn hoàn toàn có thể sử dụng Ajax cho những ứng dụng nhỏ hơn, thậm chí chỉ cho một số thành phần trong ứng dụng web của bạn để làm tăng khả năng tương tác với người dùng. Có lẽ một trong những ứng dụng "nhỏ mà nổi tiếng" nhất của Ajax là tính năng "Live Search", bắt chước công nghệ Spotlight Apple mới giới thiệu trong phiên bản Mac OSX 10.4 Tiger. Gõ một ký tự vào ô tìm kiếm và một danh sách các kết quả xuất hiện ngay lập tức bên dưới, gõ thêm một ký tự nữa và danh sách đó tự động rút ngắn lại,… Bạn có thể tìm hiểu thêm về Live Search và cách tích hợp nó vào website của mình tại đây (tuy nhiên, việc có nên áp dụng hay không lại là chuyện khác, như sẽ phân tích ở phần sau). Một số ứng dụng khác cũng khá phổ biến như: Tính năng "Auto save" (lưu tự động): Sử dụng Ajax, bạn có thể bắt chước tính năng của các phần mềm soạn thảo tự động lưu những gì người dùng đã gõ được sau một khoản thời gian nhất định (sẽ thật tuyệt nếu như các trình webmail có tính năng này. Nếu bạn sử dụng Gmail, bạn có thể sử dụng tính năng này bằng cách tải về trình bổ sung) Kiểm tra trùng lặp: bạn tạo ra một mẫu đơn đăng ký với yêu cầu là tên đăng nhập phải không bị trùng lặp với bất kỳ ai trong cơ sở dữ liệu. Thông thường, bạn sẽ bắt người dùng nhập hết thông tin và gửi đơn đăng ký lên máy chủ và rồi mới kiểm tra. Tại sao không kiểm tra ngay sau khi người dùng vừa mới chọn xong tên? Đây chính là ví dụ mà tớ đã viết ra để minh họa cho bài viết này (xem phân sau). Dịch trực tuyến: bạn có thể sử dụng Ajax để tạo ra tính năng cho phép người dùng chỉ cần chọn một từ trên trang web của bạn và hiển thị từ tương ứng của các ngôn ngữ khác (sử dụng các dịch vụ của các trang tự điển) AJAX – Tương lai của Web 2.0 collection by traibingo 2 Các trang bán hàng trực tuyến: cập nhật theo thời gian thực danh sách những gì người mua chọn và giá cả mà không cần phải tải lại trang web (ví dụ người dùng nhấn chọn thêm một mặt hàng, ngay lập tức nó xuất hiện trong danh sách bên cạnh và tổng giá tiền cũng sẽ được cập nhật tương ứng) Hệ thống đánh giá ở các trang web nhạc số: Người dùng nhấn một nút đánh giá và ngay lập tức nó sẽ được cập nhật vào hệ thống (hai trang Nhạc Số và Nhạc Việt có lẽ nên tìm hiểu áp dụng kỹ thuật này) … và còn rất nhiều những ứng dụng khác mà bạn sẽ phát hiện ra thêm khi phát triển các ứng dụng của riêng mình. CÓ NÊN SỬ DỤNG AJAX? Không phải vì công nghệ này có quá nhiều điểm mạnh mà bạn nên áp dụng nó trong tất cả cá thành phần của trang web của mình. Công nghệ AJAX mặc dù giải quyết được nhiều vấn đề lại tạo ra nhiều vấn đề khác, tập trung chủ yếu về khả năng tiếp cận của người dùng: Bạn không thể lưu lại địa chỉ trang web (bookmark) chứa nội dung nào đó được tải bằng công nghệ Ajax. Bản chất sử dụng một lớp trung gian để giao dịch khiến cho các ứng dụng web không có một địa chỉ nhất định cho từng nội dung (đây cũng là vấn đề bạn gặp khi sử dụng Frame trong thiết kế web). Một ví dụ rõ ràng nhất là bạn không thể nhấn nút "BACK" của trình duyệt để quay lại nội dung trước đó trong Gmail. Tạo bối rối cho người dùng nếu bạn áp dụng công nghệ Ajax mà không suy nghĩ kỹ. Người dùng thường đã quen với việc nhấn nút để thực hiện một tác vụ nào đó - trong khi Ajax cho phép bạn thực hiện thay đổi ngay lập tức. Đây là một điểm yếu khá nghiêm trọng: Bản chất của Ajax là không dung thứ ("forgiveless"). Chính vì bạn có thể thực hiện các thay đổi ngay lập tức, đôi khi người dùng chỉ vô tình cũng đã thay đổi dữ liệu trong cơ sở dữ liệu của bạn mà. Cách an toàn nhất là chỉ sử dụng Ajax để thực hiện các tác vụ kiểm tra mà không tác động trực tiếp đến dữ liệu, hoặc là bạn phải chắc chắn rằng mình cung cấp một cơ chế để khôi phục các lỗi vô tình, hoặc là bạn tạo ra một cơ chế để xác nhận mỗi khi hành động của người dùng có khả năng tạo ra những thay đổi dữ liệu. Tương thích: Ajax chỉ hoạt động nếu trình duyệt hỗ trợ đối tượng XMLHttpRequest. Đây là vấn đề mà Gmail gặp phải đối với trình duyệt Opera trước khi Opera 8 ra đời. Tuy nhiên, đến thời điểm hiện tại thì các trình duyệt phổ biến nhất đều hỗ trợ XMLHttpRequest (Firefox, Internet Explorer, Opera 8, Sarafi). Cho dù vậy, hãy luôn xây dựng một cơ chế dự phòng trường hợp trình duyệt không hỗ trợ (ví dụ nếu người dùng sử dụng máy Palm,…) Tương tác người dùng: Buồn cười là mặc dù Ajax giải quyết được một vấn đề then chốt về tương tác người dùng của các ứng dụng web, nó lại tạo ra một số vấn để nhỏ khác. Chính vì Ajax thực hiện tác vụ quá nhanh nên đôi khi người dùng không tin là nó đã được thực hiện! Tất nhiên đây đơn thuần là vấn đề về thói quen, tuy nhiên để đảm bảo khả năng tương tác ở mức tốt nhất, bạn nên có một cơ chế giúp xác nhận những gì đang AJAX – Tương lai của Web 2.0 collection by traibingo 3 diễn ra ở bên trong. Bạn có thể lấy ví dụ minh họa của tớ (xem phần sau) để tham khảo, hoặc xem một ví dụ khác ở đây. Atlas: Ajax kiểu Microsoft Công nghệ mới của Microsoft tích hợp thư viện script phía client với nền tảng phía server của ASP.NET 2.0, hứa hẹn cung cấp nền tảng phát triển toàn diện hơn và đơn giản hoá việc phát triển ứng dụng web kiểu Ajax. Công nghệ mới của Microsoft tích hợp thư viện script phía client với nền tảng phát triển phía server của ASP.NET 2.0, cho phép phát triển ứng dụng web thế hệ mới theo kiểu Ajax. Sau khi được Jesse James Garret "khai sinh" với bài viết nổi tiếng "Ajax: Giải pháp mới cho ứng dụng web" ("Ajax: A New Approach to Web Applications", Adaptive Path, tháng 2/2005), Ajax trở nên nổi đình nổi đám trong thế giới web và ngày càng xuất hiện nhiều website "kiểu Ajax" như Google Maps, A9.com và Flickr. (Công nghệ Ajax cho phép tạo nên những ứng dụng web có giao diện phong phú và có thể truy xuất dữ liệu từ server để cập nhật một phần nội dung trang web hiện hành mà không phải nạp lại toàn bộ trang như ở các website truyền thống. Tham khảo bài "Kỹ thuật lập trình Ajax" - TGVT A 12/2005, tr.124) Microsoft cũng có những ứng dụng web kiểu Ajax như MSN Virtual Earth (http://www.virtualearth.com) và Start.com. Thật ra, Microsoft đã tham gia cuộc chơi Ajax khá sớm. Tất cả các thành phần Ajax - DHTML, JScript và XMLHTTP đã có trong Internet Explorer 5 và Outlook Web Access đã dùng các kỹ thuật này từ năm 1998. Trước khi Ajax trở nên phổ biến, Microsoft đã sử dụng kỹ thuật Script Callbacks có phương thức làm việc tương tự Ajax (nhưng tính năng hạn chế hơn) trong quá trình phát triển ASP.NET 2.0. Nắm bắt xu thế Ajax, tại PDC 2005 (Professional Developer Conference - hội thảo thường niên dành cho các nhà phát triển chuyên nghiệp) Microsoft đã công bố dự án Atlas đầy tham vọng, hứa hẹn cung cấp một nền tảng toàn diện hơn và đơn giản hoá việc phát triển ứng dụng web kiểu Ajax. MỤC TIÊU AJAX – Tương lai của Web 2.0 collection by traibingo 4 Mục tiêu đầu tiên của Atlas nhằm hỗ trợ phát triển phía máy khách (client), cung cấp các tính năng: • Thư viện API hướng đối tượng bổ sung cho JavaScript. • Tương thích trình duyệt tự động (hỗ trợ ứng dụng chạy với nhiều trình duyệt). • Thư viện API và các thành phần hỗ trợ tính năng giao diện người dùng (UI) phong phú. • Phát triển client kiểu khai báo (XML script) nhằm đơn giản hoá mã lệnh chương trình. Mục tiêu thứ hai của Atlas nhằm kết hợp việc phát triển phía client với việc phát triển phía server. Thay vì chú trọng toàn bộ chương trình phía client hoặc phía server, Atlas cung cấp hỗ trợ cho cả hai, cho phép xử lý tác vụ ở nơi có ý nghĩa nhất. Phía máy chủ (server), ASP.NET có các tính năng sau phục vụ cho ứng dụng Atlas: • Dịch vụ web có khả năng kết hợp với ứng dụng Atlas. • Các điều khiển (web server control) sinh mã client cần thiết cho ứng dụng Atlas. KIẾN TRÚC AJAX – Tương lai của Web 2.0 collection by traibingo 5 Ở dạng đơn giản nhất, ứng dụng web sử dụng thư viện script của Atlas phía client gọi một dịch vụ hay ứng dụng trên máy chủ web. Nhưng với ứng dụng web phức tạp hơn, bạn sẽ phải cần đến thành phần phía server của Atlas. Không đơn thuần là thư viện Ajax bổ sung cho ASP.NET, Atlas được thiết kế để trở thành nền tảng phát triển hoàn chỉnh từ client, server đến truyền thông giữa client và server. Ngoài ra, Atlas còn cung cấp nền tảng ứng dụng - cho phép nhà phát triển "lắp ráp" các thành phần có sẵn để tạo ứng dụng. Thành phần client Ở phía client, Atlas cung cấp Client Script Framework có thể xem là mở rộng của JavaScript, hỗ trợ phát triển hướng đối tượng, tương thích đa trình duyệt, giao tiếp với dịch vụ web và các tính năng giao diện người dùng phong phú. Microsoft hứa hẹn Atlas Client Script Framework sẽ làm việc với tất cả trình duyệt và với web server bất kỳ. Nó không yêu cầu bất kỳ cài đặt nào phía client. Thư viện script phía client của Atlas là tập các file JavaScript (.js), gồm các thành phần sau: • Nhân (Script Core): bổ sung đặc tính hướng đối tượng cho JavaScript (như lớp, interface, kế thừa, xử lý sự kiện, kiểu dữ liệu ). Đây là có thể xem là .NET CLR thu nhỏ ở phía client. • Thư viện lớp cơ bản (Base Class Library): cung cấp các lớp và cấu trúc cơ bản được dùng trong phát triển .NET Framework (như StringBuilder, Debug, Event ); cung cấp thư viện API xử lý mã client dạng khai báo (XML). Lớp này còn cung cấp hỗ trợ XMLHTTP với WebRequest và WebResponse, cho phép gọi WebMethod ở các file .asmx và .aspx hay dịch vụ web bất kỳ. • Lớp mô hình thành phần và khung giao diện (Component Model và UI Framework): định nghĩa các thành phần, cơ chế liên kết các thành phần với nhau và các phương thức thực thi. Phần UI Framework xác định các kiểu thành phần giao diện cùng với hành vi (như kéo-thả). • Các điều khiển và thành phần (Controls & Components): tập các thành phần xây dựng sẵn và các điều khiển dùng cho phát triển phía client như Timer (bộ định thời), Counter (bộ đếm), các điều khiển form thông thường, điều khiển gắn với dữ liệu (ListView) hay điều khiển bản đồ (dựa trên Virtual Earth). • Lớp tương thích trình duyệt (Browser Compatibility): xử lý tương thích với các trình duyệt (hiện tại, Atlas có thể chạy trên IE, Safari và Firefox). Thành phần server Thành phần server của Atlas được xây dựng trên ASP.NET 2.0, cơ bản gồm các AJAX – Tương lai của Web 2.0 collection by traibingo 6 dịch vụ web ASP.NET và các điều khiển server. Các thành phần server này làm việc kết hợp với thư viện client của Atlas. • Điều khiển server (Atlas Server Controls): thực hiện sinh mã client (mã lệnh JavaScript và mã khai báo XML) có những đặc tính Atlas. Các điều khiển server của Atlas tương tự như các điều khiển server của ASP.NET, có ích cho người có kinh nghiệm phát triển phía server. Ngoài các điều khiển thông thường như nút lệnh, ô text, ô chọn, liên kết còn có những điều khiển Atlas đặc biệt để xử lý những hành vi ở client như rê và nhấn chuột Tất cả những điều khiển này sẽ được tích hợp vào Visual Studio để cho phép làm việc ở màn hình thiết kế giống như các điều khiển server của ASP.NET. • Cầu nối dịch vụ web (Web Services Bridge): cho phép mã client liên lạc (2 chiều: gửi và nhận dữ liệu) với dịch vụ web kiểu .asmx của ASP.NET (cũng như WebMethod được định nghĩa trên trang .aspx) và .svc của Indigo (công nghệ SOA mới nhất dự kiến ra mắt cùng với Windows Longhorn trong năm 2006) hay dịch vụ web bất kỳ. • Cầu nối dịch vụ ứng dụng (Application Services Bridge): sử dụng Web Services Bridge để cung cấp những những dịch vụ ứng dụng ASP.NET như xác thực hay truy cập và cập nhật dữ liệu. Thành phần client và server và mã khai báo Mã khai báo là đặc tính thú vị của Atlas. Điều khiển server tạo ra mã khai báo và gửi đến client trong định dạng XML. Atlas Client Framework sẽ phân tích khai báo này để sinh mã lệnh (thể hiện và hành vi của trang) ngay tại trình duyệt (client) lúc thực thi. Phương thức này nhằm tránh việc tạo hàng đống mã lệnh JavaScript rồi nhúng vào trang trước khi gửi đi từ server. Bằng cách thực hiện việc này ở phía client, kích thước trang có thể giữ khá nhỏ và người phát triển không cần phải bận tâm đến những đặc trưng của từng trình duyệt ở client. Microsoft dường như chú trọng đến kiểu lập trình khai báo này, tuy nhiên bạn vẫn có thể thực hiện kiểu mã lệnh JavaScript trực tiếp, nhưng lưu ý những tính năng hướng đối tượng hạn chế của JavaScript. AJAX – Tương lai của Web 2.0 collection by traibingo 7 HIỆN THỰC Atlas vẫn còn trong quá trình phát triển. Microsoft dự kiến sẽ ra mắt Atlas trong năm 2006 này như là thành phần bổ sung cho ASP.NET 2.0 và nó sẽ được tích hợp với Visual Studio 2005. Tuy nhiên, ngay từ bây giờ bạn đã có thể làm quen với Atlas. Microsoft hiện đã có cung cấp file ASPNETAtlas.vsi để cài đặt dự án Atlas mẫu (Atlas Web Site Template, http://msdn.microsoft.com/asp.net/info/future/atlastemplate/) trên Visual Studio 2005 (http://msdn.microsoft.com/vstudio/) hay Visual Web Developer Express (http://msdn.microsoft.com/vstudio/express/vwd/). Dự án này có đủ mọi thứ cần thiết cho dự án web kiểu Atlas, bao gồm thư viện Atlas. Hiện cũng đã có một số ứng dụng Atlas mẫu, bạn có thể tham khảo ở webblog của Nikhil Kothari (http://www.nikhilk.net) - kiến trúc sư phần mềm của Microsoft, người đã thuyết trình về Atlas tại PDC 2005. Bạn cũng có thể dễ dàng tìm thấy nhiều mẫu ứng dụng Atlas khác trên Internet. Ngoài ra, hiện cũng có những giải pháp khác cho phép phát triển ứng dụng kiểu Ajax với ASP.NET 1.0 hay 2.0 như My Ajax.Net của Jason Diamon (http://jason.diamond.name/weblog/category/my-ajax-dot-net/) và Ajax.NET của Michael Schwarz (http://ajax.schwarz-interactive.de/csharpsample/). CLIENT HAY SERVER?? AJAX – Tương lai của Web 2.0 collection by traibingo 8 Một trong những điểm mấu chốt của ứng dụng kiểu Ajax đó là giảm thiểu việc truyền thông giữa client và server. Vấn đề cần cân nhắc là gửi-nhận thông tin gì và tác vụ nào xử lý ở đâu? Việc này liên quan đến mô hình phát triển đặt trọng tâm phía server hay client. Trong mô hình phát triển đặt trọng tâm phía client, ban đầu server gửi đến client thông tin khai báo "cách trình bày" cùng "cách thức ứng xử" của giao diện người dùng. Khai báo giao diện này thực thi ở client để xử lý hành vi tương tác của người dùng, gửi dữ liệu đến server và nhận dữ liệu (không phải mã HTML) đáp trả, và dùng dữ liệu này để sinh thể hiện và nội dung. Server đưa các tài nguyên khác đến giao diện người dùng thông qua các dịch vụ. Mô hình này cho phép thực hiện hiệu quả các tình huống từ tính toán đến dữ liệu động ở client. Mô hình này cũng cho phép xử lý tức thời những hành vi của người dùng và có khả năng thực hiện những hiệu ứng thị giác như kéo-thả. Cái giá của giải pháp này gồm công sức viết mã lệnh client không nhỏ và việc chuyển luận lý giao diện từ server sang client dẫn đến yêu cầu xây dựng và học sử dụng các công cụ mới, mô hình thiết kế mới Trong mô hình phát triển đặt trọng tâm phía server, server sẽ gửi mã HTML đến client thay vì dữ liệu thuần tuý. Việc xử lý phía client đơn giản hơn nhiều, chủ yếu chịu trách nhiệm gửi yêu cầu rồi nhận mã HTML đáp trả và đặt vào đúng chỗ trong trang. Hầu hết việc xử lý tương tác và giao diện đều nằm ở server. Trong khi một số người thích "đường lối" mới, nhưng một số người khác lại thích mô hình phát triển phía server quen thuộc. Có những tính năng bạn vẫn có thể thực hiện theo mô hình phát triển truyền thống, nhưng những tính năng như tương tác giao diện người dùng phải cần đến nền tảng phát triển kiểu Atlas - cho phép cân đối giữa mô hình client phong phú với mô hình phía server hiện hữu. Tham khảo: - http://atlas.asp.net/ - http://www.nikhilk.net/ . phần server của Atlas được xây dựng trên ASP.NET 2. 0, cơ bản gồm các AJAX – Tương lai của Web 2. 0 collection by traibingo 6 dịch vụ web ASP.NET. phát triển ứng dụng web kiểu Ajax. MỤC TIÊU AJAX – Tương lai của Web 2. 0 collection by traibingo 4 Mục tiêu đầu tiên của Atlas nhằm hỗ trợ