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 4
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

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.6 DHTML
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.
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,

 Thể hiện web theo tiêu chuẩn XHTML và CSS, các chuẩn của W3C, được
Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ
trợ 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ý

II.1.1 Giới thiệu về CSS
Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần
không thể thiếu trong thiết kế Web. Một stylesheet đưa ra cách kiểm soát các loại
đị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
Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX
II.1.3 Cú pháp cơ bản của CSS

để tham chiếu tới nút qua hàm : var hello=document.getElementById('hello'); Một
cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức
getElementsByTagName().
II.2.3 Tạo DOM Node
Trong nhiều trường hợp cần tạo các nút mới và thêm nó vào tài liệu. JavaScript
cung cấp một số phương thức để làm điều đó.
9
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
Các phương thức chuẩn để tạo nút mớilà document.createElement()
và document.createTextNode().createTextNode() tạo một nút thể hiện qua một
đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list
item. Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên
trình duyệt, phương thức appendChild() được dùng để thực hiện điều này.
II.2.4 Thêm style vào tài liệu
DOM cũng cung cấp các phương thức để chỉnh sửa style.
Thuộc tính className
hello.className='declared';
với hello tham chiếu tới một nút DOM.
Thuộc tính style
Ví dụ, đoạn mã sau bổ sung các thuộc tính style cho nút empty:
empty.style.border="solid green 2px";
empty.style.width="200px";
II.2.5 Sử dụng thuộc tính innnerHTML
Các phần tử DOM của các trình duyệt web đều hỗ trợ một thuộc tính gọi là
innerHTML, cho phép các nội dung kiểu string tùy ý được gán cho các phần tử
theo thuộc tính này.
II.3 XML và việc truyền dữ liệu bất đồng bộ
II.3.1 Giới thiệu về XML và XSLT
II.3.1.1 XML là gì?

và người dùng vẫn có thể làm việc trong khi đợi tín hiệu trả lời từ server.
XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ và hiệu quả.
II.3.2.1 XmlDocument và XMLHttpRequest
Các đối tượng XmlDocument và XMLHttpRequest không phải là các chuẩn DOM
mở rộng của trình duyệt web nhưng vẫn được hỗ trợ bởi rất nhiều trình duyệt. Các
đối tượng đều dựa trên ActiveX hay các đối tượng JavaScript. Các trình duyệt
khác đều có thực thi các đối tượng trên có các chức năng tương đương và các lời
gọi hàm API.
II.3.2.2 Gửi một yêu cầu đến server
Gửi một yêu cầu đến server từ một đối tượng XMLHttpRequest rất dễ
dàng. Tất cả những việc ta cần làm là truyền cho nó địa chỉ URL của server.
II.3.2.3 Dùng các hàm callback để giám sát các yêu cầu
Các hàm callback đón bắt các sự kiện trong cách tiếp cận lập trình hướng
sự kiện trong hầu hết các bộ công cụ UI. Khi tạo các giao diện người dùng UI
bằng JavaScript, ta gán các hàm onkeypress, onmouseover, và đặt tên tương tự cho
các thuộc tính tương đương cho các đối tượng.
II.4 Lập trình bằng JavaScript phía client
JavaScript là một ngôn ngữ lập trình đa năng, nó là một ngôn ngữ có kiểu
tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không
được khai báo cụ thể và các biến giống nhau có thể được gán bới các kiểu khác
nhau. Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã
11
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
nhị phân có thể thực thi được, và nó được thực thi trực tiếp, cụ thể là qua các trình
duyệt. Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật
toán và các tác vụ. Trong môi trường trình duyệt web, các chức năng cơ bản của
trình duyệt, gồm CSS, DOM, và các đối tượng XMLHttpRequest, được coi là các
phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các
mức độ khác nhau.

