Nghiên cứu ứng dụng công nghệ Ajax và Google maps API để thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam

NGUYỄN DUY HUY

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
----------------------------

NGUYỄN DUY HUY

CÔNG NGHỆ THÔNG TIN

NGHIÊN CỨU ỨNG DỤNG CÔNG NGHỆ AJAX VÀ
GOOGLE MAPS API ĐỂ THIẾT KẾ WEBSITE
QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ
KHAI THÁC KHỐNG SẢN Ở VIỆT NAM

LUẬN VĂN THẠC SĨ KHOA HỌC
CƠNG NGHỆ THÔNG TIN

2009

Hà Nội – 2011


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
-----------------------------

NGUYỄN DUY HUY

NGHIÊN CỨU ỨNG DỤNG CÔNG NGHỆ AJAX VÀ
GOOGLE MAPS API ĐỂ THIẾT KẾ WEBSITE

QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ
KHAI THÁC KHOÁNG SẢN Ở VIỆT NAM

Chuyên ngành: Cơng nghệ thơng tin

LUẬN VĂN THẠC SĨ KHOA HỌC
CƠNG NGHỆ THÔNG TIN

NGƯỜI HƯỚNG DẪN KHOA HỌC:
TS. Cao Tuấn Dũng

Hà Nội – 2011


LỜI CAM ĐOAN
Tôi là Nguyễn Duy Huy, học viên lớp Cao học Công nghệ Thông tin K2009,
Trường Đại học Bách Khoa Hà Nội xin cam kết: Luận văn tốt nghiệp là cơng trình
nghiên cứu của bản thân tơi dưới sự hướng dẫn của TS. Cao Tuấn Dũng – Bộ môn
Công nghệ Phần mềm - Viện Công nghệ Thông tin và Truyền thông – Trường Đại học
Bách Khoa Hà Nội.
Các kết quả nêu trong luận văn tốt nghiệp là trung thực, khơng sao chép tồn văn
của bất kỳ cơng trình nào khác.
Hà Nội ngày 05 tháng 11 năm 2011
Tác giả luận văn

Nguyễn Duy Huy

1

MỤC LỤC
LỜI CAM ĐOAN ........................................................................................................... 1
MỤC LỤC ...................................................................................................................... 2
DANH MỤC THUẬT NGỮ VÀ CHỮ VIẾT TẮT......................................................... 5
DANH MỤC BẢNG BIỂU ............................................................................................ 6
DANH MỤC HÌNH VẼ.................................................................................................. 7
LỜI CẢM ƠN ................................................................................................................ 9
MỞ ĐẦU...................................................................................................................... 10
1. Tính cấp thiết của đề tài ........................................................................................ 10
2. Mục đích nghiên cứu ............................................................................................ 13
3. Nhiệm vụ nghiên cứu............................................................................................ 13
4. Phạm vi nghiên cứu .............................................................................................. 13
5. Bố cục của luận văn .............................................................................................. 13
6. Phương pháp nghiên cứu....................................................................................... 14

Chương 1: TỔNG QUAN VỀ AJAX........................................................................... 15
1.1. Khái niệm về AJAX .................................................................................. 15
1.2. Ưu nhược điểm của AJAX ........................................................................ 17
1.2.1. Ưu điểm ............................................................................................ 17
1.2.2. Nhược điểm....................................................................................... 17
1.3. Giới thiệu một số công nghệ chính trong AJAX ........................................ 17
1.3.1. HTML................................................................................................ 18
1.3.2. CSS ................................................................................................... 18
1.3.3. DOM ................................................................................................. 20
1.3.4. XML .................................................................................................. 21
1.3.5. XML httpRequest .............................................................................. 22
1.3.6. XML và JavaScript ............................................................................ 28
1.3.7. Gửi các request và xử lý các response ............................................... 29
1.3.8. Xử lý respone của Server................................................................... 30
1.4. Các bước xây dựng một ứng dụng AJAX ................................................. 31

Tóm tắt chương 1 ............................................................................................ 32
Chương 2: TỔNG QUAN VỀ GOOGLE MAPS ..................................................... 33
2.1. Giới thiệu chung về Google Maps ............................................................ 33
2.2. Tạo bản đồ Google Maps.......................................................................... 34
2.2.1. Bắt đầu với một bản đồ đơn giản ....................................................... 34
2.2.2. Thêm các thành phần chuyển hướng.................................................. 36
2


2.2.3. Thiết lập bản đồ khởi tạo ................................................................... 37
2.2.4. Thêm điểm và cửa sổ hiển thị thông tin trên bản đồ........................... 37
2.3. Các hàm API của Google Maps ................................................................ 39
2.4. Các đối tượng chính ................................................................................. 40
2.4.1. Gmap2 .............................................................................................. 40
2.4.2. GlatLng ............................................................................................. 41
2.4.3. GlatLngBounds ................................................................................. 42
2.5. Các đối tượng điều khiển bản đồ .............................................................. 42
2.5.1. Panning ............................................................................................. 42
2.5.2. Zooming............................................................................................ 43
2.5.3. Thay đổi loại bản đồ .......................................................................... 43
2.5.4. GoverviewMap.................................................................................. 44
2.6. Thêm dữ liệu người dùng ......................................................................... 44
2.6.1. Gmarker ............................................................................................ 44
2.6.2. GIcon ................................................................................................ 45
2.6.3. Cửa sổ thông tin ................................................................................ 46
2.6.4. Gpolyline .......................................................................................... 47
2.7. Các sự kiện ............................................................................................... 47
2.7.1. Gevents ............................................................................................. 47
2.7.2. GbrowserIsCompatible ...................................................................... 48
2.7.3. Các sự kiện Gmap ............................................................................. 48

