Ajax và ứng dụng tại công ty điện thoại hà nội 1

Bộ giáo dục và đào tạo
Trờng đại học bách khoa Hà nội
---------------------------------------------

Luận văn thạc sĩ khoa học

Ajax và ứng dụng tại công ty
điện thoại Hà nội 1

Ngành: xử lý thông tin và truyền thông
M số: 938

Nguyễn khắc Vinh

Ngời hớng dẫn khoa học: T.S. Hà quốc trung

Hà nội 2006


Lời cam đoan
Tên tôi là Nguyễn Khắc Vinh, Học viên lớp Cao học Xử lý thông tin và
truyền thông niên khoá 2004-2006. Tôi cam đoan những nội dung tôi viết
trong luận văn là nghiên cứu của bản thân tôi dới sự hớng dẫn của T.S Hà
Quốc Trung và không có sự sao chép bất hợp pháp từ nghiên cứu của ngời
khác. Nếu sai tôi hoàn toàn chịu trách nhiệm.
Hà Nội, ngày 29 tháng 11 năm 2006
Ngời cam đoan:

Nguyễn Khắc Vinh.

-1-

Mục lục
Danh mục các ký hiệu, các chữ viết tắt.6
Danh mục các hình vẽ...7
Lời nói đầu...9
Phần 1: Ajax một cách thiết kế web mới
I. Đặt vấn đề.......11
II.Ajax mở rộng các client.11
2.1 Khía cạnh ngời dùng..........................................................................12
2.2 Khía cạnh mạng....14
2.3 Các tơng tác dị bộ...16
III. Các nguyên tắt cơ bản của Ajax.................19
3.1 Trình duyệt chứa ứng dụng, không chứa nội dung...............................19
3.2 Server chuyển dữ liệu, không phải nội dung........................................21
3.3 Tơng tác liên tục giữa ngời dùng với ứng dụng ...21
Phần 2: Các kỹ thuật chính của Ajax
Chơng 1: Các thành phần chính của Ajax....23
I. Giới thiệu23
II. JavaScript...............25
III.CSS cách nhìn và cảm nhận.................................................................26
3.1 Chọn lựa CSS27
3.2 Đặc tính CSS.28
IV. DOM và cách thức làm việc với DOM30
4.1 Làm việc với DOM sử dụng JavaScript31
4.2 Tìm kiếm node DOM...33

-2-

4.3 Tạo một node DOM.............................................................................33
4.4 Thêm các kiểu dáng cho tài liệu...........................................................34
4.5 Shortcut: Sử dụng đặc tính trong HTML......35
V. Tải dữ liệu sử dụng kỹ thuật XML..36
5.1 IFrames.36
5.2 Các đối tợng XmlDocument và XmlHttpRequest..38
5.3 Gửi yêu cầu tới server...41
5.4 Sử dụng các hàm gọi ngợc để giám sát các yêu cầu...41
Chơng II: Cách sử dụng ứng dụng trong Ajax.44
I. Phát triển và duy trì cơ sở dữ liệu.44
1.1 Giới thiệu..44
1.2 Refactoring...44
1.3 Các mô hình sử dụng refactoring.........................................................45
II. Mô hình MVC: Model-View- Controller.48
2.1 Giới thiệu..48
2.2 Web server MVC..49
2.2.1 Các vấn đề nảy sinh với khả năng sử dụng lại các đoạn kịch bản..49
2.2.2 Sắp xếp lại mô hình50
2.2.3 Chia tách nội dung từ thể hiện50
Chơng III: Các kỹ thuật chính trong thiết kế ứng dụng......52
I. Các mô hình MVC..52
1.1 MVC dùng trong mô hình lặp......52
1.2 Sử dụng MVC tại trình duyệt...53
II. View trong một ứng dụng Ajax....55
2.1 Chia tách Logic khỏi View.55
2.2 Chia tách View khỏi Logic.57
III. Bộ điều khiển trong ứng dụng của Ajax....57
3.1 Điều khiển sự kiện JavaScript truyền thống.....57

-3-

