Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX

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

CHƯƠNG III: Đối tượng XMLHttpRequest....................................................13
III.1 Giới thiệu về XMLHttpRequest ...................................................................13
III.2 Phân tích các đặc tính của XMLHttpRequest...............................................13
III.2.1 Các phương thức và thuộc tính..............................................................13
III.2.2 Sự tương tác...........................................................................................13
III.2.3 Các phương thức GET và POST............................................................14
III.3 Remote Scripting...........................................................................................14
III.3.1 Tổng quan về Remote Scripting.............................................................15
III.4 Gửi các request..............................................................................................15
III.5 DOM Level 3 và DOM.................................................................................15
III.5.1 DOM Level 3.........................................................................................15
III.5.2 DOM......................................................................................................15
1
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
III.6 Kết luận.........................................................................................................15
CHƯƠNG IV: Gửi các request và xử lý response............................................16
IV.1 Giao thức HTTP............................................................................................16
IV.1.1 Cấu trúc của HTTP Message.................................................................16
IV.1.2 Header Field...........................................................................................17
IV.1.3 Status Code............................................................................................17
IV.2 Xử lí các response của server........................................................................17
IV.2.1 Dùng thuộc tính innerHTML để tạo nội dung động..............................17
IV.2.2 Phân tách response theo chuẩn XML.....................................................17
IV.2.3 Cập nhật nội dung động với W3C DOM...............................................18
IV.3 Gửi các tham số request từ phía client..........................................................18
IV.3.1 Gửi các tham số request theo chuẩn XML.............................................18
IV.3.2 Gửi dữ liệu tới server bằng JSON..........................................................18
IV.4 Kết luận.........................................................................................................18
CHƯƠNG V: Xây dựng ứng dụng AddressBook.............................................19

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

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. 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.
I.1.1 CGI
CGI cho phép tạo các chương trình chạy khi người dùng gửi các yêu cầu.
CGI không phải là cách an toàn cho các trang Web động. Với CGI, người khác có
thể chạy chương trình trên hệ thống.
I.1.2 Applet
Applet cho phép các nhà phát triển Vết các ứng dụng nhỏ nhúng vào trang
Web. Song nó cũng có một số nhược điểm: thường bị chặn bởi việc đọc và ghi các
file hệ thống, không thể tải các thư viện, hoặc đôi khi không thể thực thi trên phía
client.
I.1.3 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. 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). DOM hoàn toàn 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 hay VBScript.
I.1.4 JSP/Servlet, ASP và PHP
Servlet là một bước tiến lớn, nó đưa ra một thư viện hàm API trên Java và
một thư viện hoàn chỉnh để thao tác trên giao thức HTTP. JSP và ASP đều được
thiết kế để phân tách qua trình xử lí khỏi quá trình biểu diễn. Các công nghệ khác,
trong đó phải kể đến là PHP (Hypertext Preprocessor) cho tới Cold Fusion. Các
công nghệ này cung cấp các bộ công cụ rất mạnh cho các nhà phát triển.
I.1.5 Flash
Flash cho phép các nhà thiết kế tạo các ứng dụng hoạt họa và linh động.
Flash không đòi hỏi các kỹ năng lập trình cao cấp và rất dễ học.
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.
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.

Cung cấp nội dung
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.
Dịch vụ web
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ệ.
Phần mềm máy chủ
Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm hai
loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc
xây dựng ứng dụng "gắn thêm" cho máy chủ web, có sử dụng giao tiếp API.
4
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.2.2 Các vấn đề nảy sinh và sự ra đời của AJAX
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. 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). Ajax ra đời là một giải pháp cho các ứng dụng Web hiện nay.
I.2.3 AJAX là gì ?
AJAX là tập hợp của nhiều công nghệ với thế mạnh của riêng mình để tạo thành
một sức mạnh mới. AJAX bao gồm:
 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ý đượ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.
So sánh hai mô hình ứng dụng Web: truyền thống và sử dụng Ajax
6
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 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 của, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi
cần thiết.
7
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 II: Các công nghệ trong 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 dữ liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và
bàn phím. Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan
“look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng
XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một
cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ
liệu trong khi người dùng vẫn làm việc.
II.1 Cascading Style Sheet – CSS
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