2.7.4. Các sự kiện Gmarker ......................................................................... 49
2.8. AJAX và Google Maps ............................................................................. 49
2.8.1. DHTML và AJAX .............................................................................. 49
2.8.2. GXmlHttp ......................................................................................... 50
Tóm tắt chương 2 ............................................................................................ 51
Chương 3: THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ
KHAI THÁC KHOÁNG SẢN Ở VIỆT NAM................................................................. 52
3.1. Giới thiệu chung ...................................................................................... 52
3.2. Phân tích và thiết kế hệ thống về chức năng ............................................. 53
3.2.1. Xây dựng biểu đồ phân cấp chức năng .............................................. 53
3.2.1.1. Phân tích yêu cầu của bài toán.................................................... 53
3.2.1.2. Biểu đồ phân cấp chức năng ....................................................... 55
3.2.2. Sơ đồ hoạt động của hệ thống ............................................................ 57
3.2.3. Sơ đồ giải thuật của hệ thống............................................................. 57
3


3.2.4. Đưa bản đồ nền Google Maps vào website ........................................ 59
3.2.4.1. Lý do chọn bản đồ nền Google Maps ......................................... 59
3.2.4.2. Các bước đưa bản đồ nền vào website ........................................ 59
3.2.5. Mô tả đối tượng mỏ ........................................................................... 61
3.2.5.1. Xác định các thông số của đối tượng mỏ .................................... 61
3.2.5.2. Xây dựng đối tượng mỏ ............................................................. 63
3.3. Phân tích và thiết kế hệ thống về dữ liệu................................................... 66
3.3.1. Thiết kế các thực thể ......................................................................... 66
3.3.2. Thiết kế cơ sở dữ liệu ........................................................................ 68
3.3.2.1. Lựa chọn hệ QTCSDL................................................................. 68
3.3.2.2. Thiết kế CSDL MySQL ............................................................... 69
3.3.2.3. Thiết kế cơ sở dữ liệu XML ........................................................ 71
3.3.3. Kết nối với CSDL .............................................................................. 73

3.4. Thiết kế website ....................................................................................... 74
3.4.1. Lựa chọn mơ hình thiết kế............................................................. 74
3.4.2. Thiết kế giao diện............................................................................ 1
3.4.3. Xây dựng website ......................................................................... 81
3.4.4. Cài đặt và chạy thử nghiệm ........................................................... 89
Tóm chương 3 ................................................................................................. 90
KẾT LUẬN .......................................................................................................... 91
1. Nhiệm vụ đã hoàn thành .............................................................................. 91
2. Các đóng góp khoa học ............................................................................... 91
3. Hướng phát triển luận văn ........................................................................... 92
TÀI LIỆU THAM KHẢO............................................................................................. 93

4


DANH MỤC THUẬT NGỮ VÀ CHỮ VIẾT TẮT
TT

Chữ viết tắt

Cụm từ viết tắt

1

AJAX

Asynchronous JavaScript and XML

2

XML

eXtensible Markup Language

3

HTML

HyperText Markup Language

4

XHTML

Extensible HyperText Markup Language

5

CSS

Cascading Style Sheets

6

W3C

World Wide Web Consortium

7

DOM

Document Object Model

8

XSLT

XSL Transformations

9

ECMA

European Computer Manufacturers Association

10

HTTP

HyperText Transfer Protocol

11

SGML

Standard Generalized Markup Language

12

DHTML

Dynamic HyperText Markup Language

13

IE

Internet Explorer

14

UI

User Interface

15

URL

Uniform Resource Locator

16

JSP

JavaServer Pages/Java Scripting Preprocessor

17

PHP

Hypertext Preprocessor

18

API

Application Programming Interface

19

Zoom

Chức năng Phóng to/Thu nhỏ bản đồ

20

Click

Kích chuột

21

Table

Bảng được định nghĩa trong file HTML

22

CSDL

Cơ sở dữ liệu

23

HQTCSDL

Hệ quản trị Cơ sở dữ liệu

5


DANH MỤC BẢNG BIỂU
Bảng 1.1: Các phương thức của đối tượng XMLHttpRequest .............................. 24
Bảng 1.2: Các thuộc tính của đối tượng XMLHttpRequest .................................. 24
Bảng 1.3: Các mã trạng thái Response ................................................................. 26
Bảng 3.1: Bảng mô tả thực thể tb_mininglist ....................................................... 68
Bảng 3.2: Bảng mô tả thực thể tb_news ............................................................... 69
Bảng 3.3: Bảng mô tả thực thể tb_chart ............................................................... 69
Bảng 3.4: Bảng mô tả thực thể tb_image ............................................................. 70
Bảng 3.5: Bảng mô tả thực thể tb_members ........................................................ 70

6


DANH MỤC HÌNH VẼ
Hình 1.1: Ứng dụng web truyền thống/AJAX ...................................................... 16
Hình 1.2: Mơ hình cổ điển ................................................................................... 17
Hình 1.3: Mơ hình AJAX .................................................................................... 17