3.2 Mô hình sự kiện W3C......60
IV. Tạo ra View từ các mô hình.....61
Chơng IV: Vai trò của Server....62
I. Làm việc với Server...62
II. Mã chơng trình phía server63
2.1 Các ngôn ngữ ứng dụng thông dụng63
2.2 Các kiến trúc N-tier..64
2.3 Duy trì các mô hình phía client và server.65
III. Bức tranh toàn cảnh: Thiết kế server thông dụng...66
3.1 Làm việc với Framework dựa trên thành phần.66
3.2 Làm việc với kiến trúc hớng dịch vụ..67
3.3 Trao đổi dữ liệu69
3.3.1 Tơng tác với client..70
3.3.2 Tơng tác content-centric.70
3.3.3 Các tơng tác script-centric..71
3.3.4 Tơng tác data-centric..73
IV. Viết cho server..74
4.1 Sử dụng dạng HTML75
4.2 Sử dụng đối tợng XMLHttpRequest...77
Phần III. Xây dựng ứng dụng Ajax tại công ty điện
thoại Hà Nội 1
I. Khảo sát và đánh giá hiện trạng...78
1.1 Đặc điểm công ty.78
1.2 Bài toán.78
II. Phân tích hoạt động và kết quả thực hiện...79
2.1 Hoạt động cập nhật thông tin DSLAM.....79
2.2 Các mối quan hệ...................................................................................80

-4-


2.3 Kết quả thực hiện công việc.81
2.4 Đánh giá kết quả thực hiện.......84
Phần IV. triển vọng của Ajax và khó khăn
I.

Xây dựng ứng dụng chất lợng..85

II. Bảo mật Ajax...86
III. Các thay thế cho Ajax.......87
3.1 Các giải pháp dựa trên Macro Media Flash....87
3.2 Java Web start và các kỹ thuật có liên quan...88
IV. Những nhợc điểm của Ajax..88
V. Hớng phát triển tơng lai.89

Kết luận và kiến nghị.....90
Tài liệu tham khảo.......92

-5-


Danh môc c¸c ký hiÖu, c¸c ch÷ viÕt t¾t

STT

Tõ viÕt t¾t

Gi¶i nghÜa

1

AJAX

Asynchronous JavaScript and XML

2

CGI

Common Gateway Interface

3

CSS

Cascading Style Sheets

4

DOM

Document Object Model

5

DHTML

Dynamic HTML

6

HTML

Hyper Text Messager

7

HTTP

Hyper Text Transfer Protocol

8

ID

IDENTIFIER

9

IE

Internet Explorer

10

IFRAME

Inline Frame

11

J2EE

Java/Java 2 Enterprise Edition

12

MVC

Model – View – Controller

13

RPC

Remote Procedure Call

14

ORM

Object Relational Mapping

15

W3C

World Wide Web Consortium

16

SQL

Query Language

17

SOA

Service Oriented Architechture

18

UI

User Interface

-6-


Danh mục các hình vẽ, đồ thị

Thứ tự
Hình 1.1

Tên hình
Kiến trúc cơ bản của một ứng dụng đơn trên

Trang
13

máy tính để bàn.
Hình 1.2

Kiến trúc của các hệ thống client/server và các

13

kiến trúc n-tier
Hình 1.3

Biểu đồ của hàm gọi thủ tục cục bộ

15

Hình 1.4

Biểu đồ của một thủ tục gọi từ xa.

16

Hình 1.5

Biểu đồ của một phản hồi đồng bộ

17

Hình 1.6

Biểu đồ của một phản hồi dị bộ

18

Hình 1.7

Thời gian sống của một ứng dụng web truyền

19

thống
Hình 1.8

Thời gian sống của một ứng dụng Ajax

Hình 2.1

Cách thức các dữ liệu làm việc cùng nhau trong

20
24

Ajax.
Hình 2.2

Cấu trúc cây DOM của một tài liệu HTML

31

Hình 2.3

Chuỗi các sự kiện xử lý dị bộ trong trang web.

38

Hình 2.4

Chu trình thực hiện trong mô hình Facade

46

Hình 2.5

Phân chia trách nhiệm trong mô hình Giám sát

46

Hình 2.6

Mô hình tập lệnh trong ứng dụng sử lý văn bản

47

Hình 2.7

Mô hình singleton

47

Hình 2.8

Thành phần chính trong mô hình MVC

48

Hình 2.9

Cách thức thực hiện một yêu cầu qua mạng

49

-7-


Hình 2.10

Mô hình MVC ứng dụng trong cấu trúc widget
53

