Tim hieu ve Ajax

Tìm hiểu về AJAX GVHD: Đào Phan Vũ
SVTH : Trần Minh Hoàng
1
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
MỤC LỤC
LỜI MỞ ĐẦU 3
CHƯƠNG 1: TỔNG QUAN VỀ AJAX 4
1.Giới thiệu AJAX: 4
1.1 Khái niệm: 4
1.2 Vai trò của Ajax: 5
1.3 Ưu nhược điểm của Ajax 6
2. Phương thức hoạt động của Ajax 7
2.1 Mô hình ứng dụng web truyền thống và có sử dụng công nghệ AJAX: 7
2.2 Hoạt động của công nghệ AJAX: 8
CHƯƠNG 2: KỸ THUẬT LẬP TRÌNH AJAX 11
1.Kỹ thuật lập trình của một số công nghệ trong AJAX 11
1.1Lập trình CSS trong Ajax 11
1.2 Lập trình DOM trong AJAX 14
1.3 Công nghệ XML trong AJAX 19
1.4 Đối tượng XMLHttpRequest 24
1.5 Javascript 32
2. Công việc gửi Request và Response của server trong AJAX 33
2.1 Xử lý HTTP Request 33
2.2 Xử lý Server Response 35
2.Ví dụ tổng hợp: 38
4. Vấn đề bảo mật 42
CHƯƠNG 3: ỨNG DỤNG CỦA AJAX 44
1.Một số ứng dụng của Ajax 44
2.Giới thiệu một số hệ thống ứng dụng Ajax 45
2.1 Fast dictionary: 45
2.2 Mobile phone catalog: 46

2.3 Google maps 47
2.4 Gmail 49
KẾT LUẬN
SVTH : Trần Minh Hoàng
2
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
LỜI MỞ ĐẦU
Trong xã hội công nghệ tiên tiến ngày nay, mạng, internet là nguồn tài
nguyên không thể thiếu trong cuộc sống. Trong kinh doanh, các doanh nghiệp
nhờ vào internet, website để giới thiệu, quảng bá sản phẩm, bán hàng… Học
sinh, sinh viên thì vào mạng để học tập, tìm tài liệu, giải trí, chát… Internet thật
sự phổ biến và phát triển mạnh khi website ra đời. Từ khi website ra đời đã giúp
con người có thêm nguồn thông tin, giải trí lớn tiện ích. Các ứng dụng website
cũng dần phổ biến đặc biệt là dịch vụ web. Ban đầu chỉ là web tĩnh rồi đến web
động, càng ngày càng được nhiều người yêu thích.
Đặc biệt sự ra đời của thế hệ web 2.0 đã đem lại cho giới công nghệ nói
chung và các nhà làm web nói riêng nhiều tính năng ưu việt, và các trang web
hiện nay cũng phong phú và đa dạng hơn, cung cấp cho con người nhiều thông
tin giải trí yêu thích hơn. Và đóng vai trò then chốt trong giai đoạn thứ hai này
của web là công nghệ AJAX, với công nghệ này đã tạo bước đột phá mới mẻ cho
website, công nghệ AJAX có thể nói là “cứu tinh” của ứng dụng web, từ khi
AJAX xuất hiện và được sử dụng trong website, thế hệ web đã bước sang 1 thời
kỳ mới. Vậy công nghệ AJAX là gì? Những cống hiến to lớn của nó trong thiết
kế và lập trình web là gì? Đây là vấn đề em muốn tìm hiểu, vì vậy em đã chọn đề
tài: “Tìm hiểu về AJAX” Bài viết này của em gồm có 3 chương:
1. Tổng quan về AJAX.
2. Kỹ thuật lập trình AJAX.
3. Ứng dụng của AJAX.
Mặc dù có nhiều cố gắng nhưng bài viết vẫn không thể tránh được có
nhiều thiếu sót. Em hi vọng thầy cô có thể đóng góp ý kiến để đề tài của em

hoàn thiện hơn.
Cuối cùng em xin chân thành cảm ơn thầy Đào Phan Vũ đã giúp đỡ
em hoàn thành đề án này.
Em xin chân thành cảm ơn!
Sinh viên thực hiện
Trần Minh Hoàng
SVTH : Trần Minh Hoàng
3
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
CHƯƠNG 1: TỔNG QUAN VỀ AJAX.
1.Giới thiệu AJAX:
Nguồn gốc của AJAX được bắt đầu từ khi Microsoft phát triển công nghệ
Remote Scripting vào năm 1998. Tuy nhiên, phương pháp tải không đồng bộ nội
dung trên một trang web đã xuất hiện trong thành tố IFRAME của Internet
Explorer 3 năm 1996 và thành tố LAYER của Netscape 4.0 năm 1997. Khi giới
thiệu Internet Explorer 4.0, Microsoft đã sử dụng mô hình đối tượng tài liệu
DOM khác biệt. Đến năm 2000, Netscape hoàn toàn đánh mất thị trường trình
duyệt vào tay hãng phần mềm của Bill Gates và thành tố LAYER cũng không
còn được các chuyên gia phát triển web chú ý tới. Phải vài năm sau, AJAX mới
lại lôi kéo được sự quan tâm của giới công nghệ và trở thành công cụ cải tiến
giao diện người dùng cho ứng dụng web. Thuật ngữ này cũng chỉ mới xuất hiện
vào tháng 2/2005, trong bài viết nổi tiếng của Jesse James Garrett trên trang
Adaptive Path. Từ đó, AJAX trở thành trung tâm trong mọi câu chuyện liên quan
đến thế hệ Web 2.0.
1.1 Khái niệm:
AJAX được định nghĩa là không đồng bộ giữa Javascript và XML, nó là viết
tắt của từ Asynchronous JavaScript and XML (JavaScript và XML không đồng
bộ). Không đồng bộ có nghĩa là với bất kỳ số lượng yêu cầu và trả lời như thế
nào đều có thể được sắp đặt cùng một lúc. Các mã sau không phải chờ để cho các
mã trước kết thúc mới bắt đầu.