Hình 1.4: Mơ hình tương tác chuẩn trong một ứng dụng AJAX ........................... 27
Hình 2.1: Hình ảnh về bản đồ Google Maps ........................................................ 34
Hình 2.2: Ứng dụng bản đồ Google Maps đơn giản nhất ..................................... 37
Hình 2.3: Thêm các điều khiển vào bản đồ .......................................................... 37
Hình 2.4: Thay đổi loại bản đồ hiển thị ............................................................... 39
Hình 2.5: Thêm dữ liệu người dùng vào bản đồ ................................................... 39
Hình 2.6: Các đối tượng cơ bản của Google Maps ............................................... 41
Hình 2.7: Đối tượng bản đồ - Gmap2 .................................................................. 42
Hình 2.8: Đối tượng Panning ............................................................................... 44
Hình 2.9: Các điều khiển Phóng to/Thu nhỏ bản đồ ............................................. 45
Hình 2.10: Các điều khiển thay đổi loại bản đồ ................................................... 45
Hình 2.11: Gmarker ............................................................................................. 46
Hình 2.12: GIcon mặc định với cửa sổ hiển thị thơng tin ..................................... 47
Hình 2.13: Tạo các icon bất kỳ với GIcon ........................................................... 48
Hình 3.1: Biểu đồ phân cấp chức năng ................................................................ 58
Hình 3.2: Sơ đồ hoạt động của hệ thống .............................................................. 59
Hình 3.3: Sơ đồ giải thuật của hệ thống ............................................................... 60
Hình 3.4: Giao diện bản đồ Google Maps trên website ........................................ 64
Hình 3.5: Minh họa phương thức displaymap() ................................................... 68
Hình 3.6: Bảng tb_mininglist............................................................................... 72
Hình 3.7: Bảng tb_news ...................................................................................... 72
Hình 3.8: Bảng tb_bieudo .................................................................................... 72
Hình 3.9: Bảng tb_hinhanh .................................................................................. 72
Hình 3.10: Bảng tb_members .............................................................................. 73
Hình 3.11: Luồng xử lý của mơ hình ................................................................... 77
Hình 3.12: So sánh mơ hình MVC với mơ hình 3 lớp .......................................... 78
Hình 3.13: Mơ hình MVC ................................................................................... 79
Hình 3.14: Các ký hiệu mỏ trên bản đồ................................................................ 84
Hình 3.15: Giao diện trang chủ của website......................................................... 85
Hình 3.16: Chức năng Tìm kiếm mỏ.................................................................... 85

Hình 3.17: Kết quả Tìm kiếm mỏ ........................................................................ 86
Hình 3.18: Giao diện trang Tin tức ...................................................................... 86
7


Hình 3.19: Giao diện trang Xem biểu đồ về lượng than tiêu thụ .......................... 87
Hình 3.20: Giao diện trang Hình ảnh ................................................................... 88
Hình 3.21: Giao diện trang Liên hệ...................................................................... 88
Hình 3.22: Giao diện trang Liên hệ...................................................................... 89
Hình 3.23: Giao diên trang đăng nhập Quản trị hệ thống ..................................... 89
Hình 3.24: Giao diện trang Quản trị..................................................................... 90
Hình 3.25: Giao diện trang Quản trị tài khoản ..................................................... 91
Hình 3.26: Giao diện trang Quản trị mỏ............................................................... 91
Hình 3.22: Giao diện trang Quản trị biểu đồ ........................................................ 91

8


LỜI CẢM ƠN
Trước tiên, em xin bày tỏ lòng biết ơn sâu sắc tới thầy giáo TS. Cao Tuấn Dũng,
Viện Công nghệ Thông tin và Truyền thông, Trường Đại học Bách Khoa Hà Nội,
đã tận tình hướng dẫn em trong suốt quá trình thực hiện luận văn. Nhờ sự quan tâm,
chỉ bảo và những ý kiến đóng góp quý báu của thầy đã giúp em hoàn thành luận văn
này.
Em xin chân thành cảm ơn tập thể các thầy cô giáo trường Đại học Bách Khoa Hà
Nội nói chung và Viện Cơng nghệ Thơng tin và Truyền thơng nói riêng đã tận tình
giảng dạy và truyền đạt cho em những kiến thức, kinh nghiệm quý báu trong suốt
những năm học vừa qua.
Tôi cũng xin cảm ơn các đồng nghiệp ở Trường Đại học Mỏ - Địa chất đã tạo điều
kiện về thời gian để tơi có thể học tập và hồn thành luận văn.

Cuối cùng, tôi xin chân thành cảm ơn gia đình, người thân và bạn bè đã hết lịng
giúp đỡ về vật chất lẫn tinh thần trong suốt quá trình học tập và thực hiện luận văn.
Xin chân thành cảm ơn!
Hà Nội, ngày 05 tháng 11 năm 2011
Nguyễn Duy Huy
Lớp Cao học Công nghệ Thông tin K2009
– Trường Đại học Bách Khoa Hà Nội

9


MỞ ĐẦU
1. Tính cấp thiết của đề tài
Bản đồ là một dạng thể hiện thông tin địa lý đã ra đời từ xa xưa. Các bản đồ trước
tiên được phác thảo để mơ tả vị trí, cảnh quan, địa hình v.v…Bản đồ chủ yếu gồm
những điểm và đường. Tuy nhiên bản đồ dạng này thích hợp cho quân đội và các cuộc
thám hiểm hơn là được sử dụng như một công cụ khai thác tiềm năng của địa lý.
Bản đồ vẫn tiếp tục được in trên giấy ngay cả khi máy tính đã ra đời một thời gian
dài trước đó. Bản đồ in trên giấy bộc lộ những hạn chế như: thời gian xây dựng, đo
đạc, tạo lập rất lâu và tốn kém. Lượng thông tin mang trên bản đồ giấy là khá hạn chế
vì nếu mang hết các thơng tin lên bản đồ sẽ rắc rối và làm cho khó đọc. Bên cạnh đó
bản đồ giấy khơng thể cập nhật theo thời gian được…
Vì vậy mà ý tưởng mơ hình hóa khơng gian lưu trữ vào máy tính, tạo nên bản đồ
máy tính đã được các chuyên gia thực hiện. Đó là bản đồ đơn giản có thể mã hóa, lưu
trữ trong máy tính; sữa chữa khi cần thiết; có thể hiển thị trên màn hình và in ra giấy.
Tuy nhiên, các nhà nghiên cứu nhận thấy nhiều vấn đề địa lý cần phải thu thập một
lượng lớn thông tin không phải là bản đồ. Lúc này khái niệm Hệ thống thông tin địa lý
(viết tắt là GIS - Geographic Information System) ra đời thay thế cho thuật ngữ bản đồ
máy tính. GIS được hình thành từ các ngành khoa học: Địa lý, Bản đồ, Tin học và
Toán học. Chỉ đến những năm 80 thì GIS mới có thể phát huy hết khả năng của mình