cây.
Hình 2.11

Mô hình MVC với các quy mô khác nhau trong

54

kiến trúc ứng dụng.
Hình 2.12

Kiến trúc MVC với mô hình tự lặp

54

Hình2.13

di chuyển phản hồi của tier thể hiện từ server

65

tới trình duyệt
Hình2.14

Lập trình web khi không có framework.

66

Hình 2.15

Kiến trúc của một web framework dựa vào

67

thành phần
Hình 2.16

Hệ thống xử lý tất cả các đối tợng và hệ thống

69

sử dụng Facade xử lý một số ít các đối tợng
Hình 2.17

Mô hình content-centric

71

Hình 2.18

Kiến trúc Script centric cho một ứng dụng

73

Ajax.
Hình 2.19

Kiến trúc Data-centric trong ứng dụng Ajax

74

Hình 3.1

Giao diện thống kê DSLAM

81

Hình 32

Giao diện thiết bị tại các vệ tinh

82

Hình 3.3

Các lựa chọn nhập số liệu thiết bị trong một

83

trạm
Hình 3.5

Giao diện nhập và hiển thị với các lựa chọn các
trạm khác nhau

-8-

84


Lời nói đầu

Trong thời đại ngày nay, việc xây dựng một cổng thông tin cho mỗi
doanh nghiệp đang trở thành một nhu cầu tất yếu. Thông qua kênh thông tin
trên trang web, doanh nghiệp có thể quảng bá hình ảnh của mình tới tất cả c
dân trên mạng cũng nh tới các đối tác làm ăn.
Với nhu cầu nh vậy, các công nghệ thiết kế web tĩnh truyền thống nh
Fronpage, Dreamware không thể đáp ứng đợc những đòi hỏi ngày càng khắt
khe do khả năng xử lý thông tin trong giao diện ngời dùng kém, cơ chế bảo
mật đơn giản, cơ sở dữ liệu nghèo nàn không linh hoạt, khả năng cập nhật
thông tin hạn chế.

Để giải quyết các vấn đề đối với web tĩnh, xuất hiện các công nghệ mới,
cho phép cung cấp các trang web động với cơ sở dữ liệu lớn, khả năng cập
nhật nhanh, tốc độ trao đổi thông tin nhanh chóng kịp thời, khả năng bảo mật
u việt. Có thể kể ra ở đây các công nghệ nh PHP, JavaScript, .Net..và một
công nghệ đang dành đợc nhiều sự chú ý trong thời gian gần đây chính là
Ajax với cách thức xử lý và xây dựng web mới.
Với điều kiện công tác tại Công ty Điện thoại Hà Nội 1, thực tế địa bàn
quản lý và yêu cầu công việc của tôi đòi hỏi phải có một cổng thông tin có
khả năng trao đổi thông tin với khối lợng lớn, tốc độ cao, thời gian trao đổi
thông tin nhanh chóng kịp thời, đơn giản dễ dàng sử dụng.
Từ thực tế công việc, từ niềm yêu thích Ajax, tôi quyết định chọn đề tài
Ajax và ứng dụng tại công ty Điện Thoại Hà Nội 1
Nội dung của đề tài bao gồm:
- Nghiên cứu tổng quan về công nghệ Ajax
- Tìm hiểu cách thức triển khai Ajax với các ứng dụng mạng theo
mô hình client/server.

-9-


- Thiết kế ứng dụng thực tế tại Công ty Điện Thoại Hà Nội 1
Đề tài đợc hoàn thành với sự giúp đỡ nhiệt tình của thầy giáo T.S Hà
Quốc Trung, Giảng viên Khoa Công nghệ thông tin, Trờng ĐH Bách Khoa
Hà Nội, KS Nguyễn Khơng Duy cán bộ Công ty Điện Thoại Hà Nội 1. Mặc
dù đã có nhiều cố gắng trong việc nghiên cứu, su tầm, dịch và tổng hợp tài
liệu nhng chắc hẳn luận văn không tránh khỏi những thiếu sót. Tôi rất mong
nhận đợc ý kiến đóng góp của các thầy cô, các anh chị cùng toàn thể các
bạn.
Tôi xin chân thành cảm ơn!

-10-


Phần 1: Ajack một cách thiết kế web mới

