Tìm hiểu về AJAX và xây dựng Website có ứng dụng công nghệ AJAX

Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
CHƯƠNG 1 : TỔNG QUAN VỀ ĐỀ TÀI
1.1 Giới thiệu về cơ sở thực tập
Công ty VDC-Net2E là công ty hàng đầu trong lĩnh vực cung cấp các dịch
vụ trực tuyến. Công ty VDC-Net2E được thành lập bởi các sáng lập viên: Công
ty Điện toán và Truyền số liệu (VDC) trực thuộc Tổng Công ty Bưu chính Viễn
thông Việt Nam, Công ty TNHH Kalet, Công ty TNHH Thiết bị bảo vệ và Điện
tử tin học Việt Anh và Công ty Cổ phần Điện tử, Công nghiệp và Hoá Chất Việt
Nam...
Các lĩnh vực hoạt động chính của Công ty bao gồm: + Dịch vụ Giải trí
trực tuyến
+ Dịch vụ Gia tăng giá trị trên mạng Internet
+ Thương mại điện tử
+ Dịch vụ tư vấn và thiết kế các phần mềm máy tính …
Công ty VDC- Net2E đã và đang phát hành 2 sản phẩm giải trí trực tuyến,
game online :
+ Con đường tơ lụa (www.conduongtolua.com.vn)
+ Ongame – Thiên đường giải trí (www.ongame.com.vn), cổng game
portal số 1 tại Việt nam hiện nay.
Silkroad luôn được coi là những bước đột phá trong làng Game Online
Hàn Quốc khi được công bố năm 2004.
Các game thủ yêu thích Silk Road không chỉ vì đồ hoạ đẹp, cách chơi hay
mà còn chứa đựng những giá trị về văn hoá và lịch sử thế giới. Chính vì thế mà
trong năm 2005, game này đã liên tiếp đoạt 2 giải thưởng Nội dung điện tử xuất
sắc của Bộ Thông tin - Viễn thông Hàn Quốc (9/2005) và Giải Công nghệ và
Sáng tạo trong liên hoan Game Hàn Quốc do Bộ Du lịch - Thông tin Hàn Quốc
tổ chức (10/2005).
Mục tiêu của VDC- Net2E là sẽ trở thành công ty hàng đầu trong lĩnh vực
giải trí trực tuyến, chiếm lĩnh thị phần học tập và giải trí trực tuyến trong nước
và hội nhập Quốc tế.
Công Ty: Công ty VDC-Net2E

Loại hình công ty: Công ty cổ phần
Địa chỉ: Nhà B1 – DN 13 đường Nguyễn Khánh Toàn – Quan Hoa -
Cầu Giấy - Hà Nội ( Nguyễn Phong Sắc kéo dài )
Dương Minh Đức CQ470604 CNTT- K47
1
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Quận Huyện: Cầu giấy
Mã Bưu Điện:
Tỉnh/Thành Phố: Hà Nội
Quốc Gia: Việt Nam
Số điện thoại:
Fax:
E-mail:
URL:
1.2 Giới thiệu về đề tài :
Đề tài : Tìm hiểu về AJAX và xây dựng Website có ứng dụng công nghệ
AJAX.
1.2.1 Lý do chọn đề tài
Trong thời đại bùng nổ thông tin hiện tại với sự phát triển nhanh chóng và
vượt bậc của truyền thông đa phương tiện . Internet gần như là mái nhà chung
của thế giới , một thế giới thứ 2 . Đi liền Internet là sự phát triển của các công
nghệ Web. Ban đầu các ứng dụng Web chỉ mang tính chất tham khảo kiến thức
không chú trọng tới hình thức cũng như giao tiếp người dùng. Khi internet phát
triển mạnh mẽ cũng là lúc kèm theo các nhu cầu mới về các ứng dụng Web.
Người ta đòi hỏi ở Web App ngày càng nhanh nhậy hơn thân thiện hơn , trực
quan hơn.
Quá trình phát triển các công nghệ trong ứng dụng Web :
Ban đầu, các trang Web là tĩnh; người dùng gửi yêu cầu một tài nguyên nào đó,
và server sẽ trả về tài nguyên đó. Các trang Web không có gì hơn là một văn bản
được định dạng và phân tán. Đối với các trình duyệt, thì các trang Web tĩnh

