Công nghệ AJAX
CÔNG NGHỆ AJAX
Mở Đầu
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ộ"), 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, em sẽ tổng hợp những gì em tìm hiểu được về công nghệ
AJAX gồm cả những điểm mạnh và điểm yếu của nó, đồng thời em đã tạo ra một ứng
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
1
Công nghệ AJAX
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.

1.2 Tổ chức bộ máy quản lý của công ty
1.2.1 Sơ đồ tổ chức công ty
1.2.2 Các phòng ban và chức năng
- Phòng Hành Chính: Phòng Hành Chính có chức năng về công tác văn thư - lưu trữ,
lễ tân, đối ngoại, thông tin tuyên truyền, nội vụ và làm đầu mối thông tin phục vụ cho
hoạt động sản xuất kinh doanh của Công ty.
- Phòng Kế Hoạch: Có chức năng về công tác Kế hoạch; Quản lý tài sản; Cung ứng
vật tư.
- Phòng Kinh doanh: Có chức năng về công tác Marketing; Kinh doanh sản phẩm, dịch
vụ; Bán hàng; Hợp tác kinh doanh.
- Phòng Kỹ Thuật Điều Hành: Có chức năng về kỹ thuật công nghệ, điều hành khai
thác mạng và thiết bị.
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
3
Công nghệ AJAX
- Phòng Kế Toán Tài Chính: Có chức năng về công tác kế toán, thống kê, tài chính
của Công ty.
- Phòng Đầu Tư Phát Triển: Có chức năng về công tác đầu tư xây dựng cơ bản, phát
triển sản xuất.
- Phòng Tổ Chức Lao Động: Có chức năng về công tác tổ chức bộ máy, nhân sự, tiền
lương, đào tạo, thi đua, an ninh an toàn, chính sách đối với người lao động.
- Ban Biên Tập Báo Điện Tử: Có chức năng về thông tin quảng bá.
- PhòngTính Cước: Có chức năng về công tác tính cước và các vấn đề liên quan tới
việc tính cước phí các loại hình dịch vụ trên mạng của toàn Công ty.
- Phòng Nghiên Cứu Ứng Dụng Phần Mềm: Là bộ phận sản xuất, có chức năng về
công tác nghiên cứu công nghệ tin học và sản xuất các sản phẩm tin học.
- VDCA: Ban Dự án VDCA có chức năng về quản lý hoạt động, thực hiện và hỗ trợ
thực hiện các dự án được Công ty giao.
- Phòng Tích Hợpvà Phát Triển Hệ Thống: Có chức năng chính trong công tác

Sun Microsystems, Hewlett Packard, IBM, Compaq, Fujitsu, Cisco, Bay
Network, Cabletron etc.
• Phần mềm hệ thống và quản trị mạng với UNIX (Sun Solaris, HP-UX),
Microsoft Windows, SQL, HP Open View for Network Node Management
Solution, Netscape Web/Mail Server, Raptor firewall etc.
Bên cạnh đó là mối quan hệ chặt chẽ với các nhà cung cấp dịch vụ hàng đầu thế
giới:
• Telstra (Australia); Global One Group; Alcatel (France); Nortel (Canada);
NTTCommunication, KDD, (Japan), Korea Telecom (RO Korea); Singapore
Telecom; Microsoft, Oracle (USA); Hongkong Telecom (Hongkong);
InfoAccess,
Tất cả vì một mục tiêu: cung cấp những sản phẩm và dịch vụ tốt nhất cho khách
hàng.
-Tầm nhìn kinh doanh
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
5
Công nghệ AJAX
Xuất phát từ đặc điểm hoạt động trong lĩnh vực công nghệ thông tin, chất lượng
dịch vụ và tốc độ là hai yếu tố quan trọng trong kinh doanh. Ngay từ khi thành lập năm
1989 công ty đã không ngừng cố gắng để có thể cung cấp dịch vụ dựa trên triết lý kinh
doanh "Uy Tín và Tốc độ".
Hoà cùng với xu hướng tự do hoá trong nền kinh tế cũng như trong viễn thông
trên thế giới và tại Việt nam, trong các năm qua công ty đã không ngừng phấn đấu thay
đổi trong phương pháp và hình thức quản lý để đáp ứng được sự thay đổi, đứng vững
và phát triển trên thị trường.
Năm 1999 đánh dấu việc xây dựng "Văn hoá VDC" với mục tiêu tạo động lực
thúc đẩy tinh thần làm việc, tính tự chủ sáng tạo, tinh thần trách nhiệm cao cho toàn
bộ cán bộ nhân viên trong Công ty, cải thiện tinh thần thái độ phục vụ đối với khách
hàng cũng như cải thiện các qui trình qui định kinh doanh.