I. Đặt vấn đề.
Ajax là tên viết tắt của cụm từ (Asynchronous JavaScript + XML). Đây
thực sự không phải chỉ là một cái tên. Có rất nhiều điều thú vị xung quanh
Ajax, cả về khía cạnh kỹ thuật lẫn khía cạnh kinh tế. Về kỹ thuật, Ajax đa
vào rất nhiều triển vọng trong các kỹ thuật duyệt web. Google và một vài công
ty khác đã và đang sử dụng Ajax để đáp ứng các nhu cầu của cộng đồng, với
những gì mà ứng dụng web có thể làm đợc.
Trong một vài năm trở lại đây, xuất hiện sự bùng nổ về Internet thế hệ
mới. Đi kèm với nó là sự gia tăng của các dịch vụ web (các ứng dụng web)
phức tạp hơn. Có rất nhiều kỹ thuật khác nhau đợc áp dụng nhằm cung cấp
thông tin tới các client một cách nhanh nhất và hiệu quả nhất. Ajax có thể
thực hiện công việc này khá tốt khi sử dụng lại các kỹ thuật đã đợc cài đặt
trên phần lớn các máy tính hiện đại. Đây chính là khía cạnh khiến Ajax dành
đợc nhiều sự quan tâm trong thời điểm hiện nay.
II. Ajax mở rộng các client.
Khi nhắc đến các ứng dụng trên mạng, điều đầu tiên chúng ta phải tính
chính là cách thức thiết kế các giao diện ngời dùng (UI). Việc xây dựng một
giao diện client đa dạng là khá phức tạp so với việc thiết kế một trang web. Để
có đợc một client đa dạng cần phải thoả mãn hai tiêu chí, thứ nhất nó phải là
một client, thứ 2 nó phải đa dạng.
Tính đa dạng đợc nhắc đến ở đây chính là mô hình tơng tác của
client. Một mô hình tơng tác ngời sử dụng đa dạng phải cung cấp, hỗ trợ
đầy đủ các phơng thức giao tiếp tại đầu vào và có những phản hồi trong thời

-11-

gian đúng yêu cầu. Chúng phải thực sự có hiệu quả, giống nh những ứng
dụng trên máy tính để bàn, ví dụ nh chơng trình word và excel.
2.1 Khía cạnh ngời dùng
Lấy chơng trình bảng tính trong máy tính để bàn làm ví dụ (chơng
trình Excel). Có thể nói, chơng trình này đã cung cấp cho ta khá đầy đủ các
tính năng của bảng tính. Ta có thể thực hiện các tơng tác với bảng tính theo
nhiều cách khác nhau. Sau khi thực hiện xong các thao tác, chơng trình cho
ta các tính năng quay trở lại các hoạt động trớc đó thông qua các phím back
hay follow. Tuy vậy, ứng dụng này vẫn không phải là một client đa dạng. Do
đây là một chơng trình ứng dụng chạy trên máy tính để bàn nên các mô hình
dữ liệu và mô hình logic của nó đều đợc thực hiện trong một môi trờng
đóng, ở đó các chơng trình đó có thể nhìn thấy nhau tuy vậy chúng không
thể liên kết đợc với bên ngoài. Mặt khác, theo nh định nghĩa về một client
thì client là một chơng trình mà có thể kết nối thông tin với các chơng trình
(tiến trình ) độc lập khác, điển hình là các chơng trình chạy trên một server.
Vể căn bản, server có nhiều đặc tính u điểm hơn so với client cả về kích
thớc lẫn tính năng hoạt động, nó có thể lu đợc rất nhiều thông tin. Ngời
sử dụng cuối có thể xem và thay đổi các thông tin trên Client, và nếu một vài
client kết nối tới cùng một server, chúng cho phép chia sẻ dữ liệu với nhau.
Chính vì thế, ứng dụng bảng tính (excel) trên máy tính để bàn không phải là
một client đa dạng.

-12-


Hình 1.1: Kiến trúc cơ bản của một ứng dụng đơn trên máy tính để bàn.
Với máy tính để bàn, ứng dụng chạy trên tiến trình của nó, trong đó mô
hình dữ liệu và logic là có thể nhìn thấy nhau. Một ứng dụng thứ 2 chạy trên