không phải là các vấn đề khó khăn, và trang Web lúc đầu chỉ để thông tin về các
sự kiện, địa chỉ, hay lịch làm việc qua Internet mà thôi, chưa có sự tương tác qua
các trang Web. Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML
(Hyper Text Markup Language), ngôn ngữ đánh dấu siêu văn bản. HTML rất
Dương Minh Đức CQ470604 CNTT- K47
2
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
đơn giản và dễ dùng, và nó trở thành một ngôn ngữ rất phổ biến và cơ bản. Tuy
nhiên, không lâu sau đó, nhu cầu về các trang Web động, có sự tương tác ngày
một tăng, chính vì thế sự ra đời các công nghệ Web động là một điều tất yếu.
Sau đây là một số công nghệ Web động cơ bản:
CGI
Giải pháp đầu tiên để làm các trang Web động là Common Gateway Interface
(CGI). CGI cho phép tạo các chương trình chạy khi người dùng gửi các yêu cầu.
Giả sử khi cần hiển thị các các mục để bán trên Web site – với một CGI script ta
có thể truy nhập cơ sở dữ liệu sản phẩm và hiển thị kết quả. Sử dụng các form
HTML đơn giản và các CGI script, có thể tạo các “cửa hàng” ảo cho phép bán
sản phẩm cho khách hàng qua một trình duyệt. CGI script có thể được viết bằng
một số ngôn ngữ từ Perl cho đến Visual Basic. Tuy nhiên, CGI không phải là
cách an toàn cho các trang Web động. Với CGI, người khác có thể chạy chương
trình trên hệ thống. Vì thế có thể chạy các chương trình không mong muốn gây
tổn hại hệ thống. Nhưng dù vậy, cho đến hôm nay thì CGI vẫn còn được sử
dụng.
Applet
Tháng 5/1995, John Gage của hãng Sun và Andressen (nay thuộc Netscape
Communications Corporation) đã công bố một ngôn ngữ lập trình mới có tên
Java. Netscape Navigator đã hỗ trợ ngôn ngữ mới này, và một con đường mới
cho các trang Web động được mở ra, kỷ nguyên của applet bắt đầu.
Applet cho phép các nhà phát triển viết các ứng dụng nhỏ nhúng vào trang Web.
Khi người dùng sử dụng một trình duyệt hỗ trợ Java, họ có thể chạy các applet

trong trình duyệt trên nền máy ảo Java Virtual Machine (JVM). Dù rằng applet
làm được nhiều điều song nó cũng có một số nhược điểm: thường bị chặn bởi
việc đọc và ghi các file hệ thống, không thể tải các thư viện, hoặc đôi khi không
thể thực thi trên phía client. Bù lại những hạn chế trên, applet được chạy trên
Dương Minh Đức CQ470604 CNTT- K47
3
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
một mô hình bảo mật kiểu sandbox bảo vệ người dùng khỏi các đoạn mã nguy
hiểm.
Có những lúc applet được sử dụng rất nhiều, nhưng nó cũng có những vấn đề
nảy sinh: đó là sự phụ thuộc vào máy ảo Java JVM, các applet chỉ thực thi khi
có môi trường thích hợp được cài đặt phía client, hơn nữa tốc độ của các applet
là tương đối chậm vì thế applet không phải là giải pháp tối ưu cho Web động.
JavaScript
Cùng thời gian này, Netscape đã tạo ra một ngôn ngữ kịch bản gọi là JavaScript.
JavaScript được thiết kế để việc phát triển dễ dàng hơn cho các nhà thiết kế Web
và các lập trình viên không thành thạo Java. (Microsoft cũng có một ngôn ngữ
kịch bản gọi là VBScript). JavaScript ngay lập tức trở thành một phương pháp
hiệu quả để tạo ra các trang Web động.
Việc người ta coi các trang như là một đối tượng đã làm nảy sinh một khái niệm
mới gọi là Document Object Model (DOM). Lúc đầu thì JavaScript và DOM có
một sự kết hợp chặt chẽ nhưng sau đó chúng được phân tách. DOM hoàn toàn là
cách biểu diễn hướng đối tượng của trang Web và nó có thể được sửa đổi với
các ngôn ngữ kịch bản bất kỳ như JavaScript hay VBScript.
Tổ chức World Wide Web Consortium (W3C) đã chuẩn hóa DOM, trong khi
European Computer Manufacturers Association (ECMA) phê duyệt JavaScript
dưới dạng đặc tả ECMAScript.
JSP/Servlet, ASP và PHP
Cùng với Java, Sun đồng thời đưa ra một công nghệ mới gọi là servlet. Các đoạn
mã Java sẽ không chạy phía client như với applet; chúng sẽ được chạy trên một

ứng dụng phía server. Servlet cũng đồng thời phục vụ các CGI script. Servlet là
Dương Minh Đức CQ470604 CNTT- K47
4
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
một bước tiến lớn, nó đưa ra một thư viện hàm API trên Java và một thư viện
hoàn chỉnh để thao tác trên giao thức HTTP. JavaServer Page (JSP) là một công
nghệ lập trình Web của Sun, cùng với nó là một công nghệ khác của Microsoft -
Active Server Pages (ASP), JSP là công nghệ đòi hỏi một trình chủ hiểu được
Java.Microsoft đã nghiên cứu các nhược điểm của servlet và tạo ra ASP dễ dàng
hơn để thiết kế các trang web động. Microsoft thêm các bộ công cụ rất mạnh và
sự tích hợp rất hoàn hảo với các Web server. JSP và ASP có những nét tương
đương vì chúng đều được thiết kế để phân tách qua trình xử lí khỏi quá trình
biểu diễn. Có sự khác biệt về kỹ thuật, song cả hai đều cho phép các nhà thiết kế
Web tập trung vào cách bố trí (layout) trong khi các nhà phát triển phần mềm thì
tập trung vào các kỹ thuật lập trình logic.
Tất nhiên Microsoft và Sun không độc quyền ở các giải pháp phía server. Còn
có các công nghệ khác, trong đó phải kể đến là PHP (Hypertext Preprocessor)
cho tới Cold Fusion. Các công nghệ này cung cấp các bộ công cụ rất mạnh cho
các nhà phát triển.
Flash
Năm 1996, FutureWave đã đưa ra sản phẩm FutureSplash Animator. Sau đó
FutureWave thuộc sở hữu của Macromedia, và công ty này đưa ra sản phẩm
Flash. Flash cho phép các nhà thiết kế tạo các ứng dụng hoạt họa và linh động.
Flash không đòi hỏi các kỹ năng lập trình cao cấp và rất dễ học. Cũng giống như
các nhiều giải pháp khác Flash yêu cầu phần mềm phía client. Chẳng hạn như
gói Shockwave Player plug-in có thể được tích hợp trong một số hệ điều hành
hay trình duyệt.
DHTML
Khi Microsoft và Netscape đưa ra các version 4 của các trình duyệt của họ, thì
các nhà phát triển Web có một lựa chọn mới: Dynamic HTML (DHTML).

