Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX
Mục Lục
I.1 Quá trình phát triển các công nghệ trong ứng dụng Web..................................3
I.1.1 CGI.............................................................................................................3
I.1.2 Applet.........................................................................................................3
I.1.3 JavaScript....................................................................................................3
I.1.4 JSP/Servlet, ASP và PHP...........................................................................3
I.1.5 Flash...........................................................................................................3
I.1.6 DHTML......................................................................................................3
I.1.7 XML...........................................................................................................4
I.2 Web 2.0 và công nghệ AJAX ...........................................................................4
I.2.1 Công nghệ Web thế hệ thứ hai – Web 2.0..................................................4
I.2.2 Các vấn đề nảy sinh và sự ra đời của AJAX..............................................5
I.2.3 AJAX là gì ?...............................................................................................5
I.2.4 Các thế mạnh của AJAX............................................................................5
CHƯƠNG II: Các công nghệ trong AJAX..........................................................8
II.1 Cascading Style Sheet – CSS...........................................................................8
II.1.1 Giới thiệu về CSS......................................................................................8
II.1.2 Các ưu điểm của CSS trong thiết kế web..................................................8
II.1.3 Cú pháp cơ bản của CSS...........................................................................9
II.1.4 Các thuộc tính của CSS Style....................................................................9
II.2 Document Object Model – DOM.....................................................................9
II.2.1 Làm việc với DOM bằng JavaScript.........................................................9
II.2.2 Tìm kiếm một DOM Node........................................................................9
II.2.3 Tạo DOM Node.........................................................................................9
II.2.4 Thêm style vào tài liệu............................................................................10
II.2.5 Sử dụng thuộc tính innnerHTML............................................................10
II.3 XML và việc truyền dữ liệu bất đồng bộ.......................................................10
II.3.1 Giới thiệu về XML và XSLT..................................................................10
II.3.2 XMLHttpRequest...................................................................................11
II.4 Lập trình bằng JavaScript phía client.............................................................11

V.1 Giới thiệu ......................................................................................................19
V.2 Thiết kế các module trong ứng dụng..............................................................19
V.3 Thiết kế cơ sở dữ liệu.....................................................................................19
V.4 Triển khai ứng dụng ......................................................................................19
V.4.1 Yêu cầu...................................................................................................19
V.4.2 Qui trình cài đặt.......................................................................................20
V.4.3 Kết quả cài đặt ứng dụng trên Windows.................................................20
V.5 Triển khai một ứng dụng không dùng AJAX.................................................20
V.5.1 Giới thiệu và cài đặt ứng dụng SimpleAddressBook..............................20
VI.5.2 So sánh hai ứng dụng AddressBook và SimpleAddressBook ..............21
KẾT LUẬN..........................................................................................................21
Nhiệm vụ của đồ án
Đồ án này tập trung nghiên cứu về công nghệ Ajax và ứng dụng của nó,
trong đó tập trung vào các yếu tố sau:
 Giới thiệu về AJAX, các công nghệ trong AJAX
 Việc truyền và xử lý dữ liệu trong AJAX
 Các framework cho phát triển ứng dụng web với AJAX
 Xây dựng ứng dụng áp dụng AJAX
Kết quả
 Nêu lên quá trình phát triển của công nghệ Web và thế hệ Web 2.0
 Tìm hiểu các công nghệ trong AJAX đó là CSS, DOM, XML và JavaScript
 Nghiên cứu về đối tượng XMLHttpRequest, đây là trái tim của công nghệ
AJAX
 Nghiên cứu việc truyền và xử lí dữ liệu phía client cũng như server
 Xây dựng ứng dụng với AJAX
2
Phạm Thị Thu Duyên- Lớp CT702
Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX
CHƯƠNG I: Tổng quan về AJAX
I.1 Quá trình phát triển các công nghệ trong ứng dụng Web

Trong thực tế nó là một tập hợp gồm HTML, Cascading Style Sheets (CSS),
JavaScript, và DOM. Tập hợp các công nghệ trên cho phép các nhà pháp triển sửa
đổi nội dung và cấu trúc của một trang Web một cách nhanh chóng.
3
Phạm Thị Thu Duyên- Lớp CT702
Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX
I.1.7 XML
Ngày nay chúng ta có rất nhiều dạng dẫn xuất của XML cho các ứng dụng
Web (tất nhiên là có cả XHTML): XUL của Mozilla; XAMJ, một sản phẩm mã
nguồn mở trên nền Java; MXML từ Macromedia; và XAML của Microsoft.
I.2 Web 2.0 và công nghệ AJAX
I.2.1 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".
I.2.1.1 Khái niệm
Dougherty không đưa ra định nghĩa mà chỉ dùng các ví dụ so sánh
phân biệt Web 1.0 và Web 2.0. Có 7 đặc tính của Web 2.0:
1. Web có vai trò nền tảng, có thể chạy mọi ứng dụng
2. Tập hợp trí tuệ cộng đồng
3. Dữ liệu có vai trò then chốt
5. Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng
4. Phát triển ứng dụng dễ dàng và nhanh chóng
6. Phần mềm có thể chạy trên nhiều thiết bị
7. Giao diện ứng dụng phong phú
I.2.1.2 Công nghệ
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.

rất tốt.
 Nâng cao tính năng động và phản hồi bằng DOM (Document Object Model);
một chuẩn của W3C
 Trao đổi và xử lý dữ liệu bằng XML và XSLT; cũng là một chuẩn của W3C
 Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng
XMLHttpRequest
 Và tất cả các công nghệ trên được liên kết lại với nhau bằng JavaScript.
I.2.4 Các thế mạnh của AJAX
Ajax là viết tắt của Asynchronous JavaScript and XML – công nghệ kết hợp
hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:
 Gửi yêu cầu (request) đến server
 Phân tách và làm việc với XML
Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest.
Ở các ứng dụng web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên
trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn
gọi postback), server sẽ xử lý yêu cầu này và gửi trả response chứa các thông tin
dưới dạng HTML và CSS, trang HTML này sẽ thay thế trang cũ.
5
Phạm Thị Thu Duyên- Lớp CT702
Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX
Mô hình tương tác trong một ứng dụng Web truyền thống
Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp này. Khi đó, các
yêu 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ị. 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

định dạng trực quan, nó có thể được áp dụng cho các thành phần riêng lẻ trên các
trang. Với Ajax, stylesheet cung cấp một “kho chứa” các giao diện xác định trước
có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất.
CSS định dạng một trang web theo ba cách :
o Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)
o Định nghĩa trong một trang web (Internal Style Sheet).
o Định nghĩa thành một file CSS riêng (External Style Sheet). Trang web của
chúng ta sẽ tham chiếu đến file CSS này.
Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn -
selector 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.
II.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
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
d. Thứ tự áp dụng các định dạng
 Inline Style (Style được qui định trong một thẻ HTML cụ thể)
 Internal Style (Style được qui định trong phần <HEAD> của một trang
HTML)
 External Style (style được qui định trong file CSS ngoài)
 Browser Default (thiết lập mặc định của trình duyệt)
8
Phạm Thị Thu Duyên- Lớp CT702