AJAX–TươnglaicủaWeb2.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 webcủ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ủaAjax 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 webcủ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ươnglaicủaWeb2.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ảilạ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 webcủ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ủaAjax 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ệucủ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ươnglaicủaWeb2.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ươnglaicủaWeb2.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ươnglaicủaWeb2.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ươnglaicủaWeb2.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ươnglaicủaWeb2.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ươnglaicủaWeb2.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ợ