DHTML không phải là một chuẩn của W3C; nó giống một bộ công cụ thương
Dương Minh Đức CQ470604 CNTT- K47
5
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
mại hơn. Trong thực tế nó là một tập hợp gồm HTML, Cascading Style Sheets
(CSS), JavaScript, và DOM. Tập hợp các công nghệ trên cho phép các nhà pháp
triển sửa đổi nội dung và cấu trúc của một trang Web một cách nhanh chóng.
Tuy nhiên, DHTML yêu cầu sự hỗ trợ từ các trình duyệt. Mặc dù cả Internet
Explorer và Netscape hỗ trợ DHTML, nhưng các thể hiện của chúng là khác
nhau, các nhà phát triển cần phải biết được loại trình duyệt nào mà phía client
dùng. DHTML thật sự là một bước tiến mới, nhưng nó vẫn cần một sự qui chuẩn
để phát triển. Hiện nay DHTML vẫn đang trên con đường phát triển mạnh.
XML
Kể từ khi ra đời vào giữa năm 1990, eXtensible Markup Language (XML) của
W3C dẫn xuất của SGML đã trở nên rất phổ biến. XML có mặt ở khắp nơi,
Microsoft Office 12 cũng sẽ hỗ trợ định dạng file XML.
Ngày nay chúng ta có rất nhiều dạng dẫn xuất của XML cho các ứng dụng Web
(tất nhiên là có cả XHTML): XUL của Mozilla; XAMJ, một sản phẩm mã
nguồn mở trên nền Java; MXML từ Macromedia; và XAML của Microsoft.
Công nghệ Web thế hệ thứ hai – Web 2.0
Được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web mới có những
thay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở cách thức sử
dụng - hình thành nên môi trường cộng đồng, ở đó mọi người cùng tham gia
đóng góp cho xã hội “ảo” chứ không chỉ “duyệt và xem”.
Web 2.0 là gì? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0? Thuật ngữ
“Web 2.0″ đang trở nên thịnh hành. Thực chất, Web 2.0 có nghĩa là sử dụng
web đúng với bản chất và khả năng của nó.
Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm kết nối
các nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ thông tin
Dương Minh Đức CQ470604 CNTT- K47

6
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
hiệu quả. Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee cũng
nhằm mục tiêu tạo phương tiện cho phép người dùng tự do đưa thông tin lên
Internet và dễ dàng chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-
Lee viết bao gồm cả công cụ soạn thảo trang web). Tuy nhiên, sau đó web đã
phát triển theo hướng hơi khác mục tiêu ban đầu.
Tuy có một số ngoại lệ nhưng thế giới Web 1.0 (thế hệ web trước Web 2.0) chủ
yếu gồm các website “đóng” của các hãng thông tấn hay các công ty nhằm mục
đích tiếp cận độc giả hay khách hàng hiệu quả hơn. Nó là phương tiện phát tin
hơn là phương tiện chia sẻ thông tin. Chỉ đến gần đây, với sự xuất hiện của
nhiều kỹ thuật mới như blog (hay weblog), wiki… web mới trở nên có tính cộng
đồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực sự
của nó.
Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của O’Reilly
Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do O’Reilly Media và
MediaLive International tổ chức vào tháng 10/2004. Dougherty không đưa ra
định nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0:
“DoubleClick là Web 1.0; Google AdSense là Web 2.0. Ofoto là Web 1.0;
Flickr là Web 2.0. Britannica Online là Web 1.0; Wikipedia là Web 2.0. v.v…”.
Sau đó Tim O’Reilly, chủ tịch kiêm giám đốc điều hành O’Reilly Media, đã đúc
kết lại 7 đặc tính của Web 2.0:
1. Web có vai trò nền tảng, có thể chạy mọi ứng dụng
2. Tập hợp trí tuệ cộng đồng
3. Dữ liệu có vai trò then chốt
4. Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không
ngừng
5. Phát triển ứng dụng dễ dàng và nhanh chóng
6. Phần mềm có thể chạy trên nhiều thiết bị
Dương Minh Đức CQ470604 CNTT- K47