do sự phát triển mạnh mẽ của cơng nghệ phần cứng máy tính.
Bắt đầu từ thập niên 80, GIS đã trở nên phổ biến trong các lĩnh vực như: thương
mại, khoa học và quản lý. Chúng ta có thể gặp nhiều cách định nghĩa khác nhau về
GIS:
- GIS là một tập hợp của các phần cứng, phần mềm máy tính cùng với các thơng
tin địa lý (mô tả không gian). Tập hợp này được thiết kế để có thể thu thập, lưu trữ,
cập nhật, thao tác, phân tích, thể hiện tất cả các hình thức thơng tin mang tính khơng
gian.
- GIS là một hệ thống máy tính có khả năng lưu trữ và sử dụng dữ liệu mơ tả các
vị trí (nơi) trên bề mặt trái đất.
- Một hệ thống được gọi là GIS nếu nó có các cơng cụ hỗ trợ cho việc thao tác với
dữ liệu không gian - Cơ sở dữ liệu GIS là sự tổng hợp có cấu trúc các dữ liệu số hóa
khơng gian và phi khơng gian về các đối tượng bản đồ, mối liên hệ giữa các đối tượng
khơng gian và các tính chất của một vùng của đối tượng.
- GIS là từ viết tắt của:
+ G: Geographic - dữ liệu khơng gian thể hiện vị trí, hình dạng (điểm, tuyến, vùng).
+ I : Information - thuộc tính, khơng thể hiện vị trí (như mơ tả bằng văn bản, số,
tên...) .

10


+ S: System - sự liên kết bên trong giữa các thành phần khác nhau (phần cứng, phần
mềm).
Tóm lại, GIS là một hệ thống phần mềm máy tính được sử dụng trong việc vẽ bản
đồ, phân tích các vật thể, hiện tượng tồn tại trên trái đất. Công nghệ GIS tổng hợp các
chức năng chung về quản lý dữ liệu như hỏi đáp (query) và phân tích thống kê
(statistical analysis) với sự thể hiện trực quan (visualization) và phân tích các vật thể
hiện tượng không gian (geographic analysis) trong bản đồ. Sự khác biệt giữa GIS và các
hệ thống thông tin thơng thường là tính ứng dụng của nó rất rộng trong việc giải thích hiện

tượng, dự báo và quy hoạch chiến lược.
Các ứng dụng phổ biến của GIS:
Các hệ thống thông tin địa lý đều cung cấp các công cụ cho phép tạo lập bản đồ,
tổng hợp các thông tin liên quan đến các thực thể trên bản đồ, thể hiện các sự kiện, thể
hiện các ý tưởng, giải quyết các bài toán phức tạp trong thực tế. GIS có thể được sử
dụng trong nhiều lĩnh vực, nhiều đối tượng người dùng: cá nhân, gia đình, trường học,
hay các cơ quan, tổ chức nghiên cứu. Việc tạo và phân tích bản đồ khơng phải là mới,
nhưng GIS đóng vai trị nâng cao chất lượng, độ chính xác và nhanh hơn so với cách làm
bằng tay truyền thống. Và, trước khi có GIS, chỉ một số ít người có khả năng sử dụng
thông tin địa lý trong việc ra quyết định và giải quyết vấn đề.
Ngày nay, GIS là một cơng nghệ "đắt giá", có hàng trăm ngàn người trên thế giới
đang làm việc với nó. Các nhà chun mơn của hầu hết các lĩnh vực đang dần dần nhận
thấy lợi ích trong phương pháp suy nghĩ và làm việc theo phương diện địa lý. GIS
không phải chỉ dùng để tạo ra những bản đồ tĩnh, mà nó cịn cho phép tạo ra các bản
đồ đẹp nhiều màu sắc và hơn thế nữa là khả năng tạo bản đồ động. Khả năng tạo lập
bản đồ động giúp người dùng có thể lựa chọn và loại bỏ bất cứ các thành phần nào trên
bản đồ nhằm phân tích một cách nhanh chóng các nhân tố khác biệt ảnh hưởng đến mơ
hình và ngoài ra giúp việc đưa ra các quyết định đối với những vấn đề phức tạp.
Các giải pháp về GIS thường được chia ra làm hai nhóm chính:
• Giải quyết các bài toán phức tạp liên quan đến mạng giao thơng:
Các bài tốn như: tìm kiếm đường đi tối ưu, điều phối lộ trình giao thơng… thường
được áp dụng trên các hệ thống máy tính lớn, có cấu hình mạnh.
• Hiển thị và tìm kiếm các thơng tin trên bản đồ:
Đây là dạng ứng dụng bản đồ điện tử, cung cấp các khả năng cho phép người sử
dụng xem bản đồ và tìm kiếm một số thơng tin cần thiết, thường được áp dụng trên các
máy tính thơng thường và nhỏ.
Với mỗi nhóm trên có rất nhiều ứng dụng GIS. Từ những bài tốn tìm đường như:
tìm đường trong thành phố, tìm đường đi của xe buýt cho đến các vấn đề quản lý rừng,
quản lý khai thác khoáng sản, dự báo thời tiết…
Nhu cầu mở rộng, đưa GIS lên mạng:

11