III.2.2 Sự tương tác
Ta xét một ví dụ để tìm hiểu các tương tác của Ajax. Hình sau cho thấy mô
hình tương tác chuẩn trong một ứng dụng Ajax.
13
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 chuẩn Ajax
Quá trình tương tác:
1. Một event client-side gây ra một sự kiện - Ajax event. Bất kỳ một tác động
nào cũng có thể gây ra Ajax event, từ một sự kiện onchange đơn giản cho
đến một số tác động của người dùng.
2. Một thể hiện của XMLHttpRequest được tạo ra. Dùng phương thức open(),
tạo lời gọi hàm - địa chỉ URL được thiết lập cùng với phương thức HTTP
yêu cầu, thông thường là GET hay POST. Request được tạo ra qua việc gọi
phương thức send().
3. Một request được tạo và gửi đến server.
4. Server xử lí các yêu cầu
5. Response được trả về cho trình duyệt. Trường Content-Type được thiết lập
ở dạng text/xml; XMLHttpRequest chỉ có thể xử lí kết quả dạng text/html.
6. Cấu hình XMLHttpRequest để gọi hàm callback() khi kết quả xử lí được trả
về. Hàm này kiểm tra thuộc tính readyState trên đối tượng
XMLHttpRequest và sau đó xem xét mã trạng thái trả về từ server.
III.2.3 Các phương thức GET và POST
Trên lý thuyết, sử dụng GET khi request không thay đổi giá trị, tức là nhiều
request sẽ trả về cùng kết quả. Trong thực tế, dùng GET để truy lục dữ liệu từ
server; hay nói cách khác tránh được việc thay đổi trạng thái trên với lời gọi GET.
Phương thức POST được dùng khi muốn thay đổi trạng thái trên server.
III.3 Remote Scripting
Chúng ta cùng xét một công nghệ gọi là remote scripting nó cung cấp một
cơ chế dùng để tránh việc tái nạp các trang web.

tài liệu.
III.6 Kết luận
Trong chương này, chúng ta vừa xem xét các kỹ thuật cơ bản và là “trái
tim” của Ajax, đối tượng XMLHttpRequest.Với sự kết hợp giữa JavaScript và một
số thao tác DOM, Ajax cho phép một mức độ tương tác chưa từng có từ trước đến
nay. Với XMLHttpRequest ta không còn đợi quá trình tái nạp trang web và sự
đồng bộ với server nữa.
15
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 IV: Gửi các request và xử lý response
IV.1 Giao thức HTTP
Một HTTP message bắt đầu với một dòng request hay status, tiếp theo có
thể là nhiều loại headers và phần message body.
IV.1.1 Cấu trúc của HTTP Message
HTTP là một giao thức kiểu client/server; client đưa ra các request, và
server sẽ trả lời các request này. Cấu trúc các HTTP message vì thế cũng thay đổi
theo yếu tố này. Có một định dạng cho HTTP request và cho các response.
IV.1.1.1 HTTP Request
Mỗi request bắt đầu với một Request-Line. Dòng này chỉ ra phương thức
mà client yêu cầu, tài nguyên, và phiên bản của HTTP mà client có thể hỗ trợ.
Request-Line có thể có tiếp sau một hay nhiều header và một message body. Một
HTTP request bắt đầu với một Request-Line và có thể bao gồm các header và
message body. Phần header có thể mô tả quá việc truyền dữ liệu, xác định các yêu
cầu hay phần message body kèm theo. Request-Line chứa ba mục phân biệt, đó là
method, uri, và phiên bản HTTP, mỗi mục được phân tách bởi một hay nhiều
khoảng trống. Một HTTP Request-Line có một phương thức, một địa chỉ định
danh tài nguyên (URI), và thông báo phiên bản HTTP. Mục tiếp theo trong
Request-Line là Request-uri. Mục này cung cấp địa chỉ định danh tài nguyên cho
một tài nguyên.

tiếp theo sẽ bắt đầu với một hay nhiều kí tự trống hay kí tự gạch ngang.
IV.1.3 Status Code
Một phần rất quan trọng của HTTP response là mã trạng thái - status code. Mã này
xác định xem yêu cầu của client có được thực hiện thành công hay không và cung
cấp thêm thông tin về request. Mỗi giá trị status code là một số ba kí tự.
IV.2 Xử lí các response của server
XMLHttpRequest cung cấp hai thuộc tính để truy cập vào response của
server. Thuộc tính đầu tiên, responseText, chỉ đơn giản là cung cấp response dưới
dạng một biến string. Thuộc tính thứ hai, responseXML, cung cấp response dưới
dạng đối tượng XML. Truy cập response dưới dạng text đơn giản rất thuận lợi cho
các trường hợp sử dụng đơn giản, chẳng hạn như hiển thị response trong một alert
hay response là một cấu trúc đơn giản thông báo thành công hay bị lỗi.
IV.2.1 Dùng thuộc tính innerHTML để tạo nội dung động
Rất khó khăn khi dùng các response dạng text để tạo nội dung động cho các
trang web. Thuộc tính responseText trở nên hữu ích nếu ta dùng nó chung với
thuộc tính innerHTML của các phần tử HTML. Nó đơn giản là một xâu kí tự biểu
diễn nội dung giữa một thẻ mở và thẻ đóng. Bằng cách dùng kết hợp responseText
và innerHTML, server có thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các
trình duyệt qua thuộc tính innerHTML.
IV.2.2 Phân tách response theo chuẩn XML
Có thể server không cần thiết phải gửi response với định dạng XML. Nó
hoàn toàn có thể gửi response dưới dạng text. Các cấu trúc dữ liệu phức tạp
thường được gửi trong định dạng XML.
17
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
IV.2.2.1 W3C Document Object Model
W3C Web định nghĩa về DOM:
Document Object Model (DOM) là một nền tảng hay là một giao diện ngôn
ngữ trung gian cho phép các chương trình hay các script truy cập và cập nhật