7
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
7. Giao diện ứng dụng phong phú
Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò
nền tảng ứng dụng. Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng
10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.
Chính vì vậy lí do em chọn đề tài này là để nghiên cứu một công nghệ Web 2.0
nổi bật nhất hiện nay, áp dụng nó vào bài toán thực tế khi ta xây dựng một
website , đi từ những viên gạch đầu tiên.
1.2.2 Mục tiêu và yêu cầu của đề tài
Xây dựng 1 website nhằm giới thiệu, tìm kiếm tra cứu thông tin và chia sẻ
thông tin kiến thức , cũng như viết lưu bút. Từ đó cho phép mọi người có thể thể
hiện cái tôi cá nhân của mình.
Xây dựng 1 website có đầy đủ hình ảnh và thông tin.
Xây dựng website có ứng dụng công nghệ AJAX vào quản lí và tra cứu.
Đảm bảo tính an toàn và bảo mật
Đảm bảo thân thiện và dễ sử dụng với mọi người,
Dương Minh Đức CQ470604 CNTT- K47
8
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
CHƯƠNG 2 : TỔNG QUAN VỀ AJAX.
2.1 Khái niệm về AJAX, công nghệ AJAX
2.1.1. Mở đầu
Ban đầu khi người ta làm quen với mạng internet đều bằng hình thức thư điện tử
, và World Wide Web . Web từ thủa sơ khai chỉ là Web tĩnh . Người dùng gửi
yêu cầu tới một máy chủ và máy chủ sẽ trả về thông tin có sẵn trên nó mà không
có bất kì tương tác lựa chọn nào kết nối của người xem thông tin và nhà phát
hành tin tức. Đối với các trình duyệt một trang Web tĩnh được thể hiện hết sức
đơn giản và cơ bản. Chỉ với một mục đích là tra cứu thông tin, tham khảo tài
liệu. Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML (Hyper

Text Markup Language), ngôn ngữ đánh dấu siêu văn bản. HTML rất đơn giản
và dễ dùng, và nó trở thành một ngôn ngữ rất phổ biến và cơ bản.115
Web động ra đời cho phép các nhà phát triển , các lập trình viên nhanh chóng sử
dụng nó như một công cụ để tương tác với bên người dùng. Web động với chức
năng tương tác hai chiều giữa người viết và người đọc đã tạo nên một làn sóng
mới, mở ra một tương lai đầy hứa hẹn cho Internet . Nhiều người đã hi vọng
rằng các ứng dụng Web sẽ phát triển thay các phần mềm chạy độc lập trên máy
tính client đơn lẻ ( các ứng dụng offline PC ). Quả thật, với sự phát triển chóng
mặt của mạng Internet cùng với những ưu điểm của các ứng dụng Web (truy cập
tại mọi nơi, không cần nâng cấp nhiều về phía máy sử dụng,…), tương lai của
các phần mềm chắc chắn sẽ gắn chặt với các ứng dụng Web, nếu không muốn
nói là có thể sẽ bị thay thế. Tuy nhiên, cho đến giờ, hy vọng đó vẫn chưa được
đáp ứng một cách triệt để bởi một số điểm đặc trưng của ứng dụng Web lại
chính là những giới hạn tưởng chừng như không thể vượt qua nổi. Đó chính là
cách thức mà người dùng và ứng dụng Web tương tác với nhau.
2.1.3 AJAX là gì ?
JavaScript, ngôn ngữ lập trình chạy trên trình duyệt đã quá quen thuộc với
thế giới web kể từ khi Netscape phát minh ra nó. Sự phát triển của công nghệ và
nhu cầu người sử dụng ngày càng cao buộc các nhà phát triển tạo ra một kĩ thuật
khác cho phép xử lý các tác vụ phức tạp hơn. Tháng 2/2005, trên Internet bắt
đầu lan truyền thuật ngữ Ajax như là một kỹ thuật mới cho ứng dụng web.
Những thành công vang dội và sự hấp dẫn kì lạ của Gmail, Google Suggest và
Google Maps đã khiến cho Ajax được chú ý một cách đặc biệt.
Dương Minh Đức CQ470604 CNTT- K47
9
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Ajax là viết tắt của Asynchronous JavaScript and XML - 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 đánh giá rất cao:
• 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

Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest. Các
kĩ sư của dự án Mozilla bắt đầu hỗ trợ tính năng này ở bản Mozilla 1.0 (và
Netscape 7). Apple cũng đã thực hiện một tính năng tương tự kể từ Safari 1.2.
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 giới
công nghiệp 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 của W3C, được
Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rất
tốt;
• Biểu diễn động và tương tác sử dụng Document Object Model, chuẩn của
W3C;
• Trao đổi và xử lý dữ liệu dùng XML và XSLT, chuẩn của W3C;
• Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest;
• 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.
Ở các ứng dụng web truyền thống, client sẽ gửi HTTP Request đến web
server và web server sẽ gửi trả response chứa các thông tin dưới dạng HTML và
CSS. Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp này. Khi đó,
các yêu cầu gửi resquest và nhận response do Ajax Engine thực hiện. Thay vì trả
dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi
trả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa
thành XHTML+CSS cho trình duyệt hiển thị. Việc này được thực hiện trên
client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết
quả xử lý được hiển thị tức thì mà không cần nạp lại trang. Mặt khác, sự kết hợp
của các công nghệ web như CSS và XHTML làm cho việc trình bày giao diện
trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. Đây là
những lợi ích hết sức thiết thực mà Ajax đem lại.
Dương Minh Đức CQ470604 CNTT- K47
10
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Ứng dụng Web truyền thông - AJAX