GIS đã được ứng dụng từ vài thập niên trước đây, nhưng dường như GIS vẫn chưa
đến được với mọi người. Lý do là, trước nay các ứng dụng GIS hầu hết chạy trên
máy tính đơn. Với những máy tính này cần thiết phải cài đặt các module xử lý GIS
(dưới dạng các file .dll, hay các ActiveX…), điều này cản trở khả năng ứng dụng GIS
rộng rãi. Ví dụ: Khi một người cần biết tuyến xe buýt để di chuyển thì ngoại trừ khi anh
ta trang bị một Pocket PC cài ứng dụng tìm đường xe bt cịn khơng anh phải trở về nhà
hay đến cơ quan tìm đến đúng máy tính được cài ứng dụng này để tìm kiếm thơng tin.
Từ ví dụ này cho thấy với các ứng dụng GIS mang tính cộng đồng hoặc khi cần có
thể sử dụng bất kể nơi đâu, thì mơ hình ứng dụng chạy trên máy đơn là không đáp ứng
được. Như chúng ta đã biết, Internet ra đời và đã thu ngắn khoảng cách giữa mọi
người, và cho phép tìm kiếm thơng tin mọi lúc, mọi nơi. Mơ hình ứng dụng GIS chạy
trên nền Internet cho phép mọi người dùng bất kì cơng cụ nào (máy PC, máy laptop,
mobile, Pocket PC…) có thể truy cập Internet tìm kiếm được những thơng tin mình
cần.
Để đưa bản đồ lên website người ta thường sử dụng WebGIS, AJAX…, trong đó
AJAX là một tổ hợp công nghệ, là trung tâm của thế hệ web 2.0 và được rất nhiều
chuyên gia sử dụng để thiết kế website, đặc biệt là các website liên quan đến bản đồ.
Trên thế giới đã có nhiều ứng dụng GIS được đưa lên Internet như, phổ biến như:
+ Yahoo maps (): là một bản đồ miễn phí của Yahoo hỗ trợ
tìm kiếm thơng tin về địa điểm, đường đi…
+ Bing maps ( Được phát triển từ Live Search Maps,
Windows Live Maps, Windows Live Local, và MSN Virtual Earth, là một bản đồ dịch
vụ web được cung cấp như là một phần của bộ phần mềm cơng cụ tìm kiếm Bing của
Microsoft và được hỗ trợ bởi Bing Maps dành cho khối doanh nghiệp.
U
39T

T
9
3
U

+ Google Maps (): là một bản đồ miễn phí của Google hỗ
trợ tìm kiếm thơng tin về địa điểm, đường đi…
Ở Việt Nam cũng đã có một số website về bản đồ trực tuyến, tiêu biểu là:
+ Việt bản đồ ( hỗ trợ tìm kiếm thơng tin về
đường đi, địa điểm…
+ Địa điểm (): hỗ trợ tìm kiếm thông tin về đường đi, địa
điểm…
+ Bản đồ số (): hỗ trợ tìm kiếm thơng tin về địa điểm, đường
phố…
Những website này đều dễ sử dụng và cho phép người dùng truy cập một cách dễ
dàng để xem mọi thơng tin có trên bản đồ. Tuy nhiên, đó hầu hết là những website với
những thông tin chung cho nhiều lĩnh vực như: tìm đường, tìm địa điểm như: nhà
hàng, khách sạn, trường học, bệnh viện, sân vận động, công viên v.v…, không đi sâu
về một lĩnh vực nào cụ thể, và đương nhiên đi sâu về lĩnh vực khai thác khoáng sản là
12


chưa có. Hiện ở Việt Nam chưa có website nào về quản lý bản đồ trực tuyến các mỏ
khai thác khống sản.
Việc có một website về bản đồ thể hiện các mỏ khai thác khoáng sản ở Việt Nam
là rất cần thiết đối với công tác quản lý khai thác khoáng sản của TKV và một số đơn
vị quản lý gián tiếp khác. Đây sẽ là tiền đề quan trọng cho việc xây dựng cơ sở dữ liệu
bản đồ trực tuyến cho ngành khai thác khoáng sản ở Việt Nam. Vì vậy mà tác giả đã
chọn đề tài “Nghiên cứu ứng dụng công nghệ AJAX và Google Maps API để thiết kế
website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở Việt Nam” làm đề

tài cho luận văn tốt nghiệp cao học của mình.

2. Mục đích nghiên cứu
◊ Lựa chọn bản đồ nền phù hợp cho website quản lý bản đồ trực tuyến các
mỏ khai thác khống sản ở Việt Nam;
◊ Lựa chọn cơng nghệ (kỹ thuật) thiết kế website phù hợp với quản lý bản đồ
trực tuyến;

◊ Thiết kế website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở
Việt Nam.

3. Nhiệm vụ nghiên cứu
◊ Nghiên cứu lý thuyết về AJAX;
◊ Nghiên cứu lý thuyết về Google Maps;
◊ Xây dựng website quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản ở
Việt Nam;

◊ Cài đặt và thử nghiệm.
4. Phạm vi nghiên cứu
Trên phạm vi cả nước hiện nay có rất nhiều mỏ khai thác khoáng sản khác nhau và
trực thuộc nhiều các cấp quản lý khác nhau như: Tập đoàn, Tổng Cơng ty, Cơng ty,
các Sở v.v…Trong số đó có Tập đồn Cơng nghiệp Than - Khống sản Việt Nam
(TKV). Hiện TKV đang quản lý một lượng lớn các mỏ khai thác than vùng Quảng
Ninh và một số mỏ khai thác quặng trên khắp cả nước. Trong khuôn khổ của luận văn,
tác giả chỉ đề cập đến việc quản lý bản đồ trực tuyến các mỏ khai thác khoáng sản trực
thuộc TKVchứ chưa đề cập đến các mỏ thuộc các cấp quản lý khác.

5. Bố cục của luận văn
Bố cục của luận văn bao gồm 3 chương:
Chương 1: Tổng quan về AJAX

Trong chương này trình bày các khái niệm, các đối tượng, các phương thức, các
thuộc tính, các thành phần của AJAX; các ưu nhược điểm khi thiết kế website bằng
AJAX cũng như giới thiệu một số website thiết kế bằng AJAX nổi tiếng trên thế giới.
13


AJAX không phải là một công nghệ mà là một tổ hợp công nghệ cho phép thực thi các
ứng dụng web với tốc độ cao, đặc biệt là các website về bản đồ trực tuyến.
Chương 2: Tổng quan về Google Maps
Trong chương này trình bày các khái niệm, các đối tượng, các phương thức, các
thuộc tính…đặc biệt là các hàm API của Google Maps; các ưu nhược điểm của Google
Maps. Với sự hỗ trợ đa dạng các hàm API mà Google Maps đã trở thành dịch vụ cung
cấp bản đồ trực tuyến lớn nhất hiện nay cho mọi đối tượng người dùng.
Chương 3: Ứng dụng AJAX và Google Maps API xây dựng website quản lý
bản đồ trực tuyến các mỏ khai thác khống sản ở Việt Nam
Trong chương này trình bày bài toán quản lý bản đồ trực tuyến các mỏ khai thác
khống sản ở Việt Nam; phân tích các chức năng cần có của website; đưa bản đồ nền
Google Maps vào website; thiết kế cơ sở dữ liệu, thiết kế giao diện, xây dựng các
module bằng công nghệ AJAX cho website; cài đặt và thử nghiệm website.
Cuối cùng là những đánh giá, kết luận chung về các kết quả của luận văn, những
hạn chế cũng như phương hướng phát triển cho luận văn trong tương lai.

6. Phương pháp nghiên cứu
Để xây dựng được website theo ý muốn, trước hết phải tìm hiểu về các kỹ thuật
đưa bản đồ lên website; phân tích các chức năng cần có của một hệ thống thông tin
bản đồ; lựa chọn công nghệ thiết kế website phù hợp cho quản lý bản đồ - công nghệ
AJAX; lựa chọn bản đồ nền phù hợp với website cần thiết kế - Google Maps. Nghiên
cứu lý thuyết về AJAX và Google Maps, đặc biệt là các hàm API mà Google Maps hỗ
trợ, trên cơ sở đó để quyết định xem tận dụng được hàm API nào, hàm nào cần phải
viết mới. Bên cạnh đó cũng cần nghiên cứu lựa chọn mơ hình thiết kế website phù

hợp. Cuối cùng là tiến hành thiết kế website quản lý bản đồ trực tuyến các mỏ khai
thác khoáng sản ở Việt Nam.

14


CHƯƠNG 1: TỔNG QUAN VỀ AJAX
1.1. Khái niệm về AJAX
 AJAX là gì?
Khái niệm AJAX xuất hiện vào khoảng năm 2005, như là một kỹ thuật mới cho
ứng dụng web 2.0.
Theo [9], AJAX là kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các
nhà phát triển web đánh giá rất cao là:
 Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang;
 Phân tách và làm việc với XML.
AJAX là sự phối hợp một loạt các công nghệ đang thu hút sự quan tâm của những
người u thích lập trình web trong thời gian gần đây, đó là:
 Trình bày trang web dựa trên XHTML và CSS – các chuẩn W3C;
 Biểu diễn động và tương tác sử dụng DOM – chuẩn W3C;
 Trao đổi và xử lý dữ liệu dùng XML và XSLT – các chuẩn W3C;
 Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest – chuẩn W3C;

 Dùng JavaScript để liên kết mọi thứ lại với nhau. JavaScript ở đây là
ECMAScript - chuẩn của ECMA, không phải là JScript của Microsoft.
 Mô hình hoạt động của AJAX:

Hình 1.1: Ứng dụng web truyền thống/AJAX

15

Hình 1.2: Mơ hình cổ điển

Hình 1.3: Mơ hình AJAX
Rõ ràng điểm khác biệt lớn nhất giữa hai mơ hình là thay vì phải tải cả trang web
thì với AJAX trình duyệt phía người dùng chỉ cần tải về phần của trang web mà người
dùng muốn thay đổi. Điều này giúp cho ứng dụng web phản hồi nhanh hơn, thông
minh hơn.
Ngồi ra, điểm đặc biệt quan trọng trong cơng nghệ AJAX nằm ở chữ A
(Asynchronous) – không đồng bộ, tức là người dùng cứ gửi yêu cầu của mình tới
server và quay lại với cơng việc của mình mà khơng cần chờ trả lời. Khi nào server xử
lý xong yêu cầu của phía người dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận
lấy” để thể hiện những thay đổi cần thiết. 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 và nhận 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.
16


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. Chúng ta sẽ xem xét cụ thể
các thành phần cấu thành AJAX, nguyên lý hoạt động và việc sử dụng Javascript kết
nối chúng trong những phần tiếp theo.
Hiện trên thế giới có rất nhiều website nổi tiếng sử dụng công nghệ AJAX như:
Google Maps, Gmail, Yahoo Mail, Windows Live Mail…Các website này đều chạy ổn
định và có tốc độ tải trang khá nhanh. Ở Việt Nam, hầu hết các website về bản đồ trực

tuyến như diadiem.vn, vietmap.com hay vietbando.com đều sử dụng công nghệ này.

1.2. Ưu nhược điểm của AJAX
1.2.1. Ưu điểm
 Giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với
người dùng;
 Sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng;
 Nhờ tính phổ biến của nó nên đã khuyến khích việc phát triển các khn
mẫu, điều này sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước đó;
 Được hỗ trợ trong các trình duyệt web phổ biến hiện nay;
 Hỗ trợ rất tốt cho các trang web về bản đồ trực tuyến.
1.2.2. Nhược điểm
 Bạn không thể bookmark nó vào favourite trên trình duyệt hay gửi link đến
cho bạn bè, vì tất cả q trình nó thực hiện ngầm và không hiển thị trên
address;
 Không thể hiển thị nội dung trên các trang tìm kiếm vì các trang tìm kiếm
hiện nay vẫn chưa hỗ trợ tìm vì rất khó tìm và gần như khơng thể tìm được;
 Khơng thể sử dụng nút back vì back cũng là chính nó;
 Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiện
Javascript nên AJAX không thể chạy, hay trong một vài host, không hỗ trợ
vào sâu cấu hình server nên hay bị lỗi "Access denied".
Mặc dù vẫn cịn những hạn chế nói trên thì AJAX vẫn đã và đang được các lập
trình viên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó. Ví dụ như vừa update
thơng tin trên web, vừa thay đổi trên thanh address để có thể sử dụng một số chức
năng liên quan tới địa chỉ tuyệt đối này.

1.3. Giới thiệu một số cơng nghệ chính trong AJAX
AJAX là một tập hợp các công nghệ bổ sung lẫn nhau, trong đó, JavaScript có vai
trị là 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 DOM, tạo và tổ chức biểu diễn dữ

17


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. 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.
1.3.1. HTML
Theo [5,9], HTML (HyperText Markup Language) - là một ngôn ngữ đánh dấu
được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thơng tin được trình bày
trên WWW. HTML được định nghĩa như là một ứng dụng đơn giản của SGML, vốn
được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML giờ đây
đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy
trì. Tuy nhiên, HTML hiện khơng cịn được phát triển tiếp, người ta đã thay thế nó
bằng XHTML.
HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào
mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương
trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường
được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần
HTML của chúng sẽ được hiển thị thơng qua một trình duyệt web, một loại phần mềm
trực quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng, phần mềm
đọc E-mail, hay một thiết bị không dây như một chiếc điện thoại di động.
HTML động hay DHTML (Dynamic HTML) là một thể hiện của việc tạo ra
một trang web bằng cách kết hợp các thành phần: HTML, ngôn ngữ kịch bản máy
khách (như là Javascript), và ngơn ngữ định dạng trình diễn Cascading Style Sheets
(CSS) và Document Object Model (DOM).
XHTML (Extensible HyperText Markup Language) - là một ngơn ngữ đánh dấu
có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn. XHTML 1.0 được
W3C đưa ra vào ngày 26 tháng 2 năm 2000. Về phương diện kỹ thuật, XHTML là một

họ các kiểu tài liệu hiện tại và tương lai cùng các mô đun nhằm tái tạo lại, mở rộng,
thâu nạp HTML, tái cấu trúc lại dưới dạng XML. Các dạng tài liệu thuộc họ XHTML
tất cả đều dựa trên XML, và được thiết kế để làm việc tuyệt đối với các trình đại diện
người dùng hiểu XML. XHTML là thế hệ kế tiếp HTML, và đã có một loại các đặc tả
được phát triển cho XHTML.
1.3.2. CSS
Theo [5,9], CSS là một phần khơng thể thiếu trong thiết kế web, nó được dùng rất
nhiều trong các ứng dụng web truyền thống cũng như trong AJAX. Một CSS đư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. Hơn nữa, cho các thành phần định dạng trực quan như
màu sắc, lề, hình nền, tính trong suốt, kích cỡ, style sheet có thể xác định cách mà các
18


phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho
phép các hiệu ứng khá mạnh mẽ.
Trong ứng dụng web truyền thống, CSS cung cấp một cách hiệu quả để xác định
cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa. Với
AJAX, CSS 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:
 Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet);
 Định nghĩa trong một trang web (Internal Style Sheet);
 Đị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): Đặc tả các phần tử được định dạng và bố