nó sẽ không thể truy cập đợc vào mô hình dữ liệu của chơng trình trớc,
chúng chỉ có thể truy cập vào đó thông qua file hệ thống. Trạng thái của
chơng trình đợc lu trữ trong một file đơn, và hoàn toàn bị khoá khi ứng
dụng đang chạy, qua đó ngăn chặn tất cả các trao đổi thông tin tức thời.

Hình 1.2 Kiến trúc của các hệ thống client/server và các kiến trúc n-tier

-13-


Với kiến trúc client/server, Server đa ra một mô hình chia sẻ dữ liệu,
với mô hình này các client có thể tơng tác đợc với nhau. Các client vẫn duy
trì mô hình dữ liệu riêng của nó, dùng cho các truy cập cố định. Một vài client
có thể tơng tác với cùng một server, với việc khoá tài nguyên đợc quản lý
tại một mức tiêu chuẩn của các đối tợng riêng lẻ hoặc các cơ sở dữ liệu. Một
server cũng có thể là một tiến trình đơn (giống nh trong mô hình client/server
truyền thống trong những năm đầu của thập niên 90). Trong bất kỳ trờng hợp
nào, từ khía cạnh client, server có một điểm truy cập duy nhất và ta có thể
xem nó nh là một hộp đen.
Trong một mô hình kiến trúc n-tier, server sẽ giao tiếp với các server
đầu cuối khác nh là các cơ sử dữ liệu , tạo đờng dẫn tới các lớp trung gian
(các lớp này có thể hoạt động cả ở client và server). Về mặt bản chất các ứng
dụng Ajax đợc đặt tại điểm cuối, hoạt động giống nh một client.
Tất nhiên, các trình duyệt web là các client, liên kết với web server
thông qua các yêu cầu trang web. Một trình duyệt có một số chức năng đa
dạng, phục vụ cho mục đích quản lý việc duyệt web của ngời sử dụng, ví dụ
các nút bấm, danh sách nhớ cũng nh các nút chức năng dùng để lu trữ dữ
liệu khác.
Với các trang web hiện đại, ví dụ nh trang mua bán sách Amazon,
cung cấp cho ta một lợng thông tin dồi dào, và cách thức để tơng tác với

lợng tông tin lớn này là click vào đờng link và điền thông tin vào các form.
Điều này là khá đơn giản và hiệu quả, tạo cho ngời dùng cảm giác tiện lợi
khi truy cập vào các trang web kể trên.
2.2 Khía cạnh mạng
Mục đích chính của việc phát triển Internet chính là tạo ra một môi
trờng trong đó tất cả các máy tính trên thế giới kết nối với nhau thành một
máy tính với nguồn tài nguyên rất lớn. Sẽ không còn sự phân biệt giữa các thủ

-14-


tục gọi từ xa cũng nh thủ tục gọi cục bộ, khi đó sẽ không thể xác định đợc
thiết bị nào đang hoạt động.
Tuy vậy các thủ tục gọi từ xa và thủ tục gọi cục bộ không giống nhau.
Chi phí thông tin trên mạng khá lớn (do chậm và không ổn định). Trong cùng
một miền, rất nhiều máy tính sẽ chung một kết nối mạng để gửi và nhận dữ
liệu. Đây là nguyên nhân dẫn tới tốc độ mạng bị giảm do có quá nhiều tiến
trình vật lý trên đờng dây.
Với mỗi yêu cầu, ta cần mã hoá chúng thành một đối tợng, dới dạng
một chuỗi dữ liệu. Chuỗi dữ liệu này sau đó đợc chuyển tới giao thức ứng
dụng (HTTP) và đợc gửi đi trên đờng truyền. Tại đầu xa, giao thức ứng
dụng đợc giải mã để tạo ra bản sao của đối tợng yêu cầu. Bản sao này sau
đó đợc cung cấp cho mô hình dữ liệu. Để có thể giao tiếp đợc với hàm gọi,
các lớp nối tiếp cũng nh các lớp giao vận phải tìm đờng đi rất nhiều.

Hình 1.3: Biểu đồ của hàm gọi thủ tục cục bộ

-15-