AJAX là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ
dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.
AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công
nghệ với nhau. Là một nhóm các công nghệ phát triển web được sử dụng để tạo
các ứng dụng web động hay các ứng dụng giàu tính Internet, đang thu hút sự
quan tâm của giới công nghệ trong thời gian gần đây. Các công nghệ đó là:

• HTML và CSS đóng vai hiển thị dữ liệu
• Mô hình DOM trình bày thông tin động
• XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ
web
• XML là định dạng chủ yếu cho dữ liệu truyền
• Javacript được dùng để lắp ráp chúng lại với nhau.
Đặc biệt là sự kết hợp của 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
SVTH : Trần Minh Hoàng
4
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
Và các ứng dụng Ajax thì xoay quanh một tính năng có tên là
XMLHttpRequest.
1.2 Vai trò của Ajax:
Như đã nói ở trên AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. Mỗi
công nghệ trong đó đều có một vai trò, tính năng riêng. Như 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 -
DOM, 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.
Công nghệ AJAX có khả năng lấy dữ liệu mới từ máy chủ mà không cần dỡ

các trang hiện tại. Nó không nhất thiết phải làm với bất kỳ cơ chế vận chuyển đặc
biệt hoặc yêu cầu cụ thể hoặc bất kỳ định dạng phản ứng nào mà công nghệ
DOM trong AJAX cho phép, một khi dữ liệu mới được lấy ra, nó có thể được sử
dụng để chèn dữ liệu vào trang cũ.
Cụ thể ta có:
• XHTML hay HTML và Cascading Style Sheets (CSS) cung cấp các tiêu
chuẩn để thể hiện nội dung trang Web lên trình duyệt người dùng.
• Document Object Model (DOM) cung cấp cấu trúc cho phép hiển thị động
nội dung và các tương tác liên quan. DOM mở ra nhiều cách thức mạnh cho
người dùng khi muốn truy cập và thao tác với đối tượng nằm trong một văn bản
bất kỳ.
• XML và XSLT cung cấp kiểu định dạng cho dữ liệu, để dữ liệu có thể
được thao tác, truyền tải hoặc trao đổi giữa máy chủ (server) và máy khách
(client).
• XML HTTP Request: Điểm bất cập lớn nhất trong xây dựng ứng dụng
Web là mỗi lần
một webpage được tải về trình duyệt của người dùng, kết nối server liên quan sẽ
bị cắt. Hơn nữa, đường dẫn bên trong trang còn đòi hỏi phải thiết lập một kết nối
khác với server và tải về toàn bộ trang cho dù người dùng chỉ muốn mở rộng một
đường link đơn giản. XML HTTP Request cho phép truy vấn dữ liệu không đồng
bộ và đảm bảo các trang web không bị load trở lại khi thay đổi trong yêu cầu
người dùng ở mức nhỏ nhất.
• JavaScript (JS): là ngôn ngữ kịch bản hợp nhất các đối tượng để hoạt động
với nhau một cách hiệu quả, do đó giữ vai trò đáng kể trong ứng dụng web.
SVTH : Trần Minh Hoàng
5
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
Người ta thường nói chuyện gì cũng có 2 mặt của nó, và công nghệ AJAX
cũng vậy tuy là rất tiện ích, giúp cho chúng ta rất nhiều trong việc làm web và
các ứng dụng web song nó vẫn còn có mặt hạn chế đến bây giờ vẫn đang được

tìm cách để khắc phục.
1.3 Ưu nhược điểm của Ajax.
1.3.1 Ưu điểm của Ajax
AJAX làm cho các ứng dụng web nhanh hơn so với các ứng dụng máy tính để
bàn.
Ví dụ: một tìm kiếm Google
Đầu tiên bạn nhập vào một số văn bản trong hộp tìm kiếm.
Sau đó nhấn nút tìm kiếm.
Trang được làm mới và bạn sẽ có được kết quả cần tìm.
Toàn bộ quá trình này có thể mất một vài giây đến vài phút tùy thuộc vào
lượng dữ liệu bạn đã yêu cầu, tải về máy chủ web, kết nối internet của bạn và
như vậy.Nó là một quá trình khá nhanh, nhưng nó có thể được nhanh hơn với
Ajax.
Với công nghệ Ajax, khi bạn nhập cùng một văn bản vào hộp tìm kiếm, tuy nhiên
giờ đây kết quả của bạn được trả lại ngay lập tức khi bạn đang gõ.
Đó là sức mạnh của Ajax, dữ liệu được trả về ngay lập tức mà không cần phải
bấm vào trình và chờ đợi cho màn hình làm mới. Vì vậy, đó là kết quả cuối cùng
của một AJAX kích hoạt trang web, dữ liệu ngay lập tức được trả về dựa trên các
chữ cái bạn đang đánh máy (như trong ví dụ Ajax tìm kiếm Google).
AJAX cho phép quản trị web tạo ra tốt hơn, nhanh hơn và thân thiện với người
dùng các ứng dụng web với cơ sở của nó của Javascript và HTTP.
Toàn bộ trang này không nạp lại. Trình Ajax nhanh hơn quá trình hình thức
trình thông thường.
Sử dụng công nghệ ajax là không giới hạn hình thức dữ liệu. Nó được sử
dụng rộng rãi trong thiết kế menu động, thu thập dữ liệu để phân tích stat web,
hoặc thậm chí tải lại toàn bộ trang tự động.
1.3.2 Nhược điểm của Ajax:
AJAX có thể góp phần tạo nên một thế hệ mới cho ứng dụng web. Tuy nhiên,
nó cũng là một công nghệ "nguy hiểm" khi gây ra không ít rắc rối về giao diện
người dùng.Đó là:

