Tài liệu AJAX – Tương lai của Web 2.0 part 1 doc

AJAX – Tương lai của Web 2.0
collection by traibingo

1


Bạn đang sử dụng Gmail? hay Google Map? Bạn yêu thích tính năng của Google
Suggest? hay ứng dụng web Ta-da List, Backpack, BaseCamp của 37Signals?
hay các tính năng tiện dụng của Flickr?
Trên đây là một số các ứng dụng/dịch vụ web nổi lên trong thời gian gần đây như
là những ứng dụng không chỉ giàu tính năng mà còn có tính chất "cách mạng"
trong lịch sử phát triển của các ứng dụng web. Điểm chung của các dịch vụ web
này là gì? Câu trả lời là những tính năng và cách thức nó tương tác với người dùng:
rất tiện lợi và nhanh chóng đến nỗi bạn gần như tưởng mình đang sử dụng một
phần mềm chứ không phải đang xem trang web.
Công nghệ đứng đằng sau các dịch vụ này là AJAX, viết tắt của Ansynchronous
JAvascript and XML ("ansynchronous" có nghĩa là "không đồng bộ" - lý do vì
sao được giải thích trong bài), hay Advanced JAvascripting and XML. Cái tên
Ajax được nhắc đến lần đầu tiên bởi Adaptive Path và nhanh chóng được chấp
nhận rộng rãi trong cộng đồng những người phát triển ứng dụng web và giờ đây có
lẽ là cái tên được nhắc đến nhiều nhất và được xem là một công nghệ hứa hẹn sẽ
mở ra thời kỳ mới của các ứng dụng web (mặt khác, cũng có rất nhiều ý kiến trái
ngược nhau về tên gọi này).
Vậy Ajax là gì? Vì sao nó làm được những điều mà các công nghệ trước đây
không thực hiện được? Cơ chế hoạt động của nó? Nó có phức tạp không? Làm thế
nào để ứng dụng nó cho các sản phẩm của bạn? Ajax có điểm yếu nào không? và
khi nào nên sử dụng Ajax? Trong bài viết này, tớ sẽ tổng hợp những gì tớ tìm hiểu
được về công nghệ này gồm cả những điểm mạnh và điểm yếu của nó, đồng thời tớ
đã tạo ra một ứng dụng minh họa cho việc áp dụng công nghệ Ajax với đầy đủ mã
nguồn và giải thích chi tiết từng bước để áp dụng công nghệ này.
TỪ NHỮNG GIỚI HẠN CỦA CÁC ỨNG DỤNG WEB HIỆN TẠI…

Trước khi tìm hiểu tại sao Ajax lại được xem là "cứu tinh" của các ứng dụng web,
hãy thử phân tích những giới hạn của các ứng dụng web hiện tại khiến nó chưa thể
thay thế cho các phần mềm máy khách truyền thống.
Chỉ cách đây vài năm, khi mà các dịch vụ web bùng nổ, người ta đã mơ tưởng đến
một lúc nào đó tất cả các ứng dụng mà bạn sử dụng sẽ là các ứng dụng web thay vì
AJAX – Tương lai của Web 2.0
collection by traibingo

2
các phần mềm chạy độc lập trên các máy tính đơn lẻ. Quả thật, với sự phát triển
chóng mặt của mạng Internet cùng với những ưu điểm của các ứng dụng web (truy
cập tại mọi nơi, không cần nâng cấp,…), tương lai của các phần mềm chắc chắn sẽ
gắn chặt với các ứng dụng web, nếu không muốn nói là có thể sẽ bị thay thế. Tuy
nhiên, cho đến giờ, giấc mơ đó vẫn chưa thành sự thật và người ta bắt đầu nghĩ
rằng, có lẽ nó sẽ không bao giờ trở thành sự thật. Tại sao vậy?
Một trong những giới hạn quan trọng của các ứng dụng web hiện tại là cách thức
nó tương tác với người dùng. Khác với các phần mềm chạy độc lập ở máy khách
có những khả năng dường như vô tận trong cách thức tương tác với người dùng,
các ứng dụng web bị giới hạn bởi chính nguyên lý hoạt động của nó: tất cả các giao
dịch phải thực hiện thông qua phương thức giao dịch HTTP (HyperText
Transport Protocol - Giao thức truyền tải qua các siêu liên kết). Để hiểu tại sao
tính chất này lại trở thành một rào cản của các ứng dụng web, hãy phân tích cách
thức hoạt động của các dịch vụ web hiện tại xử lý một tác vụ đơn giản như xóa
email trong Yahoo! Mail:
Bạn đang ở trong hòm thư "Inbox" của Yahoo! Mail. Bạn chọn một số email và
nhấn nút Delete để xóa chúng (chuyển vào thùng rác). Yahoo! Mail trước hết sẽ
lấy danh sách các email bạn chọn (quá trình này chạy trên máy của bạn), sau đó
gởi danh sách này cùng với mã lệnh qua một siêu liên kết đến máy chủ của Yahoo
(nếu bạn muốn biết đó là địa chỉ nào, nó được xác định qua tham số "action" của
thẻ <form></form>) yêu cầu máy chủ thực hiện tác vụ xóa đối với các email đó và