Hình 1.4: Biểu đồ của một thủ tục gọi từ xa.
Vì vậy, để thực hiện một lệnh gọi qua mạng sẽ là không hiệu quả nếu
nh gọi một phơng thức cục bộ trong bộ nhớ. Hơn nữa, do tính chất không
đảm bảo của mạng nên công việc này sẽ không hiệu quả và không có độ chính
xác cao. Nhìn chung, trễ mạng tạo ra sự không ổn định cũng nh gây ra những
lỗi đối với những ứng dụng trong các ứng dụng của thế giới thc.
2.3 Các tơng tác dị bộ
Lấy ví dụ về tiến trình ngời mẹ thực hiện trong một buổi sáng. Tiến
trình đó bao gồm việc đánh thức ngời con đang ngủ say, mở cửa sổ và cho
mèo ăn sáng. Nếu nh ngời mẹ thực hiện tiến trình trên một cách tuần tự
(đồng bộ) tức là đánh thức và đợi khi ngời con dậy hẳn mới đi mở cửa sổ và
cho mèo ăn, quá trình diễn ra một cách chậm chạp và tốn rất nhiều thời gian.
Có thể khi mở cửa sổ xong thì quên mất nhiệm vụ cho mèo ăn. Vậy chúng ta
phải thực hiện tiến trình trên nh thế nào để đạt đợc những yêu cầu đặt ra ?
Trong thực tế, chúng ta cố gắng thực hiện các phản hồi giao diện ngời
sử dụng độc lập với các hoạt động khác đang diễn ra

-16-


Hình 1.5: Biểu đồ của một phản hồi đồng bộ
Trong lĩnh vực tin học, những gì chúng ta làm là tạo ra một xử lý dị bộ
trong một tiến trình riêng rẽ. Mỗi đối tợng sẽ thực hiện một tiến trình riêng
của chúng. Trong thời gian này các đối tợng sẽ không tơng tác với nhau.
Tuy vậy các tiến trình này phải chạy theo một kịch bản nhất định.
Với bất kỳ một giao tiếp ngời dùng nào, luôn có một tiến trình dị bộ
quản lý độ dài các tính toán, thực hiện nó trong khi ngời dùng đang thực hiện
các thao tác khác. Cần phải khoá ngời sử dụng trong khi tiến trình đang thực
hiện. Tuy vậy do tiến trình này có thể đợc thực hiện trong thời gian ngắn nên
việc khoá hoạt động của ngời dùng là có thể chấp nhận đợc.

-17-


Hình 1.6: Biểu đồ của một phản hồi dị bộ
Giải pháp ở đây là chúng ta sẽ sử dụng những lệnh gọi từ xa dị bộ. Nếu
nh HTTP là giao thức hỏi-đáp, trong đó client tạo ra một yêu cầu tài liệu và
server trả lời bằng cách gửi tài liệu, hay nói rằng nó không tìm thấy, đa ra
một vị trí thay thế, nói với client sử dụng bản copy của nóGiao thức hỏiđáp là giao thức 1 chiều. Client có thể liên lạc với server nhng server không
thể khởi tạo một phiên truyền thông với client, do đó server không thể nào nhớ
đợc client từ một yêu cầu trớc đó. Chính vì thế, đặc tính then chốt của giải
pháp gọi ngợc dị bộ là ở chỗ client sẽ tạo ra thông báo 2 lần: một lần khi bắt
đầu chuỗi hoạt động và lần thứ 2 khi chuỗi hoạt động hoàn thành. Điều này
thì HTTP và mô hình ứng dụng web truyền thống không thực hiện cho chúng
ta.

-18-


III. Các nguyên tắc cơ bản của Ajax
3.1 Trình duyệt chứa ứng dụng, không phải chứa nội dung
Trong ứng dụng web truyền thống, trình duyệt là một đầu cuối. Nó
không biết bất kỳ điều gì về ngời dùng đang ở đâu trong luồng thông tin. Tất
cả các thông tin đợc lu trữ trên web server, thờng là trong phiên ngời
dùng. Các phiên ngời dùng phía server thờng đợc nhắc đến gần đây, điển
hình là một phần của chuẩn API.

Hình 1.7: Thời gian sống của một ứng dụng web truyền thống.
Hình 1.7 mô tả chu kỳ sống của một ứng dụng web. Tất cả các trạng
thái của hội thoại ngời dùng với ứng dụng đợc quản lý trên server web. Khi