của VDC
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
7
Công nghệ AJAX

GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
8
Công nghệ AJAX

GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
9
Công nghệ AJAX
Chương 2: CÔNG NGHỆ AJAX
2.1Giới thiệu về công nghệ AJAX
TỪ NHỮNG GIỚI HẠN CỦA CÁC ỨNG DỤNG WEB HIỆN TẠI…
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ì
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

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.
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
11
Công nghệ AJAX
2.2 Quá trình phát triển công nghệ Web- Nguyên nhân xuất hiện công nghệ
AJAX.
Trước khi tìm hiểu về Ajax, chúng ta cùng xem xét quá trình phát triển các công
nghệ Web, nguyên nhân và hoàn cảnh xuất hiện công nghệ Ajax. Ban đầu, các trang
Web là tĩnh; người dùng gửi yêu cầu một tài nguyên nào đó, và server sẽ trả về tài
nguyên đó. Các trang Web không có gì hơn là một văn bản được định dạng và phân
tán. Đối với các trình duyệt, thì các trang Web tĩnh không phải là các vấn đề khó khăn,
và trang Web lúc đầu chỉ để thông tin về các sự kiện, địa chỉ, hay lịch làm việc qua
Internet mà thôi, chưa có sự tương tác qua các trang Web. Năm 1990, Tim Berners-
Lee, tại CERN, đã sáng chế ra HTML (Hyper Text Markup Language), ngôn ngữ đánh
dấu siêu văn bản. HTML rất đơn giản và dễ dùng, và nó trở thành một ngôn ngữ rất
phổ biến và cơ bản.
Tuy nhiên, không lâu sau đó, nhu cầu về các trang Web động, có sự tương tác
ngày một tăng, chính vì thế sự ra đời các công nghệ Web động là một điều tất yếu. Sau

ảo Java JVM, các applet chỉ thực thi khi có môi trường thích hợp được cài đặt phía
client, hơn nữa tốc độ của các applet là tương đối chậm vì thế applet không phải là giải
pháp tối ưu cho Web động.
2.2.3 JavaScript
Cùng thời gian này, Netscape đã tạo ra một ngôn ngữ kịch bản gọi là JavaScript.
JavaScript được thiết kế để việc phát triển dễ dàng hơn cho các nhà thiết kế Web và
các lập trình viên không thành thạo Java. (Microsoft cũng có một ngôn ngữ kịch bản
gọi là VBScript). JavaScript ngay lập tức trở thành một phương pháp hiệu quả để tạo ra
các trang Web động. Việc người ta coi các trang như là một đối tượng đã làm nảy sinh
một khái niệm mới gọi là Document Object Model (DOM). Lúc đầu thì JavaScript và
DOM có một sự kết hợp chặt chẽ nhưng sau đó chúng được phân tách. DOM hoàn toàn
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
13
Công nghệ AJAX
là cách biểu diễn hướng đối tượng của trang Web và nó có thể được sửa đổi với các
ngôn ngữ kịch bản bất kỳ như JavaScript.
2.2.4 Công nghệ Web thế hệ thứ hai – Web 2.0
Được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web mới có những
thay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở cách thức sử dụng -
hình thành nên môi trường cộng đồng, ở đó mọi người cùng tham gia đóng góp cho xã
hội "ảo" chứ không chỉ "duyệt và xem".
Web 2.0 là gì? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0? Thuật ngữ
"Web 2.0" đang trở nên thịnh hành. Thực chất, Web 2.0 có nghĩa là sử dụng web đúng
với bản chất và khả năng của nó.
Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm kết
nối các nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ thông tin
hiệu quả. Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee cũng nhằm mục
tiêu tạo phương tiện cho phép người dùng tự do đưa thông tin lên Internet và dễ dàng
chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-Lee viết bao gồm cả công