trí;
 Phần khai báo (style declaration): Khai báo các thuộc tính định dạng sẽ
được áp dụng.

Giả sử 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 đỏ, ta khai báo thuộc tính CSS như sau:
h1 {color: red}
 Các ưu điểm của CSS:
 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 quy đị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;
 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ó 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 quy định ở trong chỉ một thẻ HTML, được quy định trong một trang
web hoặc ở trong một file CSS bên ngoài;
 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 ta 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 quy định trong một thẻ HTML cụ thể);
19


• Internal Style (style được quy định trong phần <HEAD> của một trang
HTML);
• External Style (style được quy định trong file CSS ngồi);
• Browser Default (thiết lập mặc định của trình duyệt).
1.3.4. DOM
 Khái niệm:

Theo [5,9], DOM giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ
cho cơ chế của JavaScript. Khi sử dụng DOM, cấu trúc của tài liệu có thể được phân rã
theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để viết
một ứng dụng AJAX. Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp
các trang HTML theo một luồng từ server.
Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra
bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của
cây là thẻ <HTML> để biểu diễn tài liệu; thẻ <BODY> biểu diễn phần thân của tài
liệu, là gốc của phần hiển thị của tài liệu. Trong phần thân của tài liệu, có các bảng,
paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa.
 Tìm kiếm một DOM Node:
Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử
để thay đổi. Trước hết cần bắt đầu tham chiếu qua nút gốc (root node), nút này thể
hiện qua biến toàn cục document. Mỗi nút trong DOM là một nút con (hoặc nút con
cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức
tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn.
 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 đó. Các phương thức chuẩn để tạo nút mới
là: document.createElement () và document.createTextNode ().
Phương thức createElement () có thể được dùng để tạo ra bất kỳ phần tử HTML
nào, tham số là kiểu của loại thẻ HTML.
var childEl=document.createElement (”div”);
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.
var txtNode=document.createTextNode (”some text”);
Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML. Chúng khơng có
các style để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn.
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.

Cú pháp: el.appendChild (childEl);
20


Ba phương thức createElement (), createTextNode (), và appendChild () cho
phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu.
 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 của các phần tử và tạo
định dạng lại cho cấu trúc đã được định nghĩa trong CSS. Mỗi phần tử trong trang web
có thể có nhiều giao diện trực quan có thể được áp đặt qua DOM như: vị trí, chiều dài
và rộng, màu sắc, canh lề và đường viền. Các trình duyệt ngày nay đều cung cấp các
ràng buộc JavaScript cho phép thay đổi giao diện mức thấp và áp đặt các định dạng
một cách nhất quán và dễ dàng với các lớp CSS - thuộc tính className.
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, như trong đoạn mã sau:
function addListItemUsingInnerHTML (el,text){
el.innerHTML+=”<div class=’programmed’>”+text+”</div>”;
}
1.3.5. XML
 Các đặc điểm của XML:
 XML tương thích với SGML;
 Dễ dàng viết được những chương trình xử lý tài liệu XML;
 Tài liệu XML dễ đọc và có tính hợp lý cao;
 XML được xây dựng với sự giảm thiểu những thuộc tính tùy chọn;
 XML dễ dàng được sử dụng trên Internet;
 XML hỗ trợ nhiều ứng dụng;
 Khơng đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML.
 Cấu trúc một tài liệu XML:
Tài liệu XML chỉ chứa đựng dữ liệu và cách lưu trữ dữ liệu mà không hề đề cập

tới cách thức trình bày dữ liệu. Một tài liệu XML sẽ chứa những đặc tả về cấu trúc dữ
liệu. Mỗi cấu trúc gồm nhiều phần tử (element), mỗi thành phần được bắt đầu với một
thẻ bắt đầu (Start–tag) và kết thúc với một thẻ kết thúc (End–tag). Giữa Start–tag và
End–tag là nội dung của phần tử này. Nội dung có thể bao gồm dữ liệu văn bản hay có
thể là một phần tử khác. Dưới đây là ví dụ về một file XML:
<?xmlversion=”1.0″?>
<Catalog>
<Product>
<ProductID>F10</ProductID>
<ProductName>Shymano
Calcutta
<ListPrice>47.76</ListPrice>
21

</ProductName>


</Product>
<Product>
<ProductID>F20</ProductID>
<ProductName>Bantam
<ListPrice>49.99</ListPrice>
</Product>
</Catalog>

Lexica</ProductName>

1.3.5. XMLHttpRequest
 Khái niệm:
Theo [5,9], XMLHttpRequest là đối tượng cho request của server khơng đồng bộ

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. Giải pháp
đầu tiên để giải quyết vấn đề này là dùng IFrame. Cho đến gần đây, đã được đưa ra
như là một giải pháp mạnh mẽ và hiệu quả.
21T

Mục đích chủ yếu của tối tượng XMLHttpRequest là cho phép JavaScript chỉnh
sửa lại các yêu cầu HTTP và chuyển chúng tới server. Những ứng dụng web truyền
thông thường hoạt động đồng bộ, nghĩa là tương ứng với một sự kiện như một submit
hoặc một siêu liên kết a href được click thì tồn bộ kết quả sẽ được trả ra một trang
mới gồm cả các thành phần cũ và mới. Nhưng trên tất cả là mọi thành phần đều phải
load lại một lần nữa.
XMLHttpRequest giải quyết khâu này bằng cách hoạt động ngầm xử lý request tới
server và trả về kết quả trong lúc đó người dùng vẫn có thể thấy được trang web đang
đọc. Khi có được kết quả , javascript có chức năng thay đổi thành phần người dùng đã
tương tác để đưa ra một kết quả mới. Các khâu hoạt động trên hồn tồn khơng đồng
bộ với một sự kiện. Không những đợi response trả về từ trang chủ người dùng cịn có
thể tiếp tục gửi các request khác tới trang chủ. Tất cả kết quả sẽ được JS thay đổi cục
bộ thành phần của trang web thông qua các hàm DOM bởi các kết quả được phân tích
bởi bộ hàm XML DOM. Cụ thể như sau:
// Khởi tạo một đối tượng XMLHttpRequest
Var request = new XMLHttpRequest ();
// XMLHttpRequest là một đối tượng
duyệt như Mozilla, Opera, Chrome v.v…

trong các trình

Nhưng trong IE nó lại là một ActiveX. Do vậy ta cần kiểm tra xem việc khởi tạo
có thành cơng khơng để chắc chắn việc tạo một XMLHttpRequest:
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest ();

}
22