ngời sử dụng truy cập vào hoặc khởi tạo một phiên, một vài đối tợng phía
server sẽ đợc tạo ra. Trong cùng thời điểm này, trang home sẽ đợc load tới
trình duyệt, trong một luồng HTML mà đợc chộn lẫn giữa các thể hiện và dữ
liệu cụ thể của ngời dùng cùng với danh sách những vấn đề đã xem gần đây.
Bất cứ khi nào ngời dùng tơng tác với trang, một tài liệu khác sẽ đợc gửi
tới trình duyệt, chứa cùng dữ liệu. Khi đó trình duyệt sẽ bỏ toàn bộ tài liệu cũ

-19-


đi và thay vào đó là tài liệu mới mà không biết cái mới đó sẽ làm việc nh thế
nào. Khi ngời dùng thoát và đóng trình duyệt, khi đó ứng dụng sẽ đóng lại và
phiên làm việc bị xoá bỏ. Bất kỳ thông tin mà ngời dùng cần xem trong
phiên tới sẽ đợc quản lý.
Một ứng dụng Ajax sẽ dịch chuyển một số các đối tợng tới trình
duyệt, nh hình sau:

Hình 1.8: Thời gian sống của một ứng dụng Ajax
Khi ngời dùng truy cập vào, một tài liệu phức tạp hơn đợc chuyển tới
trình duyệt, trong đó có một phần lớn là các mã JavaScript. Tài liệu này sẽ tồn
tại trong suốt phiên làm việc của ngời dùng, mặc dù có thể nó bị thay thế bởi
các thông tin khác khi ngời dùng tơng tác với đối tợng khác. Do tài liệu
tồn tại trong toàn bộ phiên ngời dùng nên nó có thể lu lại đợc trạng thái tất
cả các trạng thái.

-20-


3.2 Server chuyển dữ liệu, không phải là nội dung.
Nh đã nói ở trên, ứng dụng web truyền thống cung cấp cả nội dung và

dữ liệu tại tất cả các bớc. Khi ngời dùng thêm vào một mục, thì việc chúng
ta phải thực hiện là cập nhật lại toàn bộ thông tin. Điều này là rất lãng phí và
không cần thiết. Với Ajax, bằng việc gửi đi các yêu cầu dị bộ tới server và
server chỉ phải gửi lại những dữ liệu tơng ứng. ứng dụng có thể thực hiện
công việc này theo nhiều cách, ví dụ nh gửi trả lại một đoạn JavaScript, một
luồng text hoặc một tài liệu XML nhỏ. Nh vậy với các cách kể trên hoạt
động hiệu quả hơn và nhỏ gọn so với cách trả về của ứng dụng web truyền
thống.
Trong một ứng dụng Ajax, lu lợng load là rất lớn khi ngời dùng truy
nhập vào một server lớn. Chính vì vậy cách thức thực giao tiếp kể trên với
server là khá hiệu quả.
3.3. Tơng tác liên tục giữa ngời dùng với ứng dụng
Một trình duyệt web cung cấp 2 cơ chế đầu vào cho một đối tợng: qua
các siêu liên kết (hyperlinks) và qua siêu văn bản (HTML). Các siêu liên kết
có thể đợc xây dựng trên server và đợc tải về trớc với các tham số giao
diện cổng (CGI), đợc chỉ ra tại các trang server động hoặc các serverlet.
Chúng có thể phù hợp với các hình ảnh và các bảng CSS, để cung cấp thông
tin trả về ngay khi con chuột di chuyển. Các siêu liên kết có thể đợc thực
hiện giống nh các thành phần UI. Các điều khiển Form đa ra một tập con cơ
sở của các thành phần giao diện ngời dùng máy tính để bàn tiêu chuẩn: các
hộp text, các hộp kiểm, các nút bấmTuy vậy không có các điều khiển cây ,
lới, các hộp combo-box. Các form cũng giống nh các siêu liên kết đợc đặt
tại URL phía server. Tuy vậy các siêu liên kết và các form thể hiện đợc đặt
trong hàm JavaScript. Đây là một kỹ thuật thông dụng trong các trang web để
cung cấp định dạng trong JavaScript, kiểm tra các trờng trống, các số nằm

-21-


ngoài dải quy định trớc khi đa dữ liệu tới server. Những hàm JavaScript chỉ