các phương thức HTTP GET hay POST, trong khi dữ liệu request có thể gửi qua
18
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
các câu truy vấn, XML hay dữ liệu JSON. Sau khi xử lí request, server trả lời bằng
các dữ liệu text đơn giản, dữ liệu XML hay thậm chí là dữ liệu JSON.
CHƯƠNG V: Xây dựng ứng dụng AddressBook
V.1 Giới thiệu
AddressBook là một ứng dụng web dùng để quản lý các danh bạ trực tuyến.
Ứng dụng này được xây dựng với PHP/MySQL được áp dụng AJAX.
V.2 Thiết kế các module trong ứng dụng
Ứng dụng AddressBook có các module chính sau:
 Module admin
 Module quản lý login/logout cho user
 Module quản lý danh mục
 Module quản lý nhóm
 Module quản lý danh sách mail
 Module quản lý các chức năng khác
V.3 Thiết kế cơ sở dữ liệu
Ta thiết kế dữ liệu theo cách từ trên xuống; nghĩa là chúng ta đi tìm các
bảng, sau đó tìm các mối liên kết giữa các bảng này, lập sơ đồ quan hệ.
Xây dựng các bảng dữ liệu
Về người sử dụng ta xây dựng bảng user để lưu thông tin người dùng, và
một bảng khác là user_person để lưu thêm các thông tin về vai trò của người dùng
trong hệ thống, là người sử dụng hay là tên người trong các danh mục.
Những người có tên trong các danh mục được lưu trữ trong bảng person, và
bảng user_person với cách thiết lập như đã nói ở trên, bảng group dùng để lưu các
nhóm, address lưu các địa chỉ địa lý, contact dùng để lưu các cách liên hệ có thể
qua email, điện thoại… Bảng mailling_list lưu các nhóm danh sách email và
mailling_list_contact chứa id của mailling_list và contact để gửi mail cho một

VI.5.2 So sánh hai ứng dụng AddressBook và SimpleAddressBook
Chạy ứng dụng SimpleAddressBook trên localhost ta có kết quả sau:
Ta thấy khi thực thi một ứng dụng không dùng AJAX, mỗi khi chuyển một
tác vụ nào đó, chẳng hạn như thêm một danh mục vào danh bạ. Trang web sẽ được
nạp lại toàn bộ, xuất hiện thanh tiến trình của quá trình nạp. Trong khi việc thay
đổi các tác vụ trong ứng dụng AddressBook chỉ dẫn đến sự thay đổi ở phần của
trang web được thao tác. Ta không phải đợi cho việc nạp lại toàn bộ trang web.
Như vậy, có thể kết luận ưu điểm và sức mạnh của AJAX ở chỗ, nó không thao tác
đồng bộ với server theo cách truyền thống là cách nạp lại toàn bộ trang web mà nó
truyền dữ liệu theo kiểu bất đồng bộ, cho phép làm việc với từng phần của trang
web.
KẾT LUẬN
AJAX là một công nghệ mang tính đột phá và là công nghệ chủ chốt của
thế hệ Web 2.0. Với AJAX, không chỉ là vấn đề cải thiện tốc độ duyệt Web, mà
quan trọng hơn đó là việc xóa nhòa ranh giới giữa các ứng dụng Web và ứng dụng
Desktop.
Việc mô hình hóa theo hướng đối tượng (DOM) các trang web cho ta một
hướng tiếp cận và thao tác với từng phần của trang web với các ngôn ngữ script
(như JavaScript) trở nên dễ dàng và hiệu quả. Để hiển thị các trang web phía client
thì CSS là một giải pháp hoàn hảo. Sự kết hợp các công nghệ hiển thị và cập nhật
21
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
nội dung phía trình duyệt cộng với việc truyền dữ liệu bất đồng bộ qua
XMLHtttpRequest đã hình thành lên AJAX.
AJAX có thể mở ra một hướng đi mới cho CNTT, khi đó có thể chia sẻ và
tiết kiệm tối đa. Một số hướng nghiên cứu và phát triển với AJAX có thể được
triển khai là:
- Xây dựng các ứng dụng Web để thay thế các ứng dụng desktop.
- Nâng cao tính cộng đồng và chia sẻ trong các ứng dụng Web (một ví dụ là