Khi một số người dùng tắt JavaScript của trình duyệt của họ. Thì trong trường
hợp này ajax không làm việc.
SVTH : Trần Minh Hoàng
6
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
Dữ liệu tự động nạp vào lịch sử web là không có sẵn, tức là bạn không thể tải
lại trang bằng cách sử dụng nút quay lại ( back ) của trình duyệt. Bởi chức năng
này không hoạt động ăn khớp với Javascript. Vì thế chỉ một sơ xuất nhỏ là dữ
liệu trên trang đã bị thay đổi và khó có thể khôi phục lại được. Đây là một trong
những nguyên nhân chính khiến nhiều người không ủng hộ ứng dụng Javascript.
Người dùng không thể lưu lại địa chỉ web vào thư mục Favorite (Bookmark)
để xem lại về sau. Do áp dụng lớp trung gian để giao dịch, các ứng dụng Ajax
không có một địa chỉ cố định cho từng nội dung. Khiếm khuyết này làm cho
Ajax dễ "mất điểm" trong mắt người dùng.
Mặc dù công nghệ AJAX có nhiều khuyết điểm như trên nhưng nó vẫn được
sử dụng nhiều và rộng rãi trong các ứng dụng web hiện này như trong Google
map, gmail… Vậy nó hoạt động như thế nào bây giờ chúng ta cùng tìm hiểu
phương thức hoạt động của nó.
2. Phương thức hoạt động của Ajax.
Trước khi tìm hiểu các công nghệ trong AJAX hoạt động như thế nào, chúng
ta cùng xem coi mô hình web truyền thống và mô hình web có sử dụng AJAX
khác nhau như thế nào để từ đó tìm ra ưu việt trong hoạt động của công nghệ
AJAX.
2.1 Mô hình ứng dụng web truyền thống và có sử dụng công nghệ AJAX:
• Ở các ứng dụng web truyền thống, khi người dùng có một 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ũ. Qui
trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người
dùng sau khi nhấn một nút “Submit” trên trang web phải chờ cho đến khi server

xử lý xong mới có thể tiếp tục công việc.
• Mô hình web có sử dụng công nghệ Ajax có nhiều điểm khác biệt và tiện
ích hơn nhiều so với mô hình truyền thống .
Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp giữa máy client và
máy chủ sever. 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ị.
SVTH : Trần Minh Hoàng
7
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
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.
Rõ ràng mô hình web có sử dụng công nghệ Ajax tiện ích hơn nhiều, 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.
Ứng dụng web truyền thống Ứng dụng AJAX
2.2 Hoạt động của công nghệ AJAX:
Để AJAX có thể làm việc được, chúng ta phải chạy một công nghệ bên phía
máy chủ như ASP.NET hay PHP.
SVTH : Trần Minh Hoàng
8
Tìm hiểu về AJAX GVHD: Đào Phan Vũ

Ban đầu JavaScript sẽ gửi dữ liệu đến một URL theo cùng một cách thức
điển hình của web, HTML sẽ gửi dữ liệu (thông qua một tiêu chuẩn yêu cầu là
GET hoặc POST). Sự khác biệt chủ yếu ở đây là JavaScript có thể gửi các dữ
liệu mà không cần phải rời khỏi trang (nó chỉ đơn giản là xảy ra đằng sau trình
duyệt). Máy chủ sau quá trình xử lý, dữ liệu sẽ được gửi về dưới một tập tin
XML thay vì một trang web. Sau đó JavaScript lấy những gì nó cần từ tập tin
XML (vẫn xảy ra hoàn toàn phía sau) và sử dụng dữ liệu đó để thao tác với
DOM. Sau đó mới cho ra trang HTML trình bày trên máy client.
Bởi vì tất cả những điều trên xảy ra phía sau trình duyệt , nên từ quan điểm
của người dùng, chúng tương tác trực tiếp với trang web. Nhưng trên thực tế là
đã diễn ra trên máy chủ - hoặc là các trang web đã được giao tiếp với một máy
chủ bằng cách nào - là hoàn toàn ẩn với người sử dụng. Trong thực tế, điều này
cho phép một trang web có khả năng xử lý giống một chương trình máy tính bình
thường.
Giả sử ta có một ứng dụng web sau, trong ứng dụng này có chứa một trang
HTML tĩnh, hoặc một trang HTML được tạo ra bằng công nghệ JSP có chứa một
trang HTML yêu cầu phía máy chủ xác nhận ID Một thành phần của máy chủ
tên là ValidateServlet sẽ cung cấp các logic xác nhận ID đó có đúng không. Hình
sau mô tả chi tiết của sự tương tác của các công nghệ trong Ajax.
SVTH : Trần Minh Hoàng
9
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
1. Khi có một sự kiện xảy ra hay một yêu cầu bên máy Client.
2. Một đối tượng XMLHttpRequest sẽ được tạo ra và cấu hình.
3. Đối tượng XMLHttpRequest sẽ làm một cuộc gọi hay nói cách khác là
XMLHttpRequest gửi yêu cầu đến máy chủ.
4. Yêu cầu gửi đi được ValidateServlet bên máy chủ xử lý.
5. Sau khi ValidateServlet xử lý xong, sẽ trả tài liệu về dưới dạng XML.
6. Đối tượng XMLHttpRequest sẽ gọi hàm callback() để xử lý kết quả trả
về.