Mô hình cổ điển :
và
AJAX
Dương Minh Đức CQ470604 CNTT- K47
11
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX
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.
Ngoà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. Vậy tất cả cơ chế này
hoạt động thực sự thế nào? AJAX cho phép tạo ra một AJAX Engine nằm giữa
giao tiếp này. Khi đó, các yêu cầu gửi (resquest) và nhận (response) do AJAX
Engine thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho
trình duyệt, Web server có thể gửi trả dữ liệu dạng XML và AJAX Engine sẽ
tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển
thị.
Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời
người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại
trang. Mặt khác, sự kết hợp của các công nghệ Web như CSS và XHTML làm
cho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kể dung
lượng trang phải nạp. Đây là những lợi ích hết sức thiết thực mà AJAX đem lại.
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 phần tiếp theo.
2.1.3 Một số ứng dụng AJAX
Atlas: Ajax kiểu Microsoft

Dương Minh Đức CQ470604 CNTT- K47
12
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Công nghệ mới của Microsoft tích hợp thư viện script phía client với nền tảng
phía server của ASP.NET 2.0, hứa hẹn cung cấp nền tảng phát triển toàn diện
hơn và đơn giản hoá việc phát triển ứng dụng web kiểu Ajax.
Bản đồ trực tuyến
Các trang web bản đồ biết được sở thích của bạn là gì cũng như bạn làm gì.
Nhiều dịch vụ bản đồ trực tuyến mới có được thông tin đó bằng cách cho bạn
chia sẻ kinh nghiệm và suy nghĩ về những địa điểm bạn yêu thích - trong khu
vực bạn sống hoặc bên phía kia của địa cầu. Ta cùng xem 5 dịch vụ phổ biến:
Flagr, 43 Places, Platial, Plazes và Wayfaring.
Từ GMail
Các ứng dụng web sẽ như thế nào nếu bạn không kết nối được Internet? Mục
đích của API Gears mà Google đưa ra là để biến dữ liệu trực tuyến luôn sẵn có
mọi lúc, mọi nơi.
Dương Minh Đức CQ470604 CNTT- K47
13
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Các ứng dụng web sẽ như thế nào nếu bạn không kết nối được Internet? Mục
đích của API Gears mà Google đưa ra là để biến dữ liệu trực tuyến luôn sẵn có
mọi lúc, mọi nơi.
Nếu dùng ứng dụng web, bạn sẽ vấp phải một trở ngại chung: khi không nối
mạng (offline) thì bạn không thể lấy được dữ liệu. Nhưng một số ứng dụng đang
xoay chuyển vấn đề này.
Google tung ra Gears kèm với ứng dụng đầu tiên để áp dụng, đó là một phiên
bản Google Reader mới cho bạn đọc tin RSS offline. Các công ty khác cũng bắt
đầu sử dụng framework Gears; ứng dụng đầu tiên mà chúng tôi tìm thấy được là
công cụ Remember the Milk để theo dõi khối lượng công việc trực tuyến
(rememberthemilk.com).

Cả Google Reader và Remember the Milk đều đưa ra phương thức hỗ trợ offline
đơn giản như nhau. Bạn chỉ việc nhấn vào một biểu tượng mũi tên màu xanh lá
trên thanh công cụ ở đầu màn hình để tải về hoặc đệm dữ liệu mà bạn cần làm
việc offline. Một khi đã đồng bộ dữ liệu, bạn có thể ngắt kết nối và vẫn tiếp tục
làm việc, thậm chí nếu bạn đóng và mở lại trình duyệt. Khi có kết nối trở lại,
bạn nhấn vào biểu tượng mũi tên màu xanh dương ở cùng vị trí cũ và những
thay đổi của bạn ánh xạ lại vào bản trực tuyến.
Milk cũng gặp vấn đề tương tự. Xóa một tác vụ ở chế độ offline thì bạn không
có cách nào để phục hồi lại tác vụ đó mặc dù bạn có thể dễ dàng undo hành
động đó ở chế độ online.
Dương Minh Đức CQ470604 CNTT- K47
14
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Dù sao đi nữa, khi chạy offline với một ứng dụng Gears thì bạn nên lên kế hoạch
sử dụng. Bạn đừng hy vọng có thể bắt đầu công việc trong Reader mà không có
kết nối ban đầu. Với những ứng dụng Gears hiện thời bạn cần kết nối ban đầu và
chuyển tất cả chúng sang chế độ offline trước khi ngắt kết nối. Đây có thể là tùy
chọn tốt để đồng bộ tự động bất cứ khi nào bạn online.
Cho đến web Mail mạnh mẽ :
YAHOO MAIL
Yahoo Mail đưa ra những tính năng giống với một chương trình thư điện tử trên
máy tính, ví dụ có đầy đủ các phím tắt quen thuộc và khả năng dùng phím và để
chọn cùng lúc nhiều thư. Dù chỉ là bản thử nghiệm beta nhưng ứng dụng này
khá đẹp mắt và mạnh. Giao diện với vùng 3 cửa sổ tương tự như Outlook
Express của Microsoft và Thunderbird của Mozilla.
Yahoo Mail cũng bắt chước tính năng tab có trong nhiều trình duyệt, cho phép
mở nhiều thư trong một cửa sổ duy nhất và chuyển qua lại giữa chúng mà không
cần mở thêm cửa sổ mới. Bạn cũng có thể nhanh chóng duyệt chi tiết hộp thư
đến Inbox nhờ vào thanh cuộn quen thuộc hoặc phím .
Công cụ tìm kiếm của Yahoo Mail khá ấn tượng, "sờ" đến cả tập tin đính kèm