gửi lại trang web Yahoo! mail với nội dung mới. Trong khoảng thời gian yêu cầu
được gửi đi đến lúc bạn nhận được trang web mới, những gì bạn phải làm là …
ngồi đợi nhìn màn hình trình duyệt trắng bốc (nếu bạn sử dụng ADSL thì thời gian
này cũng không đến nỗi - khoảng từ 2 đến 3 giây, còn nếu bạn dùng dial-up thì…).
Và bạn cũng sẽ phải trải qua một quá trình tương tự đối với các tác vụ khác, thậm
chí nếu bạn chỉ muốn chuyển từ thư mục "Inbox" (hòm thư đến) sang "Sent" (hòm
thư đi).
Bạn sẽ không bao giờ phải trải qua việc chờ đợi trên khi sử dụng các phần mềm
chạy trên máy tính đơn lẻ: bạn không bao giờ thấy phần mềm một khi đã được mở
ra lại phải "biến mất" vài trong vài giây để cập nhật dù chỉ là một tác vụ đơn giản
nhất, và ngay cả khi phần mềm cần thời gian xử lý một tác vụ nào đó thì bạn vẫn
thấy nó ở đó, và nó báo cho bạn là nó đang xử lý tác vụ của bạn. Nếu xét về khía
cạnh khả năng ứng dụng trong các tác vụ hàng ngày thì hạn chế trên của các ứng
dụng web là không thể chấp nhận được.
AJAX – Tương lai của Web 2.0
collection by traibingo

3
Tất nhiên, bên cạnh rào cản về cách thức tương tác, các ứng dụng web còn vấp
phải nhiều giới hạn khác (ví dụ như bản thân việc phải hoạt động dựa trên các trình
duyệt đã là một rào cản quan trọng) nhưng một khi chưa giải quyết được vấn đề
trên thì các ứng dụng web sẽ không bao giờ có thể thay thể cho các phần mềm độc
lập.
… ĐẾN HIỆN TƯỢNG GMAIL
Nếu bạn đã từng sử dụng Gmail, bạn sẽ nhận thấy Gmail đem lại cho bạn cái cảm
giác đang sử dụng một phần mềm hơn là một dịch vụ web: sử dụng bàn phím
(không phải chuột) để chọn một hoặc nhiều email, nhấn nút "Archive" và ngay lập
tức các email được bỏ vào hộp lưu trữ. Bạn gần như không phải đợi - trang Gmail
vẫn ở đó. Và nếu có email mới, bạn sẽ được thông báo ngay mà không cần phải tải
lại trang web.

Gmail ra đời và nhanh chóng trở thành một hiện tượng - không chỉ ở chỗ nó là dịch
vụ webmail đầu tiên cho miễn phí 1GB dung lượng mà còn ở chỗ cách nó thay đổi
quan niệm truyền thống về cách thức thực hiện tương tác với người dùng của các
ứng dụng web

AJAX - sự kết hợp kỳ diệu của công nghệ web
Đề tài kỹ thuật vốn luôn khô khan và không mấy thú vị, nhưng
những câu chuyện về quá trình phát triển của AJAX trong không
gian ứng dụng Internet đa phương tiện đã tạo nên sức hút khó tin
xuyên suốt năm 2005.
Thế hệ Web 2.0 chỉ vừa bắt đầu và sẽ phải trải qua cả một chặng
đường dài phía trước để có thể thay đổi những gì vốn đã trở nên
quen thuộc với mọi người 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. Dù thế
giới chưa thực sự sẵn sàng đón nhận, nhiều người cho rằng các ứng dụng AJAX
đang phát triển còn nhanh hơn cả định luật Moore - động lực thúc đẩy ngành điện
toán gốc.
AJAX là gì?
AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không
đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ

AJAX là công cụ
trọng tâm của
Web 2.0. (ECT)
AJAX – Tương lai của Web 2.0
collection by traibingo

4
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.
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ệ với

nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày
thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với
máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền. Đây đều là công
nghệ sẵn có nhưng Javacript đã lắp ráp chúng lại để thực hiện những "sứ mệnh"
đáng khâm phục.
Hầu hết các câu chuyện về nguồn gốc của AJAX được bắt đầu từ khi Microsoft
phát triển công nghệ Remote Scripting vào năm 1998. Tuy nhiên, phương pháp tải
không đồng bộ nội dung trên một trang web đã xuất hiện trong thành tố IFRAME
của Internet Explorer 3 (1996) và thành tố LAYER của Netscape 4.0 năm 1997.
Khi giới thiệu Internet Explorer 4.0, Microsoft đã sử dụng mô hình đối tượng tài
liệu DOM khác biệt. Đến năm 2000, Netscape hoàn toàn đánh mất thị trường trình
duyệt vào tay hãng phần mềm của Bill Gates và thành tố LAYER cũng không còn
được các chuyên gia phát triển web chú ý tới.
Phải vài năm sau, AJAX mới lại lôi kéo được sự quan tâm của giới công nghệ và
trở thành công cụ cải tiến giao diện người dùng cho ứng dụng web. Thuật ngữ này
cũng chỉ mới xuất hiện cách đây 1 năm (tháng 2/2005) trong bài viết nổi tiếng của
Jesse James Garrett trên trang Adaptive Path. Từ đó, AJAX trở thành trung tâm
trong mọi câu chuyện liên quan đến thế hệ Web 2.0.
AJAX hoạt động như thế nào?

Ứng dụng web truyền thống (trái) và
ứng dụng AJAX. (Adaptive Path)
AJAX – Tương lai của Web 2.0
collection by traibingo

5
Từ lâu, mọi người đã tưởng tượng ứng dụng máy tính rồi sẽ được lưu và chạy hoàn
toàn trên web thay vì nằm bó buộc trong ổ cứng. Dù vậy, viễn cảnh đó vẫn chưa
thể xảy ra do ứng dụng web bị hạn chế bởi nguyên lý rằng tất cả các thao tác phải
được thực hiện thông qua HTTP (HyperText Transfer Protocol - Giao thức truyền

tải qua siêu liên kết). Những hoạt động của người sử dụng trên trang web sẽ tạo ra
một yêu cầu HTTP tới server. Máy chủ thực hiện một số khâu xử lý như lấy lại dữ
liệu, tính toán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một
trang HTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật, phương pháp này nghe
có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực
hiện vai trò của nó thì người dùng sẽ làm gì? Tất nhiên là chờ đợi.
Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung
gian - cơ chế xử lý AJAX - giữa máy khách và máy chủ. Điều này giống như việc
tăng thêm một lớp giữa cho ứng dụng để giảm quá trình "đi lại" của thông tin và
giảm thời gian phản ứng. Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp
những thông tin được thay đổi, còn giữ nguyên các phần khác. Vì thế, khi duyệt
một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng
(blank) và biểu tượng đồng hồ cát - dấu hiệu cho thấy máy chủ đang thực hiện
nhiệm vụ. Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang
chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang. Còn khi
áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy
tạo nên các giao dịch trơn tru, nhanh chóng.
AJAX – Tương lai của Web 2.0
collection by traibingo

6

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. (Adaptive Path)
"Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý AJAX, thay vì
tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy chủ", Jesse James
Garrett đã ghi trong bài viết đầu tiên định nghĩa về thuật ngữ này. "Nếu cần gì từ
server, như tải về bổ sung mã giao diện hay nhận dữ liệu mới, AJAX sẽ truyền yêu
cầu tới máy chủ 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".
Các ứng dụng AJAX phổ biến
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. Còn với Google Maps, mọi người có thể theo dõi
những thay đổi, xê dịch, kéo thả bản đồ như trên môi trường desktop. Google
Suggest và Google Maps là hai ví dụ nổi bật về phương pháp ứng dụng web thế hệ
mới. Hãng dịch vụ tìm kiếm hàng đầu thế giới đã đầu tư rất nhiều vào việc phát
triển AJAX. Hầu như mọi chương trình họ giới thiệu gần đây, từ Orkut, Gmail đến
phiên bản thử nghiệm Google Groups, đều là những ứng dụng AJAX.
AJAX – Tương lai của Web 2.0
collection by traibingo