7. Sau khi xử lý xong file XML sẽ cho ra file HTML, và DOM cập nhật,
update lên trình duyệt cho client.
Chi tiết hoạt động của từng bước cụ thể ta sẽ xét trong chương 2, sau khi chúng
ta tìm hiểu chi tiết từng công nghệ trong AJAX. Trên đây chỉ là các bước hoạt
động và sự tương tác qua lại của các công nghệ trong AJAX.
SVTH : Trần Minh Hoàng
10
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
CHƯƠNG 2: KỸ THUẬT LẬP TRÌNH AJAX
AJAX kết hợp những ưu điểm của các công nghệ trong thiết kế và lập trình
web tạo nên những tính năng mạnh ưu việt trong ứng dụng web, các công nghệ
trong AJAX bổ sung lẫn nhau không thể tách rời, và để biết được AJAX thực sự
tốt như thế nào trước tiên chúng ta sẽ tìm hiểu các công nghệ trong AJAX và mối
liên hệ giữa chúng.
1. Kỹ thuật lập trình của một số công nghệ trong AJAX.
1.1Lập trình CSS trong Ajax.
1.1.1 Giới thiệu
Như đã giới thiệu ở trên, CSS được sử dụng để để thể hiện nội dung trang
Web lên trình duyệt người dùng, trong CSS nó có các tiêu chuẩn cụ thể để thể
hiện một trang web, với CSS trang web được trình bày đẹp hơn, vậy CSS là gì và
cách thể hiện nó như thế nào ?.
Css là viết tắt của 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, 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 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.
Hơn nữa với 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ỡ, mà stylesheet có thể xác định cách mà các 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.
Còn 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 hay thể hiện một trang web theo ba cách sau:
• 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.
Và với bất kỳ một cách thể hiện và bố trí nào cũng gồm có 2 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í.
SVTH : Trần Minh Hoàng
11
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
• Phần khai báo - style declaration: khai báo các thuộc tính định dạng sẽ
được áp dụng.
Ví dụ: Giả sử muốn tạo ra các dòng văn bản nằm trong thẻ <H1> trong
một tài liệu có màu đỏ.Thì ta khai báo thuộc tính trong CSS như sau:
h1 {color: red}
Hoặc h1 {color:#FF0000}.
Với việc sử dụng CSS trong việc thể hiện và bố trí trang web, nó sẽ đem cho
người dùng nhiều ưu điểm sau trong thiết kế web:
• 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
• 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 .
1.1.2 Cú pháp cơ bản của CSS:

Bất kỳ một file CSS nào cũng gồm ba thành phần sau:
Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
Thuộc tính (Property)
Giá trị (Value)
Cách thể hiện cú pháp CSS :
Selector {
Property1: Value1;
Property2: Value2;
}
Trong đó Selector có thể là các thẻ hoặc nhóm thẻ HTML, các lớp khai báo,
hay bằng định danh duy nhất của phần tử.
Để thể hiện được trang web ta phải chèn các đoạn mã CSS vào trang web, khi
đó trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, ta có ba
cách để chèn CSS vào trang web.
• Cách thứ nhất là External Style Sheet (sử dụng file CSS được định nghĩa
thành trong file riêng)
Nghĩa là mỗi trang web có sử dụng file CSS riêng nằm ngoài, và ta phải sử dụng
thẻ <link> để kết hợp file CSS và file HTML lại. Thẻ <link> được đặt bên trong
thẻ <head> .
Ví dụ: ta có một file CSS là mystyle.css, khi đó ta làm như sau:
SVTH : Trần Minh Hoàng
12
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
• Cách thứ 2 là Internal Style Sheet (định nghĩa các style sheet ngay trong
trang web)
Trong trường hợp file CSS được sử dụng ngay trong trang web, mỗi trang web
sử dụng các cách thể hiện khác nhau. Để định nghĩa Internal Style Sheet, ta sử

dụng thẻ <style> đặt bên trong thẻ <head>.
Ví dụ:
<head>
<style type=”text/css”>
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(”images/back40.gif”)}
</style>
</head>
• Và cách cuối cùng là Internal Style Sheet (style được qui định ngay trong
mỗi thẻ
HTML)
Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì
đã làm mất các ưu điểm của CSS.
<p style=”color: sienna; margin-left: 20px”>
This is a paragraph
</p>
1.1.3 Các thuộc tính của CSS Style
Trong CSS có rất nhiều thuộc tính và mỗi phần tử trong trang HTML có thể
được quy định theo nhiều kiểu. Một phần văn bản của một phần tử có thể được
quy định theo các thuộc tính như color, font size, độ đậm của phông, và kiểu chữ
sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên.
Ví dụ: để qui định cho một đoạn văn bản tên là robotic ta có các thuộc tính
như cỡ chữ (font-size), kiểu chữ ( font-family),màu chữ (color)…
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}