trong thư và hiển thị một đoạn nhỏ tài liệu trong đó có từ mà bạn tìm. Yahoo
Mail cũng tương tác một cách hợp lý với nút Back trên trình duyệt – đối với các
ứng dụng Ajax đây thường là điểm rắc rối vì khi nhấn nút này, chương trình liên
tục cập nhật một trang web. Ngược lại, Gmail giải quyết vấn đề này bằng cách
vô hiệu hóa nút Back, trong khi Zimbra cảnh báo nếu sử dụng nút này thì sẽ bị
"đẩy" ra khỏi chương trình.
Dương Minh Đức CQ470604 CNTT- K47
15
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
WINDOWS LIVE MAIL
Nếu không quen với các ứng dụng thư điện tử trên máy tính thì Windows Live
Mail của Microsoft có thể thích hợp với bạn, nhưng ứng dụng này có phần giống
với bản nâng cấp dịch vụ Hotmail hơn là một chương trình mới hoàn chỉnh.
Giống như Yahoo Mail, Live Mail cho phép thực hiện kéo thả thư và nhấn chuột
phải để in, chuyển tiếp và trả lời mà không cần mở chúng ra. Live Mail tập trung
vào các công cụ, cho phép người dùng thêm các biểu tượng vui (emotion), định
dạng thư điện tử và cũng tích hợp tính năng lịch làm việc, chống thư rác và tính
năng chống giả mạo địa chỉ.
Microsoft nhấn mạnh đây vẫn chỉ là bản tiền thử nghiệm. Trong bản beta kế
tiếp, Microsoft hứa hẹn hộp thư đến Inbox sẽ có thêm thanh trượt, tính năng
kiểm tra chính tả trực tiếp và trình đơn ngữ cảnh (nhấn phải chuột) được cải tiến.
2.2 Các công nghệ sử dụng trong AJAX
2.2.1 HTML
HTML (tiếng Anh, viết tắt cho HyperText Markup Language, tức là "Ngôn ngữ
Đánh dấu Siêu văn bản") 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 World Wide Web.
Đượ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ì. Phiên bản mới nhất của nó hiện là HTML 4.01. 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.
Dùng HTML động hoặc Ajax, có thể được tạo ra và xử lý bởi số lượng lớn các
công cụ, từ một chương trình soạn thảo văn bản đơn giản – bạn có thể gõ vào
ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG
phức tạp.
Dương Minh Đức CQ470604 CNTT- K47
16
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
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 email , hay một thiết bị không
dây như một chiếc điện thoại di động.
Tạo lập trang Web = HTML là chỉ cần đánh văn bản của bạn vào rồi chèn thêm
các ký hiệu đánh dấu, gọi là thẻ có dạng như sau:
<TAG>văn bản chịu tác động</TAG> Phần thẻ là một mã (thường chỉ có một
hoặc hai chữ) xác định hiệu ứng mà bạn yêu cầu. Ví dụ, cho thẻ nét đậm là <B>.
Cho nên nếu bạn muốn câu “Tìm Hiểu AJAX” xuất hiện theo kiểu chữ đậm
(bold), bạn phải đưa dòng sau đây vào tài liệu của mình:
<B>“Tìm Hiểu AJAX” </B>
Thẻ đầu tiên báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theo
bằng phông chữ đậm, liên tục cho đến thẻ <B>. Dấu gạch chéo (/) xác định đó là
thẻ kết thúc, và báo cho trình duyệt ngưng hiệu ứng đó.
HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic),
dấu đoạn văn bản (paragraph), tiêu đề, tên trang, liệt kê, liên kết, và nhiều thứ
nữa.
HTML động hay DHTML : (viết tắt tiếng Anh: 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: ngôn ngữ
đánh dấu HTML tĩnh, 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 và Document Object
Model (DOM).
XHTML (viết tắt của tiếng Anh Extensible HyperText Markup Language,
"Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng") 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 là
Khuyến cáo của World Wide Web Consortium (W3C) vào ngày 26 tháng 2,
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.
Dương Minh Đức CQ470604 CNTT- K47
17
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Chúng ta sẽ bàn về nó sâu hơn trong phần XML
2.2.2 CSS
Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading
Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng
ngôn ngữ HTML và XHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có
thể dùng cho XML, SVG, XUL v.v...
Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium
(W3C).
Thay vì đặt các thẻ qui định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay
trong nội dung của nó, bạn nên sử dụng CSS.
Ưu điểm:
Hạn chế tối thiểu việc làm rối mã HTML của trang web bằng các thẻ quy

định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu...), khiến
mã nguồn của trang web được gọn gàng hơn, tách nội dung của trang web và
định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.
Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải
lặp lại việc định dạng cho các trang web giống nhau.
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 qui đị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 qui định ở trong chỉ một thẻ HTML, được qui đị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 ra 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 qui định trong một thẻ HTML cụ thể)
* Internal Style (Style được qui định trong phần <HEAD> của một trang
HTML)
Dương Minh Đức CQ470604 CNTT- K47
18
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
* External Style (style được qui định trong file CSS ngoài)
* Browser Default (thiết lập mặc định của trình duyệt)
Cú pháp của CSS gồm ba thành phấn:

Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
Thuộc tính (Property)
Giá trị (Value)
Thể hiện của cú pháp CSS
Code:
Selector {
Property1: Value1;
Property2: Value2;
}
Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định
danh duy nhất của phần tử.
2.2.3 DOM - Document Object Model
DOM là chữ viết tắt từ tiếng Anh Document Object Model ("Mô hình Đối
tượng Tài liệu"), là một giao diện lập trình ứng dụng (API). Thường thường
DOM, có dạng một cây cấu trúc dữ liệu, được dùng để truy xuất các tài liệu
dạng HTML và XML. Mô hình DOM độc lập với hệ điều hành và dựa theo kỹ
thuật lập trình hướng đối tượng để mô tả tài liệu.
Ban đầu, chưa có chuẩn thống nhất nên các thành phần trong một tài liệu HTML
mô tả bằng các phiên bản khác nhau của DOM được hiển thị bởi các chương
trình duyệt web thông qua JavaScript. Điều này buộc World Wide Web
Consortium (W3C) phải đưa ra một loạt các mô tả kĩ thuật về tiêu chuẩn cho
DOM để thống nhất mô hình này.
Mặc dù một tài liệu hay văn bản có cấu trúc chặt chẽ (well-structured document)
luôn luôn có thể được mô hình hóa bằng một cấu trúc dạng cây, DOM không có
giới hạn về cấu trúc dữ liệu của một tài liệu.
Dương Minh Đức CQ470604 CNTT- K47
19
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Hầu hết các bộ phân tích XML (XML parsers) (ví dụ: Xerces) và bộ xử lí XSL
(ví dụ: Xalan) đã được phát triển để sử dụng cấu trúc cây này. Những hiện thực

như vậy đòi hỏi toàn bộ nội dụng của một văn bản phải được phân tích và lưu
trong bộ nhớ. Vì thế, DOM được sử dụng tốt nhất trong các ứng dụng mà trong
đó các thành phần của tài liệu có thể được truy xuất và thao tác một cách ngẫu
nhiên. Với các ứng dụng dựa trên XML, bao gồm yêu cầu đọc/ghi có chọn lọc
cho mỗi lần phân tích (one-time selective read/write per parse), DOM cho thấy
được sự tối ưu về mặt bộ nhớ. Trong các trường hợp đó thì giao diện lập trình
ứng dụng SAX trở nên rất tiện lợi về cả mặt tốc độ và bộ nhớ.
Các phiên bản mô hình DOM được xếp theo cấp độ hay bậc (level). Hiện tại thì,
bản chi tiết kĩ thuật hiện hành của DOM đang ở cấp độ 2. Tuy vậy một số ở bản
mô tả chi tiết kĩ thuật cấp độ 3 đang là khuyến khích sử dụng của W3C.
Cấp độ 0
Bao gồm mọi chi tiết DOM theo qui định của từng nhà phát triển riêng biệt
tồn tại trước khi DOM cấp độ 1 ra đời. Ví dụ: document.images,
document.forms, document.layers, và document.all. Chú ý: đây là mô tả chi tiết
kĩ thuật chính thức bởi W3C hơn là một tham khảo đến những thứ tồn tại trước
khi xảy ra quá trình chuẩn hóa.
Cấp độ 1
Cách duyệt qua tài liệu (cấu trúc cây) của DOM (HTML và XML) và thao tác
nội dung (bao gồm việc thêm thành phần). Các thành phần riêng cho HTML
cũng được đưa vào.
Cấp độ 2
Hỗ trợ không gian tên XML, khung nhìn có lọc (filtered views) và các sự kiện
DOM.
Cấp độ 3
Nhằm nâng cao các khả năng của DOM, cấp độ 3 chứa 6 bản mô tả chi tiết kĩ
thuật khác nhau: 1) the DOM Level 3 Core; 2) the DOM Level 3 Load and Save;
3) the DOM Level 3 XPath; 4) the DOM Level 3 Views and Formatting; 5)
DOM Level 3 Requirements; and 6) the DOM Level 3 Validation.
2.2.4 XML HTTP REQUEST
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ả.
Dương Minh Đức CQ470604 CNTT- K47
20
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
XMLHttpRequest
Các đối tượng XmlDocument và XMLHttpRequest không phải là các chuẩn
DOM mở rộng của trình duyệt web nhưng vẫn được hỗ trợ bởi rất nhiều trình
duyệt. Các đối tượng đều dựa trên ActiveX hay các đối tượng JavaScript. Các
trình duyệt khác đều có thực thi các đối tượng trên có các chức năng tương
đương và các lời gọi hàm API.
Mục đích chủ yếu của tối tượng XMLHttpRequest là cho phép Js 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ì toà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 hết tất cả 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 sử 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 hoàn toà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 trong các trình duyệt như Mozilla , Opera ,
Chrome v.v…
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();
}
else {
if (window.ActiveXObject) {
Dương Minh Đức CQ470604 CNTT- K47
21
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
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.");
}

Lưu y : Do tính năng anti-cross domain của đối tượng xhr để nhằm chặn các
request độc hại từ ngoài server khác tên miền gửi đến. Url luôn là url tương đổi .
Nếu sử dụng Url tuyệt đổi xhr sẽ không được thực hiện.
Thử hình dung khi người khác sử dụng các đoạn mã Javascript của bạn
trên site của họ, cũng như sử dụng tài nguyên của bạn. Chúng ta hoàn toàn có
thể bị kiểm soát nếu không có anti-cross domain.
Phương thức của đối tượng XMLHttpRequest
Phương thức Y nghĩa
Abort() Dừng yêu cầu hiện tại
getAllResponseHeaders() Trả về header dạng chuỗi
getresponseHeader(x) Trả về header X dạng chuỗi
Open(method , url , a) 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 yê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.
Xét một ví dụ gửi một yêu cầu tới server
Var name = “up”
Dương Minh Đức CQ470604 CNTT- K47
22
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
Khi đã khởi tạo được một đối tượng XMLHttpRequest đặt là xhr
xhr.open(“GET” , “checkname.php?name=” + name , true )
xhr.send(null)
xhr.onreadystatechange = Tên hàm;
Đặc biệt các trình duyệt thông thường đều lưu trữ cache để tiết kiệm quá trình
tải nạp. Nhưng đối với Ajax thì đó là một khó khăn do vậy khi sử dụng Ajax

chúng ta cần ngắt bỏ cache của trình duyệt. điều này có thể thể hiện bằng 3 cách.
Dùng Pragma:no-cache hoặc Cache-Control: must-revalidate
1. setRequestHeader(“Pragma” , “no-cache”)
2. Trong file checkname.php có thể đặt hàm Header(“Pragma: no-cache”)
3. Đặt một request tring random cho URL
myNocache = parseInt(Math.random()*9999999999)
xhr.open(“GET” , “checkname.php?name=” + name + “&nocache=” +
myNocache , true )
Thuộc tính của đối tượng XMLHttpRequest
Thuộc tính Y nghĩa
Onreadystatechange Dùng để đáp ứng một công việc nào đó
khi thuộc tính ReadyState thay đổi
readyState 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 )
2 : Đã nạp xong ( Loaded )
3 : Tương tác ( Interactive )
4 : Hoàn thành ( Complete )
ResponseText Dữ liệu trả về dạng string thuần
ResponseXML Dữ liệu trả về dạng XML
Status Mã trạng thái HTTP Response
StatusText Thông điệp trả về dạng chuỗi thông báo
kém thêm mã trạng thái HTTP Response
Hàm callback()
Dương Minh Đức CQ470604 CNTT- K47
23
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
xhr.onreadystatechange = Tên hàm;
Ta vừa thực hiện gán một hàm sẽ liên tục được gọi khi thuộc tính readystate
biến đổi. Hãy xem hàm này nên làm gì. Đầu tiên, hàm cần kiểm tra trạng thái