7
Nhiều công ty khác cũng đang nối gót xu thế này như trang chia sẻ ảnh Flickr (hiện
thuộc Yahoo) hay công cụ tìm kiếm A9.com của Amazon. Yahoo dự định trong vài
tuần tới sẽ ra mắt bản Yahoo Mail Beta 1 sử dụng AJAX trên toàn thế giới (đang
được thử nghiệm giới hạn). Hòm thư mới sẽ được trang bị thêm nhiều tính năng
thuộc Web 2.0 như RSS, chế độ xem thư trước (preview) Microsoft cũng đang
triển khai chương trình Windows Live Mail và Windows Live Messenger hỗ trợ
AJAX.
Những dự án 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 rất đơn giản như Google
Suggest đến tinh vi và phức tạp như Google Maps.
Thách thức lớn nhất khi tạo ứng dụng AJAX không nằm ở khâu kỹ thuật bởi
những thành phần của nó đã xuất hiện từ lâu, hoạt động ổn định và được hiểu
người biết đến. Vấn đề ở đây chỉ là "các chuyên gia thiết kế cần quên đi những giới
hạn của web, bắt đầu nghĩ rộng hơn, sâu hơn về khả năng của công nghệ và sáng
tạo nó theo cách riêng của mỗi người", Alexei White, Giám đốc sản xuất của công
ty eBusiness (Mỹ), nhận xét. "AJAX sẽ làm mất dần ảnh hưởng của Microsoft trên
thị trường. Tuy chưa thể lấn át hoàn toàn, nó sẽ mang lại những tính năng thay thế

cho hầu hết các sản phẩn như Office".
Những nhược điểm của AJAX
AJAX có thể góp phần tạo nên một thế hệ mới cho ứng dụng web (như colr.org
hay backpackit.com). Tuy nhiên, nó cũng là một công nghệ "nguy hiểm" khi gây ra
không ít rắc rối về giao diện người dùng. Chẳng hạn, phím "Back" (trở lại trang
trước) được đánh giá cao trong giao diện website chuẩn. Đáng tiếc, chức năng này
không hoạt động ăn khớp với Javascript và mọi người không thể tìm lại nội dung
trước đó khi bấm phím Back. Bởi vậy, chỉ một sơ xuất nhỏ là dữ liệu trên trang đã
bị thay đổi và khó có thể khôi phục lại được. Đây là một trong những nguyên nhân
chính khiến nhiều người không ủng hộ ứng dụng Javascript.
Bên cạnh đó, mọi người không thể lưu lại địa chỉ web vào thư mục Favorite
(Bookmark) để xem lại về sau. Do áp dụng lớp trung gian để giao dịch, các ứng
dụng AJAX không có một địa chỉ cố định cho từng nội dung. Khiếm khuyết này
làm cho AJAX dễ "mất điểm" trong mắt người dùng.
Những trình duyệt hỗ trợ AJAX là Microsoft Internet Explorer 5.0 trở lên;
browser dựa trên Gecko như Mozilla, Firefox, SeaMonkey, Epiphany, Galeon và
Netscape 7.1; trình duyệt chứa KHTML API 3.2 trở lên như Konqueror, Apple
Safari
AJAX – Tương lai của Web 2.0
collection by traibingo

8
CSS - tập tin định kiểu theo tầng (Cascading Style Sheets) - được dùng để miêu tả
cách trình bày các tài liệu viết bằng ngôn ngữ HTML, XHTML, XML, SVG,
XUL Các thông số kỹ thuật của CSS do tổ chức World Wide Web Consortium
(W3C) quản lý.
DOM - mô hình đối tượng tài liệu (Document Object Model) - là một giao diện lập
trình ứng dụng (API). Thông thường DOM có dạng một cây cấu trúc dữ liệu và
được dùng để truy xuất các tài liệu HTML và XML. Mô hình DOM hoạt động độc
lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài

liệu.
DHTML, hay HTML động, tạo một trang web bằng cách kết hợp các thành phần:
ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ lệnh máy khách (như Javascript) và
ngôn ngữ định dạng CSS và DOM. Do có khả năng phong phú, DHTML còn được
dùng như một công cụ xây dựng các trò chơi đơn giản trên trình duyệt.