SVTH : Trần Minh Hoàng
13
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
1.2 Lập trình DOM trong AJAX
Ở trên chúng ta đã biết cách thể hiện một trang web trên trình duyệt người
dùng, trong phần này chúng ta tiếp tục tìm hiểu tiếp một công nghệ nữa trong
AJAX đó là DOM.
Mỗi khi bạn tải về một trang web, trình duyệt web của bạn sẽ mất tất cả các
phần của HTML code (mã nguồn) và tập hợp chúng thành một cấu trúc cứng
nhắc, giống như một “hệ thống tập tin”. Sau đó cấu trúc này được sử dụng để
tính toán, xử lý, và sau đó cái bạn nhìn thấy là tất cả nội dung sau khi xử lý xong.
Và "tập tin hệ thống" này được gọi là DOM hay Document. Object Model.
1.2.1 Giới thiệuvề DOM.
DOM cung cấp một loạt các cách để đọc và vận dụng các trang HTML hoặc
dữ liệu XML. Ta sử dụng DOM để thao tác các tài liệu HTML, tuy nhiên, DOM
cũng được sử dụng để truy cập và thao tác các tài liệu XML khi máy chủ gửi về.
Một trang web HTML là một loại hình cụ thể đặc biệt của tài liệu XML. Vì vậy,
cũng như sử dụng DOM để truy vấn và thao tác các trang web, chúng ta có thể sử
dụng nó trong một ý nghĩa tổng quát hơn là để truy vấn và thao tác XML. Để
hiểu làm thế nào để có thể sử dụng DOM để thao tác các tài liệu, chúng ta phải
hiểu khái niệm về các nút trong DOM.
• Khái niệm của nút (Nodes )
Nó là một phần của mô hình đối tượng W3C. Là một cách có hệ thống trong
việc điều hướng và thao tác các nội dung của một tài liệu HTML hay XML,
không chỉ các yếu tố, mà còn là văn bản bên trong chúng .
Một tài liệu HTML hay XML bao gồm một loạt các nút có thứ bậc . Mỗi
phần tử (ví dụ như p, div trong HTML, hoặc tùy chỉnh một tag trong XML) được
coi là một nút. Tuy nhiên nó không chỉ là yếu tố chính, các văn bản trong mỗi
phần tử cũng được đối xử như một loại đặc biệt của nút, là một nút văn bản .
Các nút có thể được lồng nhau theo một cấu trúc phân cấp.

Một yếu tố trong một phần tử là một nút con của phần tử
• Truy vấn cấu trúc Node của một tài liệu
ChildNodes là một mảng của tất cả các nút con của cơ thể, là tất cả các phần tử
và các văn bản trong trang.
Node. childNodes là một mảng của tất cả các nút con của một nút cho trước (tức
là phần tử)
Node. nodeName cho tên của một node
Node. nodeValue chỉ các văn bản trong một nút văn bản.
SVTH : Trần Minh Hoàng
14
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
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. 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.
Còn 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. Trong đó 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 thân của tài liệu, có các bảng, đoạn văn bản, danh sách, và các loại thẻ
khác với các thẻ ở mức thấp hơn nữa.
Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có
các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách
đệ qui như thế. JavaScript làm việc với nút gốc của trang web hiện thời qua một
biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên
DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần
tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc
tính, chúng được lưu trữ trong mảng móc nối.

Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các
thành phần HTML. Mối quan hệ này là hai chiều. Sửa đổi mô hình DOM sẽ thay
đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web.
Vậy cụ thể DOM được thiết lập, và hoạt động như thế nào? chúng ta cùng tìm
hiểu kỹ thuật DOM.
1.2.2 Làm việc với DOM bằng JavaScript.
Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ
đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu.
Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một
ví dụ về một trang HTML đơn giản sau:
<html>
<head>
<link rel=’stylesheet’ type=’text/css’ href=’hello.css’ />
<script type=’text/javascript’ src=’hello.js’></script>
</head>
<body>
<p id=’hello’>hello</p>
SVTH : Trần Minh Hoàng
15
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
<div id=’empty’></div>
</body>
Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style
Sheet) và một file chứa mã nguồn JavaScript là hello.js. Ở đây cũng đồng thời
khai báo một thẻ <div> với một ID.
Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file
HTML:
.declared{
color: red;
font-family: arial;

font-weight: normal;
font-size: 16px;
}
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}
Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các
style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng
chúng sẽ được áp dụng qua file JavaScript là hello.js.
window.onload=function(){
var hello=document.getElementById(’hello’);
hello.className=’declared’;
var empty=document.getElementById(’empty’);
addNode(empty,”reader of”);
addNode(empty,”Ajax in Action!”);
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
children[i].className=’programmed’;
}
empty.style.border=’solid green 2px’;
empty.style.width=”200px”;
}
function addNode(el,text){
var childEl=document.createElement(”div”);
el.appendChild(childEl);
var txtNode=document.createTextNode(text);
childEl.appendChild(txtNode);

}
SVTH : Trần Minh Hoàng
16
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
Khi đó hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời
điểm này, cấu trúc cây DOM sẽ được thiết lập.
1.2.3 Tìm kiếm và tạo DOM node.
 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. Vì thế có các cách sau để
tìm kiếm một nút nhanh chóng hơn. Mỗi phần tử HTML có một thuộc tính ID, ví
dụ như:
<p id=’hello’> Hay <div id=’empty’></div>
Mỗi một nút DOM có thể có một ID gán cho nó, và ID này có thể được dùng
để tham chiếu tới nút qua hàm :
var hello=document.getElementById(’hello’);
Trong một số trường hợp, cần duyệt qua cấu trúc cây từng bước một, mỗi nút
DOM có một nút cha và nhiều nút con. Chúng có thể được truy cập bởi các thuộc
tính parentNode và childNodes, thuộc tính parentNode trả về một đối tượng
DOM node khác, trong khi childNodes trả về một mảng javascript:
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
…
}
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().

Ví dụ: document.getElementsByTagName(”UL”) sẽ trả về chuỗi tất cả các thẻ
<UL> trong tài liệu.
 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(): phương thức này 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”);