của request. Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã nhận
được response đầy đủ từ server và đó là dấu hiệu tốt để bạn tiếp tục xử lý nó.
if (httpRequest.readyState == 4) {
// không xảy ra vấn đề gì và bạn đã nhận được response
} else {
// chưa sẵn sàng
}
Tiếp theo cần kiểm tra mã trạng thái của HTTP server response. Tất cả
các mã có thể thàm khảo ở site của W3C. Trong bài viết này, chúng ta
quan tâm đến response 200 (OK).
if (httpRequest.status == 200) {
// trạng thái response trả lại dấu hiệu tốt!
} else {
// có vấn đề trong việc tiếp nhận và xử lý request,
// ví dụ 404 (Not Found)
// hay 500 (Internal Server Error)
}
Bảng mã trạng thái Response :
Dương Minh Đức CQ470604 CNTT- K47
24
Chuyên đề thực tập Tìm hiểu về AJAX và xây dựng Website ứng dụng AJAX
statusText ( status + description ) Mô tả
200 - OK Yêu cầu hoàn thành.
204 - No content Văn bản trống.
301 - Moved Premanently Tài nguyên đã bị di chuyển.
401 - Not Authorized Yêu cầu chưa được chứng thực.
403 - Forbidden Từ chối đáp ứng.
404 - Not Found Không tồn tại.
408 - Request Timeout Yêu cầu không hoàn thành do vượt
quá thời gian kết nối cho phép.

500 - Server Error Máy chủ gặp sự cố.
Dương Minh Đức CQ470604 CNTT- K47
25