else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject
("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = showContents;
xhr.open ("GET", url, true);
xhr.send (null);
}
else {
alert ("Lỗi request khơng được khởi tạo, có thể
trình duyệt của bạn không hỗ trợ tác vụ này.");
}
 Các phương thức của đối tượng XMLHttpRequest:
Bảng 1.1 – Các phương thức của đối tượng XMLHttpRequest
Phương thức
Abort ()
getAllResponseHeaders ()
getresponseHeader (x)
Open (method , url , a)

Ý nghĩa

Dừng yêu cầu hiện tại
Trả về header dạng chuỗi
Trả về header x dạng chuỗi
Thể hiện phương thức request , url đích. a nhận true
hoặc false tương ứng với đồng bộ hay khơng đồng bộ.
Send (content)
Gửi u cầu có thể kèm theo dữ liệu POST
setRequestHeader (x,y)
Thiết lập hai tham số x = y gắn vào header để gửi đi
cùng với request.
 Các thuộc tính của đối tượng XMLHttpRequest:
Bảng 1.2: Các thuộc tính của đối tượng XMLHttpRequest
Ý nghĩa

Thuộc tính
Onreadystatechange

readyState

Dùng để đáp ứng một cơng việc nào đó khi thuộc
tính ReadyState thay đổi
Nhận 5 giá trị tương ứng với 5 trạng thái:
0 : Chưa được khởi tạo ( Uninitialized )
1 : Đang được nạp ( Loading )
23