SVTH : Trần Minh Hoàng
17
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
• document.createTextNode: phương thức này 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 stye để á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
el.appendChild (childEl);
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
1.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 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 stylesheet.
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
Ví dụ: đoạn code sau sẽ áp đặt các quy tắc biểu diễn của lớp declared cho một
nútbất kỳ:
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”;
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, như trong đoạn mã sau:
function addListItemUsingInnerHTML(el,text){
el.innerHTML+=”<div class=’programmed’>”+text+”</div>”;
}
SVTH : Trần Minh Hoàng
18
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
Trên đây ta vừa xét một cách sơ lược về JavaScript, CSS, và DOM. Chúng
được tập hợp trong một công nghệ gọi là Dynamic HTML (DHTML), và có thể
thấy Ajax sử dụng rất nhiều kỹ thuật DHTML.
1.3 Công nghệ XML trong AJAX
Như đã biết trong các ứng dụng web truyền thống khi máy chủ trả lời yêu cầu
của máy client, thường thì các tài liệu trang web được gửi về đều đã được xử lý
thành file HTML ngay tại máy chủ, điều này đã làm tốn không ít thời gian chờ
đợi của của người dùng. Với công nghệ AJAX thì khác, như đã nói, máy chủ sẽ
trả về tài liệu dưới dạng file XML và sau đó mới được chuyển thành HTML ngay

sau trình duyệt tại client. Vậy trong phần nay chúng ta sẽ tìm hiểu tất cả những gì
liên quan đến XML
1.3.1 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.
Ta có ví dụ về một file XML như sau:
<?xml version=”1.0″?>
<Catalog>
<Product>
<ProductID>F10</ProductID>
<ProductName>Shimano Calcutta </ProductName>
<ListPrice>47.76</ListPrice>
</Product>
<Product>
<ProductID>F20</ProductID>
<ProductName>Bantam Lexica</ProductName>
<ListPrice>49.99</ListPrice>
</Product>
</Catalog>
Với một tài liệu HTML có thể tồn tại một số thẻ không đúng quy định song
với một tài liệu XML thì điều này không thể xảy ra. Khi xây dựng một tài liệu
XML, nó phải tuân thủ theo một số quy luật nào đó.
Ngoài ra trong XML còn có XSLT, đó là một phần của XSL. XSL là một
ngôn ngữ nền tảng XML và ra đời với mục đích để chuyển đổi một tài liệu XML
SVTH : Trần Minh Hoàng
19

Tìm hiểu về AJAX GVHD: Đào Phan Vũ
thành một tài liệu XML khác hay chuyển một tài liệu XML thành những đối
tượng có thể thể hiện được. Internet Explorer được tích hợp XSL transformer
giúp tự động chuyển đổi tài liệu XML thành tài liệu HTML. Để sử dụng XSLT,
chúng ta phải xây dựng tài liệu XSL chứa những template. Trong những template
chúng ta sẽ kết hợp những phần tử HTML sẽ được xuất ra.
Với một định dạng đặc biệt XML cho phép cấu trúc và lưu trữ dữ liệu trong
các tập tin với đuôi .xml mở rộng với một cú pháp dựa trên thẻ. Trong một số
trường hợp, câu trả lời nhận được (khi truyền dữ liệu truyền từ kịch bản máy chủ
về) có thể là một nội dung tài liệu XML. Phương pháp này thường được sử dụng
trong các ứng dụng API khi dữ liệu được chuyển giao từ một máy chủ khác (từ
một máy chủ bên ngoài được các trang web đó yêu cầu chuyển giao).
Vậy với cấu trúc đặc biệt như vậy, trong công nghệ AJAX làm thế nào để lấy
dữ liệu từ một file XML và hiển thị nó trong trình duyệt. Phần tiếp theo đây
chúng ta sẽ tìm hiểu cách thức lấy dữ liệu từ file XML khi máy chủ gửi về.
1.3.2 Cách thức tải dữ liệu XML.
Bước đầu tiên là nhận dữ liệu từ XML. Đôi khi có thể nhận được dữ liệu từ
PHP (hoặc các máy chủ ứng dụng) như là một chuỗi với định dạng XML, hoặc
có thể được tải về trực tiếp từ một file XML.
Sau khi các dữ liệu XML đã nhận được, nó phải được nạp (lưu trữ) trong
một đối tượng JavaScript DOM. Và khi này ta phải xem nội dụng XML tải về là
một chuỗi từ một kịch bản hay một tệp tin XML.
• Nếu các nội dung XML nhận được là một chuỗi, từ một kịch bản phía
máy chủ,thì mã JavaScript sẽ tải các định dạng XML trong một đối tượng DOM
JS là fallowing (giải thích trong mã script):
/ / Tải các chuỗi xml trong một đối tượng dom
function getXML_sir(txt_xml) { chức năng getXML_sir (txt_xml) {
// for non IE browsers / / Cho trình duyệt IE không
if(window.DOMParser) { if (window.DOMParser) {
// create an instance for xml dom object / / Tạo ra một thể hiện cho đối tượng

dom xml
getxml = new DOMParser(); getxml = mới DOMParser ();
xmlDoc = getxml.parseFromString(txt_xml,"text/xml"); xmlDoc =
getxml.parseFromString (txt_xml, "text / xml");
} }
else { else {
// for Internet Explorer / / Cho Internet Explorer
SVTH : Trần Minh Hoàng
20
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
// create an instance for xml dom object / / Tạo ra một thể hiện cho đối tượng
dom xml
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc = new
ActiveXObject ("Microsoft.XMLDOM");
xmlDoc.async="false"; xmlDoc.async = "false";
} }
return xmlDoc; trở về xmlDoc;
} }
// a variable with the string received from server / / Một biến với chuỗi nhận
được từ máy chủ
var str_xml = 'The string that contains the XML content received from the server
by ajax'; var str_xml = 'Các chuỗi chứa nội dung XML nhận được từ các máy chủ
của ajax';
// calls the getXML_sir() with "str_xml" function and store the xml dom in a
variable / / Gọi getXML_sir () với chức năng "str_xml" và lưu trữ các dom xml
trong một biến
var xml_dom = getXML_sir(str_xml); var xml_dom = getXML_sir (str_xml);
Trong Internet Explorer nó sử dụng các đối tượng "ActiveXObject ("
Microsoft.XMLDOM " )" để tải dữ liệu XML vào một đối tượng DOM, còn các
trình duyệt khác thì sử dụng chức năng "DOMParser ()" và phương pháp