tồn tại cùng với trang và chúng sẽ bị thay thế khi trang thay đổi.
Trong khi trang thay đổi, ngời dùng vẫn không biết đợc những gì
đang diễn ra. Trang cũ vẫn tồn tại trong một khoảng thời gian, và trình duyệt
vẫn cho phép ngời dùng chọn vào bất kỳ đờng dẫn nào họ nhìn thấy, nhng
làm nh vậy sẽ tạo ra những kết quả không chính xác và có thể làm hỏng
phiên làm việc của server. Ngời dùng cần chờ đợi cho tới khi trang đợc làm
mới, thờng với một tập các lựa chọn tơng tự nh những gì đã có từ trớc.
Sử dụng Ajax, với cơ chế gửi dữ liệu dị bộ, ngời dùng có thể thực hiện
các thao tác trên ứng dụng một cách liên tục, tạo cho họ cảm giác thời gian
chờ đợi là rất ngắn và không bị cảm giác khó chịu.
Một thuận lợi nữa của Ajax là ở chỗ chúng ta có thể duy trì các sự kiện
các hoạt động ngời dùng trong một phạm vi rộng lớn. Các khái niệm phức
tạp hơn nh drag-and-drop trở nên đơn giản Từ khía cạnh sử dụng, sự thoải
mái này là rất quan trọng không chỉ bởi vì nó cho phép chúng ta kiểm tra lại
các hình ảnh mà còn bởi vì nó cho phép chúng ta sử dụng các tơng tác ngời
dùng cũng nh các yêu cầu server đợc đầy đủ hơn.

-22-


Phần 2: Các kỹ thuật chính của Ajax

Chơng I: Các thành phần chính của Ajax
I. Giới thiệu:
Ajax không phải là một kỹ thuật đơn, nó đợc hình thành nên từ sự kết
hợp từ 4 kỹ thật khác nhau:
- Javascript: Javascript là một ngôn ngữ kịch bản mục đích chung, đợc
thiết kế ra để nhúng vào trong các ứng dụng. Bộ biên dịch JavaScript trong
các trình duyệt web cho phép thực hiện các hoạt động đợc lập trình sẵn
với rất nhiều khả năng khác nhau. Các ứng dụng Ajax thờng đợc viết

trên nền JavaScript.
- Cascading Style Sheets (CSS): CSS đa ra cách thức định nghĩa các loại
thành phần một trang web. Các định nghĩa này thờng đơn giản và hiệu
quả. CSS còn đa ra các cách thức thực hiện khác nhau. Trong một ứng
dụng Ajax, bằng CSS, ta có thể thay đổi đợc kiểu cách của một giao diện
ngời dùng.
- Document Object Model (DOM): DOM mô tả cấu trúc của các trang web,
giống nh là một tập các đối tọng có thể chơng trình hoá, mà có thể
đợc kết hợp với JavaScript, Việc viết kịch bản bằng DOM cho phép một
ứng dụng Ajax thay đổi giao diện ngời dùng tại những phần làm lại của
một trang.
- Đối tợng XMLHttpRequest: đợc sử dụng cho phép các nhà lập trình
web truy vấn dữ liệu từ web server. Định dạng dữ liệu thờng là XML, tuy
nhiên nó có thể làm việc với bất kỳ dữ liệu dạng text nào. Trong khi đối
tợng XMLHttpRequest là một công cụ linh hoạt để thực hiện truy vấn dữ

-23-


liệu từ server, thì còn có nhiều cách thức khác cũng có khả năng thực hiện
công việc trên.
Trong Ajax, JavaScrip đợc sử dụng để kết nối các phần của ứng dụng với
nhau, định nghĩa các bớc làm việc ngời dùng và logic hoá công việc của
ứng dụng. Giao diện ngời dùng đợc sử dụng và đợc làm mới bằng cách sử
dụng JavaScript có ứng dụng DOM, mô tả và tổ chức lại dữ liệu của ngời
dùng, xử lý các tơng tác về chuột và bàn phím. CSS cung cấp một cái nhìn
đây đủ và tổng thể về ứng dụng và đối tợng XMLHttpRequest đợc sử dụng
để giao tiếp dị bộ với server, nhận các yêu cầu ngời dùng và thực hiện cập
nhật dữ liệu trong khi ngời dùng làm việc.

Hình 2.1: Cách thức các dữ liệu làm việc cùng nhau trong Ajax.

-24-