2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.
Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0. Hàng loạt
công nghệ mới được phát triển nhằm làm cho ứng dụng trên web mạnh hơn, nhanh hơn
và dễ sử dụng hơn, được xem là nền tảng của Web 2.0.
Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao
gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình
duyệt và ứng dụng.
+ Cung cấp nội dung
Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế
cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng
thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin). Có nhiều giao
thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất cả đều dựa trên
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
15
Công nghệ AJAX
XML. Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính
năng của website hay cho phép người dùng tương tác.
+ Dịch vụ web
Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của
kiến trúc Web 2.0. Có hai loại giao thức chính là REST và SOAP. REST
(Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi
trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ
thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web đều
được gọi qua API. Ngôn ngữ chung của dịch vụ web là XML, nhưng có thể có ngoại
lệ.
Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties
Broadcasting Protocol do Chris Dockree phát triển. Giao thức này cho phép các đối
tượng ảo (tồn tại trên web) tự biết chúng "là gì và có thể làm gì”, nhờ vậy có thể tự liên
lạc với nhau khi cần.

mà là một thuật ngữ mô tả việc sử dụng kết hợp một nhóm nhiều công nghệ với nhau.
Trong thực tế, các công nghệ dẫn xuất hoặc kết hợp dựa trên Ajax như AFLAX cũng
đã xuất hiện.
2.3.2 AJAX hoạt động như thế nào?
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.
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
17
Công nghệ AJAX
Để 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.
"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

cầu gửi resquest và nhận response do Ajax Engine thực hiện. Thay vì trả dữ liệu dưới
dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi trả dữ liệu dạng
XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho
trình duyệt hiển thị.
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
19
Công nghệ AJAX
Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời
người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang.
Mặt khác, sự kết hợp của các công nghệ web như CSS và XHTML làm cho việc trình
bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. Đây
là những lợi ích hết sức thiết thực mà Ajax đem lại.
Có thể nhìn vào 2 hình vẽ để so sánh hai mô hình ứng dụng Web: truyền thống và
sử dụng Ajax.
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
20
Công nghệ AJAX
Còn đây là mô hình tương tác trong một ứng dụng Web dùng Ajax:
Rõ ràng điểm khác biệt là thay vì phải tải cả trang web thì với AJAX ta chỉ cần
tải về phần của trang Web muốn thay đổi. Điều này giúp cho ứng dụng web của phản
hồi nhanh hơn, thông minh hơn. Ngoài ra, điểm đặc biệt quan trọng trong công nghệ
Ajax nằm ở chỗ Asynchronous - bất đồng bộ - tức là gửi yêu cầu của mình tới server
và tiếp tục thực thi tác vụ hiện tại mà không cần chờ trả lời. Khi nào server xử lý xong
yêu cầu, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi cần thiết
2.4 Các công nghệ AJAX
AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. JavaScript có vai trò chất
keo kết dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng
cách dùng JavaScript để điều khiển Document Object Model, tạo và tổ chức biểu diễn

và phần khai báo - style declaration. Selector đặc tả các phần tử được định dạng và bố
trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng. Giả sử
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
22
Công nghệ AJAX
muốn tạo ra các dòng text trong level-1 heading trong tài liệu (đó là đoạn nằm trong
thẻ <h1>) có màu đỏ.
Có thể khai báo thuộc tính CSS như sau:
h1 {color: red}
2.4.1.2 Các ưu điểm của CSS trong thiết kế web
a. CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế
web.
Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ. Style
thường được lưu trong các file nằm ngoài trang web. Chúng giúp thay đổi cách thức
định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS.
b. CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều
trang web với chỉ duy nhất một lần thay đổi tại một vị trí.
c. Có thể định nghĩa nhiều style vào một thẻ HTML .
CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác
nhau. Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong một
trang web hoặc ở trong một file CSS bên ngoài.
d. Thứ tự áp dụng các định dạng
Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ
xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML? Theo một cách chung
nhất ra có thể nói các style sẽ được "xếp tầng" (cascade). Việc xếp tầng này tuân theo
thứ tự ưu tiên giảm dần như sau:
• Inline Style (Style được qui định trong một thẻ HTML cụ thể)
• Internal Style (Style được qui định trong phần của một trang HTML)
• External Style (style được qui định trong file CSS ngoài)

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
GVHD: Th.S Nguyễn Trung Tuấn
SV: Hoàng Trọng Sơn
24
Công nghệ AJAX
c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML)
Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì
đã làm mất các ưu điểm của CSS.
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
2.4.1.4 Các thuộc tính của CSS Style
Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần
text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm
của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính
trên. Ví dụ để qui định cho một paragraph:
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}
2.4.2 Công nghệ trong AJAX - Javascript
JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống C. JavaScript