"parseFromString (string_XML, 'text / xml')".
• Nếu dữ liệu XML phải được tải về trực tiếp từ một tập tin XML, thì ta sử
dụng đối
tượng XMLHttpRequest.
/ / Ajax chức năng, được các nội dung của một file xml và lưu nó trong XML
DOM
function getXML_file(xml_file) { chức năng getXML_file (xml_file) {
// if browser suports XMLHttpRequest / / Nếu trình duyệt suports
XMLHttpRequest
if (window.XMLHttpRequest) { if (window.XMLHttpRequest) {
// Cretes a instantce of XMLHttpRequest object / / Cretes một instantce của
đối tượng XMLHttpRequest
xhttp = new XMLHttpRequest(); xhttp = new XMLHttpRequest ();
} }
else { else {
// for IE 5/6 / / Cho IE 5 / 6
xhttp = new ActiveXObject("Microsoft.XMLHTTP"); xhttp = new
ActiveXObject ("Microsoft.XMLHTTP");
} }
// sets and sends the request for calling "xml_file" / / Tập hợp và gửi yêu cầu gọi
điện thoại "xml_file"
SVTH : Trần Minh Hoàng
21
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
xhttp.open("GET", xml_file ,false); xhttp.open ("GET", xml_file, false);
xhttp.send(null); xhttp.send (null);
// sets and returns the content as XML DOM / / Tập hợp và trả về các nội dung
như XML DOM
xmlDoc = xhttp.responseXML; xmlDoc = xhttp.responseXML;
return xmlDoc; trở về xmlDoc;

} }
// Variabila cu adresa xml_fileului XML / / Variabila cu adresa xml_fileului
XML
var file_xml = 'xml_file.xml'; var file_xml = 'xml_file.xml';
// calls the "getXML_file()" function "file_xml" / / Gọi là "getXML_file ()" chức
năng "file_xml"
var xml_dom = getXML_file(file_xml); var xml_dom = getXML_file (file_xml);
Sau khi tải và lấy được tài liệu XML từ máy chủ gửi về, ta tiếp tục phân tích tài
liệu đó để được file HTML trình bày trên trình duyệt máy khách.
1.3.3 Phân tích tài liệu XML.
Một khi các nội dung XML được chuyển đổi thành JavaScript XML DOM,
chúng ta có thể truy cập các phần tử XML bằng cách sử dụng phương pháp JS
DOM. Vì dữ liệu trong XML là dữ liệu có cấu trúc được định dạng dựa trên các
thẻ, nên chúng ta có thể sử dụng JavaScript DOM và các phương pháp cụ thể để
phân tích chúng. Sau đây là một số thuộc tính và phương pháp của Javascript
DOM mà được sử dụng để phân tích dữ liệu XML.
• Một số thuộc tính của Javascript DOM.
ChildNodes là mảng của các nút con
FirstChild là các nút con đầu tiên
LastChild là các nút con cuối cùng
Nodename là tên của nút (một thuộc tính hoặc thẻ XML)
NodeValue là giá trị chứa trong nút
ParentNode là phụ huynh của nút
Attributes là mảng của các thuộc tính trong nút hiện tại
• Một số phương pháp của JavaScript DOM
GetElementsById (ID) là tìm một phần tử bằng ID của mình
GetElementsByTagName (tags_name) là một mảng của tất cả các thẻ
“tags_name” AppendChild (node ) là thêm một nút con mới
SVTH : Trần Minh Hoàng
22

Tìm hiểu về AJAX GVHD: Đào Phan Vũ
RemoveChild (node) là xóa một nút con
GetAttribute ('attr')
Với mỗi thuộc tính và phương pháp ta lại có mỗi cách sử dụng và xử lý khác
nhau để phân tích dữ liệu, sau đây chúng ta sẽ trình bày một số ví dụ. Giả sử ta
có một tài liệu XML với tên là “file.xml” có nội dung như sau:
<Xml version = "1.0" mã hóa? = "Utf-8"?>
<webcourses>
<site Categ="Web Programming">
<url> </ url>
<description> PHP-MySQL miễn phí khóa học trực tuyến và hướng dẫn </
description>
</ webcourses >
<webcourses>
<site categ="Web Programming">
<url> </ url>
<description> Miễn phí khóa học Ajax và hướng dẫn </ description>
</ webcourses >
<site categ="Foreign languages">
<url> </ url>
<description> bài học tiếng Anh trực tuyến miễn phí </ description >
</ webcourses >
</ webcourses>
Sau khi nhận được dữ liệu XML như trên và chuyển đổi nó thành đối tượng
XML DOM (với một chức năng là: "getXML_sir ()" nếu đó là một chuỗi văn
bản, hoặc "getXML_file" nếu đó là lấy trực tiếp từ tập tin bên ngoài), đối tượng
này được lưu trữ vào một biến, ví dụ ở đây có tên là "xml_dom". Biến này sẽ trở
thành cơ sở cho việc thực hiện phân tích với các thuộc tính và phương pháp
DOM.
 Ví dụ với firstChild và nodename

<script type="text/javascript">
<!
/ / Thêm chức năng "getXML_file ()" hoặc "getXML_sir ()" (tùy thuộc
vào phương thức thu thập dữ liệu XML)
/ / Ở đây nó được sử dụng "getXML_file ()"
var xml_dom = getXML_file('fisier.xml');
/ / gọi là "getXML_file ()" chức năng với tên của tập tin XML
var root = xml_dom.firstChild;
/ / được các phần tử con đầu tiên, các tag gốc
var tag_root = root.nodeName; / / được tên của thẻ gốc
alert(tag_root); // webcourses cảnh báo (tag_root); / / webcourses
// ></script> // >
</ Script>
SVTH : Trần Minh Hoàng
23
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
 Ví dụ với getElementsByTagName và getAttribute ()
<script type="text/javascript">
<! / / Thêm chức năng "getXML_file ()" hoặc "getXML_sir ()" (tùy thuộc vào
phương thức thu thập dữ liệu XML)
/ / Ở đây nó được sử dụng "getXML_file ()"
var xml_dom = getXML_file ('fisier.xml');
/ / gọi là chức năng "getXML_file ()"với tên của các arr_sites var XML file =
xml_dom.getElementsByTagName ('trang web'); / / được một Array với tất cả
các trang web " ". tag var site2_cat = arr_sites [1] getAttribute ('categ'); / / được
giá trị của" categ "thuộc tính của hai" cảnh báo trang web tag "(site2_cat); / /
Web Lập trình kịch bản // ></ >
1.4 Đối tượng XMLHttpRequest
Trong các ứng dụng web truyền thống đều phải tái nạp toàn bộ trang web khi
gửi yêu cầu đến server, điều này thường dẫn đến một sự ngắt quãng cho công

việc của người dùng. Vì thế yêu cầu đặt ra là làm cho các 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, XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ và hiệu
quả.
XMLHttpRequest hay được gọi là đối tượng XHR, là cơ chế phổ biến nhất
để đạt được Ajax truyền thông. Nó chỉ là một vận tải cơ chế cho Ajax, tuy nhiên,
và không tương đương. Ajax là kỹ thuật, còn XHR là công cụ.
XMLHttpRequest là thành phần quan trọng nhất trong AJAX, nó cho phép gửi
dữ liệu bất đồng bộ lên Server.
Đối tượng XMLHttpRequest được đưa ra ban đầu trong Internet Explorer 5
như là một ActiveX component. Nó chỉ hoạt động trong Internet Explorer điều
này làm cho số ít các nhà phát triển làm việc với XMLHttpRequest, cho tới khi
nó trở thành một chuẩn không chính thức trong Mozilla 1.0 và Safari 1.2. Một
điều rất quan trọng cần chú ý là XMLHttpRequest không phải là chuẩn của W3C,
mặc dù rất nhiều chức năng của nó được đề xuất trong các đặc tả: DOM Level 3
Load and Save Specification.
Vì XMLHttpRequest không phải là một chuẩn, nên có những sự khác biệt
nhỏ trong các trình duyệt về hỗ trợ đối tượng này, tuy nhiên hầu hết các phương
thức và thuộc tính của nó đều được hỗ trợ.
Đối tượng XMLHttpRequest, nó là thành phần quan trọng nhất trong công
nghệ AJAX vì đây là công cụ để gửi Request không đồng bộ đến máy chủ - là
SVTH : Trần Minh Hoàng
24
Tìm hiểu về AJAX GVHD: Đào Phan Vũ
yếu tố quan trọng nhất tạo nên sự khác biệt và ưu điểm của công nghệ AJAX,
nhưng trước khi gửi Request đến máy sever, ta phải tạo ra một đối tượng
XMLHttpRequest phù hợp.
1.4.1 Cách tạo và thể hiện một đối tượng XMLHttpRequest
Trước tiên ta cần tạo một đối tượng XMLHttpRequest bằng JavaScript. Sau

đó mới sử dụng đối tượng này để gửi request và xử lý các response
Do XMLHttpRequest chưa là chuẩn của W3C, vì thế phải dùng JavaScript
theo nhiều cách để tạo một thể hiện của của XMLHttpRequest.
Internet Explorer thực thi XMLHttpRequest như một đối tượng ActiveX.
Còn các trình duyệt khác như Firefox, Safari, và Opera thực thi nó như một đối
tượng JavaScript nguyên thủy. Vì sự khác nhau này, nên đoạn mã JavaScript phải
chứa các cấu trúc logic để tạo một thể hiện của XMLHttpRequest dùng kỹ thuật
ActiveX hay đối tượng JavaScript nguyên thủy.
Và công việc chỉ đơn giản là kiểm tra sự hỗ trợ đối tượng ActiveX của trình
duyệt. Nếu hỗ trợ ActiveX, thì tạo một đối tượng XMLHttpRequest dùng
ActiveX. Trường hợp khác, ta tạo đối tượng này bằng kỹ thuật tạo đối tượng
JavaScript nguyên thủy. Vì vậy ta dùng mã JavaScript để tạo ra các thể hiện của
đối tượng XMLHttpRequest mà không cần quan tâm tới trình duyệt.
Cụ thể ta tạo một thể hiện của đối tượng XMLHttpRequest như sau:
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
Trong ví dụ trên: việc tạo một đối tượng XMLHttpRequest khá là đơn giản.
Trước tiên, tạo một biến toàn cục xmlHttp để lưu trữ một tham chiếu đến đối
tượng. Phương thức createXMLHttpRequest thực hiện việc tạo một thể hiện của
XMLHttpRequest. Câu lệnh rẽ nhánh đơn giản để xác định cách thức tạo một đối
tượng. Lệnh gọi window.ActiveXObject sẽ trả về một biến kiểu object hay giá trị
null, tương đương với điều kiện true hay false của câu lệnh if. Nếu dấu hiệu chỉ
ra cho ta biết là trình duyệt hỗ trợ ActiveX control, đó là Internet Explorer, nếu

SVTH : Trần Minh Hoàng
25