Công nghệ ajax

Tài liệu tham khảo kỹ thuật công nghệ, chuyên ngành tin học Công nghệ ajax

CÔNG NGHỆ AJAX

Mở Đầu

Bạn đang sử dụng Gmail? hay Google Map? Bạn yêu thích tính năng của Google Suggest? hay ứng dụng web Ta-da List, Backpack, BaseCamp của 37Signals? hay các tính năng tiện dụng của Flickr?

Trên đây là một số các ứng dụng dịch vụ web nổi lên trong thời gian gần đây như là những ứng dụng không chỉ giàu tính năng mà còn có tính chất "cách mạng" trong lịch sử phát triển của các ứng dụng web Điểm chung của các dịch vụ web này là gì? Câu trả lời là những tính năng và cách thức nó tương tác với người dùng: rất tiện lợi và nhanh chóng đến nỗi bạn gần như tưởng mình đang sử dụng một phần mềm chứ không phải đang xem trang web.

Công nghệ đứng đằng sau các dịch vụ này là AJAX, viết tắt của Ansynchronous JAvascript and XML ("ansynchronous" có nghĩa là "không đồng bộ"), hay Advanced JAvascripting and XML Cái tên Ajax được nhắc đến lần đầu tiên bởi Adaptive Path và nhanh chóng được chấp nhận rộng rãi trong cộng đồng những người phát triển ứng dụng web và giờ đây có lẽ là cái tên được nhắc đến nhiều nhất và được xem là một công nghệ hứa hẹn sẽ mở ra thời kỳ mới của các ứng dụng web (mặt khác, cũng có rất nhiều ý kiến trái ngược nhau về tên gọi này)

Vậy Ajax là gì? Vì sao nó làm được những điều mà các công nghệ trước đây không thực hiện được? Cơ chế hoạt động của nó? Nó có phức tạp không? Làm thế nào để ứng dụng nó cho các sản phẩm của bạn? Ajax có điểm yếu nào không? Và khi nào nên sử dụng Ajax?

Trong bài viết này, em sẽ tổng hợp những gì em tìm hiểu được về công nghệ AJAX gồm cả những điểm mạnh và điểm yếu của nó, đồng thời em đã tạo ra một ứng

dụng minh họa cho việc áp dụng công nghệ Ajax với đầy đủ mã nguồn và giải thích chi

tiết từng bước để áp dụng công nghệ này.

Chương 1: GIỚI THIỆU VỀ CƠ SỞ THỰC TẬP1.1 Lịch sử thành lập và phát triển của công ty qua các giai đoạn.

- Nǎm 1974: Trạm máy tính của Ngành Bưu điện ra đời ở miền Bắc Trạm máy tính thuộc vụ Kế toán và Thống kê được thành lập theo quyết định số 539/QĐ, ngày 02 tháng 07 nǎm 1974, do quyền Tổng cục trưởng Tổng cục Bưu điện Vũ Vǎn Quí đã ký, có nhiệm vụ tính toán các số liệu theo nhiệm vụ của Vụ Kế toán và Thống kê, giúp các cơ quan, xí nghiệp thuộc Tổng cục trong công tác tính toán Ra đời trong hoàn cảnh chiến tranh, những ngày đầu chỉ có 07 cán bộ công nhân làm việc với các máy điện cơ cá nhân của Cộng Hoà Dân Chủ Đức để thống kê số liệu cho Ngành

- Nǎm 1976: Thành lập Trung tâm máy tính Ngành Bưu điện:Một trong những Trung tâm máy tính đầu tiên của cả nước

-Từ 1979 đến nay:

• Thống nhất tổ chức máy tính toàn Ngành Bưu điện • Thay đổi tổ chức của Trung tâm Máy tính

• Trung tâm Thống kê và Tính toán Bưu điện ra đời

• Công ty Điện toán và Truyền số liệu chính thức được thành lập ngày 26-11-1990.

• Ngày 28 tháng 11 nǎm 1995, thành lập Trung tâm Điện toán và Truyền số liệu khu vực I (VDC1) có trụ sở đặt tại 75 Đinh Tiên Hoàng (HN) và Trung tâm Điện toán và Truyền số liệu khu vực III (VDC3) có trụ sở đặt tại 12 Lê Thánh Tông (Đà Nẵng)

• Ngày 25 tháng 11 nǎm 1997, thành lập Trung tâm Dịch vụ Gia tǎng Giá trị (VASC) trụ sở tại 258 Bà Triệu

Hiện nay Công ty VDC đang quản lý và khai thác mạng trục Internet Việt Nam kết nối trực tiếp với xa lộ Internet quốc tế qua 3 cổng quốc gia đặt tại Hà Nội, Thành phố Hồ Chí Minh và Đà Nẵng

1.2 Tổ chức bộ máy quản lý của công ty1.2.1 Sơ đồ tổ chức công ty

1.2.2 Các phòng ban và chức năng

- Phòng Hành Chính: Phòng Hành Chính có chức năng về công tác văn thư - lưu trữ, lễ

tân, đối ngoại, thông tin tuyên truyền, nội vụ và làm đầu mối thông tin phục vụ cho hoạt động sản xuất kinh doanh của Công ty.

- Phòng Kế Hoạch: Có chức năng về công tác Kế hoạch; Quản lý tài sản; Cung ứng vật

- Phòng Kế Toán Tài Chính: Có chức năng về công tác kế toán, thống kê, tài chính

của Công ty.

- Phòng Đầu Tư Phát Triển: Có chức năng về công tác đầu tư xây dựng cơ bản, phát

triển sản xuất.

- Phòng Tổ Chức Lao Động: Có chức năng về công tác tổ chức bộ máy, nhân sự, tiền

lương, đào tạo, thi đua, an ninh an toàn, chính sách đối với người lao động.

- Ban Biên Tập Báo Điện Tử: Có chức năng về thông tin quảng bá.

- PhòngTính Cước: Có chức năng về công tác tính cước và các vấn đề liên quan tới

việc tính cước phí các loại hình dịch vụ trên mạng của toàn Công ty.

- Phòng Nghiên Cứu Ứng Dụng Phần Mềm: Là bộ phận sản xuất, có chức năng về

công tác nghiên cứu công nghệ tin học và sản xuất các sản phẩm tin học.

- VDCA: Ban Dự án VDCA có chức năng về quản lý hoạt động, thực hiện và hỗ trợ

thực hiện các dự án được Công ty giao.

- Phòng Tích Hợpvà Phát Triển Hệ Thống: Có chức năng chính trong công tác

nghiên cứu triển khai công nghệ, tư vấn, xây dựng và phát triển các giải pháp tích hợp phục vụ hoạt động sản xuất kinh doanh và điều hành quản lý của Công ty.

- Phòng Danh Bạ: Có Chức năng:

1 Thực hiện các công việc về cơ sở dữ liệu danh bạ toàn quốc trên Web;2 Sản xuất đĩa CD-ROM danh bạ;

3 Phát triển các dịch vụ liên quan đến danh bạ;

4 Chủ động thực hiện các quan hệ hợp tác phục vụ cho các nhiệm vụ trên trên.;5 Thực hiện các nhiệm vụ khác do Giám đốc Công ty giao.

-Phòng Quản Lý Tin Học: Quản lý Khoa học Công nghệ và Sản xuất Kinh doanh trong

lĩnh vực tin học.

-Ban Quản Lý Chất Lượng: Có chức năng về công tác quản lý chất lượng trong các hoạt

động của hệ thống sản xuất, kinh doanh và quản lý của Công ty.

1.3 Các sản phẩm - Dịch vụ chính của Công ty VDC

VNN1260,VNN1260-P,VNN1267,VNN1268,VNN1269,VNN999,VNN trực

tiếp,Mega VNN,Wifi VNN,VPN VNN,Frame Relay,X25, Gọi 1717, FONE

VNN,Email,Lưu trữ website,Thuê chỗ đặt máy chủ,Thương mại điện tử,Dịch vụ trực tuyến, Truyền báo,chế bản,Tin học, CNTT, Tư vấn, Đào tạo, Xuất nhập khẩu

• Phần mềm hệ thống và quản trị mạng với UNIX (Sun Solaris, HP-UX), Microsoft Windows, SQL, HP Open View for Network Node Management Solution, Netscape Web/Mail Server, Raptor firewall etc

Bên cạnh đó là mối quan hệ chặt chẽ với các nhà cung cấp dịch vụ hàng đầu thế giới:

• Telstra (Australia); Global One Group; Alcatel (France); Nortel (Canada); NTTCommunication, KDD, (Japan), Korea Telecom (RO Korea); Singapore Telecom; Microsoft, Oracle (USA); Hongkong Telecom (Hongkong); InfoAccess,

Tất cả vì một mục tiêu: cung cấp những sản phẩm và dịch vụ tốt nhất cho khách hàng

-Tầm nhìn kinh doanh

Xuất phát từ đặc điểm hoạt động trong lĩnh vực công nghệ thông tin, chất lượng dịch vụ và tốc độ là hai yếu tố quan trọng trong kinh doanh Ngay từ khi thành lập năm 1989 công ty đã không ngừng cố gắng để có thể cung cấp dịch vụ dựa trên triết lý kinh

doanh "Uy Tín và Tốc độ"

Hoà cùng với xu hướng tự do hoá trong nền kinh tế cũng như trong viễn thông trên thế giới và tại Việt nam, trong các năm qua công ty đã không ngừng phấn đấu thay đổi trong phương pháp và hình thức quản lý để đáp ứng được sự thay đổi, đứng vững và phát triển trên thị trường.

Năm 1999 đánh dấu việc xây dựng "Văn hoá VDC" với mục tiêu tạo động lực

thúc đẩy tinh thần làm việc, tính tự chủ sáng tạo, tinh thần trách nhiệm cao cho toàn bộ cán bộ nhân viên trong Công ty, cải thiện tinh thần thái độ phục vụ đối với khách hàng cũng như cải thiện các qui trình qui định kinh doanh.

- Chiến lược kinh doanh

• Luôn giữ vững và phát triển mối quan hệ với khách hàng, đối tác, bạn hàng: • Phát triển và mở rộng hệ thống hỗ trợ dịch vụ (24h/24h, 7 ngày trong tuần) thống

nhất trên toàn quốc thông qua số điện thoại truy nhập 1801260, các hoạt động chăm sóc khách hàng được thực hiện trên tất cả phương tiện như điện thoại, fax, email và hỗ trợ trực tuyến thông qua Website hỗ trợ khách hàng :

• Không ngừng phát triển đa dạng hoá các dịch vụ cung cấp, tăng cường cung cấp các giải pháp tích hợp trọn gói cho khách hàng đáp ứng mọi nhu cầu, mọi khả năng chi phí, mọi nơi và mọi lúc

• Nâng cao năng lực mạng lưới thông qua việc áp dụng các công nghệ mới, đảm bảo chất lượng dịch vụ cung cấp, xây dựng một "Hệ thống mạng khu vực" không dừng lại trong Việt nam mà mở rộng các điểm truy nhập trên thế giới tập trung vào khu vực Châu á, Mỹ

• Hoàn thiện và phát triển "Văn hóa VDC": Xây dựng "Văn hóa VDC" là một yếu

tố quan trọng dẫn đến sự thành công của Công ty trong thời gian qua, đây tiếp tục

là một chiến lược quan trọng của Công ty nhằm tạo ra một phong cách làm việc

mới - "Phong cách VDC"

• Đa dạng hóa, mở rộng quan hệ với đối tác; mở rộng phạm vi cung cấp dịch vụ: Hiện nay Công ty đã có quan hệ cung cấp dịch vụ với nhiều nhà cung cấp dịch vụ quốc tế khác nhau, phạm vi cung cấp dịch vụ hơn 150 nước trên thế giới Trong các năm tới công ty sẽ tiếp tục mở rộng quan hệ hợp tác với các đối tác trong và ngoài nước mở rộng phạm vi cung cấp dịch vụ, phấn đấu trở thành nhà cung cấp dịch vụ Viễn thông có uy tín trong khu vực Châu á - Thái Bình Dương.

1.5 Kết quả kinh doanh

Dưới đây là một số biểu đồ về tăng trưởng khách hàng, doanh thu, thị trường, của VDC

Chương 2: CÔNG NGHỆ AJAX2.1 Giới thiệu về công nghệ AJAX

TỪ NHỮNG GIỚI HẠN CỦA CÁC ỨNG DỤNG WEB HIỆN TẠI…

Chỉ cách đây vài năm, khi mà các dịch vụ web bùng nổ, người ta đã mơ tưởng đến một lúc nào đó tất cả các ứng dụng mà bạn sử dụng sẽ là các ứng dụng web thay vì các phần mềm chạy độc lập trên các máy tính đơn lẻ 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,…), 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ờ, giấc mơ đó vẫn chưa thành sự thật và người ta bắt đầu nghĩ rằng, có lẽ nó sẽ không bao giờ trở thành sự thật Tại sao vậy?

Một trong những giới hạn quan trọng của các ứng dụng web hiện tại là cách thức nó tương tác với người dùng Khác với các phần mềm chạy độc lập ở máy khách có những khả năng dường như vô tận trong cách thức tương tác với người dùng, các ứng dụng web bị giới hạn bởi chính nguyên lý hoạt động của nó: tất cả các giao dịch phải

thực hiện thông qua phương thức giao dịch HTTP (HyperText Transport Protocol -

Giao thức truyền tải qua các siêu liên kết) Để hiểu tại sao tính chất này lại trở thành một rào cản của các ứng dụng web, hãy phân tích cách thức hoạt động của các dịch vụ web

hiện tại xử lý một tác vụ đơn giản như xóa email trong Yahoo! Mail:

Bạn đang ở trong hòm thư "Inbox" của Yahoo! Mail Bạn chọn một số email và nhấn nút Delete để xóa chúng (chuyển vào thùng rác) Yahoo! Mail trước hết sẽ lấy

danh sách các email bạn chọn (quá trình này chạy trên máy của bạn), sau đó gởi danh sách này cùng với mã lệnh qua một siêu liên kết đến máy chủ của Yahoo (nếu bạn muốn biết đó là địa chỉ nào, nó được xác định qua tham số "action" của thẻ <form></form>) yêu cầu máy chủ thực hiện tác vụ xóa đối với các email đó và gửi lại trang web Yahoo! mail với nội dung mới Trong khoảng thời gian yêu cầu được gửi đi đến lúc bạn nhận

được trang web mới, những gì bạn phải làm là … ngồi đợi nhìn màn hình trình duyệt trắng bốc (nếu bạn sử dụng ADSL thì thời gian này cũng không đến nỗi - khoảng từ 2 đến 3 giây, còn nếu bạn dùng dial-up thì…) Và bạn cũng sẽ phải trải qua một quá trình

tương tự đối với các tác vụ khác, thậm chí nếu bạn chỉ muốn chuyển từ thư mục "Inbox" (hòm thư đến) sang "Sent" (hòm thư đi).

Bạn sẽ không bao giờ phải trải qua việc chờ đợi trên khi sử dụng các phần mềm chạy trên máy tính đơn lẻ: bạn không bao giờ thấy phần mềm một khi đã được mở ra lại phải "biến mất" vài trong vài giây để cập nhật dù chỉ là một tác vụ đơn giản nhất, và ngay cả khi phần mềm cần thời gian xử lý một tác vụ nào đó thì bạn vẫn thấy nó ở đó, và nó báo cho bạn là nó đang xử lý tác vụ của bạn Nếu xét về khía cạnh khả năng ứng dụng trong các tác vụ hàng ngày thì hạn chế trên của các ứng dụng web là không thể chấp nhận được.

Tất nhiên, bên cạnh rào cản về cách thức tương tác, các ứng dụng web còn vấp phải nhiều giới hạn khác (ví dụ như bản thân việc phải hoạt động dựa trên các trình duyệt đã là một rào cản quan trọng) nhưng một khi chưa giải quyết được vấn đề trên thì các ứng dụng web sẽ không bao giờ có thể thay thể cho các phần mềm độc lập.

… ĐẾN HIỆN TƯỢNG GMAIL

Nếu bạn đã từng sử dụng Gmail, bạn sẽ nhận thấy Gmail đem lại cho bạn cái

cảm giác đang sử dụng một phần mềm hơn là một dịch vụ web: sử dụng bàn phím

(không phải chuột) để chọn một hoặc nhiều email, nhấn nút "Archive" và ngay lập tức

các email được bỏ vào hộp lưu trữ Bạn gần như không phải đợi - trang Gmail vẫn ở đó Và nếu có email mới, bạn sẽ được thông báo ngay mà không cần phải tải lại trang web.

Gmail ra đời và nhanh chóng trở thành một hiện tượng - không chỉ ở chỗ nó là dịch vụ webmail đầu tiên cho miễn phí 1GB dung lượng mà còn ở chỗ cách nó thay đổi quan niệm truyền thống về cách thức thực hiện tương tác với người dùng của các ứng dụng web.

2.2 Quá trình phát triển công nghệ Web- Nguyên nhân xuất hiện công nghệ AJAX.

Trước khi tìm hiểu về Ajax, chúng ta cùng xem xét quá trình phát triển các công nghệ Web, nguyên nhân và hoàn cảnh xuất hiện công nghệ Ajax 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 đơ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:

2.2.1 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.

2.2.2 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 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.

2.2.3 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.

2.2.4 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 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ụng2 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ừng5 Phát triển ứng dụng dễ dàng và nhanh chóng

6 Phần mềm có thể chạy trên nhiều thiết bị7 Giao diện ứng dụng phong phú

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.

Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0 Hàng loạt công nghệ mới được phát triển nhằm làm cho ứng dụng trên web mạnh hơn, nhanh hơn và dễ sử dụng hơn, được xem là nền tảng của Web 2.0.

Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng.

+ Cung cấp nội dung

Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin) Có nhiều giao thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất cả đều dựa trên XML

Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính năng của website hay cho phép người dùng tương tác.

+ Dịch vụ web

Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0 Có hai loại giao thức chính là REST và SOAP REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái Với cả hai loại, dịch vụ web đều được gọi qua API Ngôn ngữ chung của dịch vụ web là XML, nhưng có thể có ngoại lệ.

Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties Broadcasting Protocol do Chris Dockree phát triển Giao thức này cho phép các đối tượng ảo (tồn tại trên web) tự biết chúng "là gì và có thể làm gì”, nhờ vậy có thể tự liên lạc với nhau khi cần.

+ Phần mềm máy chủ

Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở background Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn.

Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm hai loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng "gắn thêm" cho máy chủ web, có sử dụng giao tiếp API.

2.3 Khái niệm AJAX2.3.1 AJAX là gì?

AJAX viết tắt cho "Asynchronous JavaScript and XML", nghĩa là "JavaScript và

XML không đồng bộ" Từ Ajax được ông Jesse James Garrett tạo ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các

chương trình duyệt từ 10 nãm trước Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

• HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin

• Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị • Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy

chủ web (Mặc dù, việc trao đổi này có thể được thực hiện với nhiều định dạng như HTML, văn bản thường, JSON và thậm chí EBML, nhưng XML là ngôn ngữ thường được sử dụng)

• XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML

Giống như DHTML, LAMP hay SPA, Ajax tự nó không phải là một công nghệ mà là một thuật ngữ mô tả việc sử dụng kết hợp một nhóm nhiều công nghệ với nhau Trong thực tế, các công nghệ dẫn xuất hoặc kết hợp dựa trên Ajax như AFLAX cũng đã xuất hiện.

2.3.2 AJAX hoạt động như thế nào?

Từ lâu, mọi người đã tưởng tượng ứng dụng máy tính rồi sẽ được lưu và chạy hoàn toàn trên web thay vì nằm bó buộc trong ổ cứng Dù vậy, viễn cảnh đó vẫn chưa thể xảy ra do ứng dụng web bị hạn chế bởi nguyên lý rằng tất cả các thao tác phải được thực hiện thông qua HTTP (HyperText Transfer Protocol - Giao thức truyền tải qua siêu liên kết) Những hoạt động của người sử dụng trên trang web sẽ tạo ra một yêu cầu HTTP tới server Máy chủ thực hiện một số khâu xử lý như lấy lại dữ liệu, tính toán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trang HTML hoàn chỉnh tới máy khách Về mặt kỹ thuật, phương pháp này nghe có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực hiện vai trò của nó thì người dùng sẽ làm gì? Tất nhiên là chờ đợi.

Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian - cơ chế xử lý AJAX - giữa máy khách và máy chủ Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình "đi lại" của thông tin và giảm thời gian phản ứng Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát - dấu hiệu cho thấy máy chủ đang thực hiện nhiệm vụ Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng.

"Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý AJAX, thay vì tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy chủ", Jesse James Garrett đã ghi trong bài viết đầu tiên định nghĩa về thuật ngữ này "Nếu cần gì từ server, như tải về bổ sung mã giao diện hay nhận dữ liệu mới, AJAX sẽ truyền yêu cầu tới máy chủ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người dùng với ứng dụng web".

Có thể mô tả cách thức hoạt động của Ajax như sau:

• Ajax thực hiện tương tác với máy chủ bằng cách sử dụng đối tượng XMLHttpRequest, nhận kết quả về dưới dạng XML và phân tích kết quả bằng công nghệ DOM

• Tương tác giữa Ajax và giao diện người dùng được thực hiện thông qua các mã Javascript và XHTML + CSS

Phân tách và làm việc với XML

Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest Ở các ứng dụng web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả response chứa các thông tin dưới dạng HTML và CSS, trang HTML này sẽ thay thế trang cũ 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.

Dưới đây là: Mô hình tương tác trong một ứng dụng Web truyền thống:

Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp này Khi đó, các yêu cầu gửi resquest và nhận response do Ajax Engine thực hiện Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi trả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị.

Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang

Mặt khác, sự kết hợp của các công nghệ web như CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp Đây là những lợi ích hết sức thiết thực mà Ajax đem lại.

Có thể nhìn vào 2 hình vẽ để so sánh hai mô hình ứng dụng Web: truyền thống và sử dụng Ajax.

Còn đây là mô hình tương tác trong một ứng dụng Web dùng Ajax:

Rõ ràng điểm khác biệt là thay vì phải tải cả trang web thì với AJAX ta chỉ cần tải về phần của trang Web muốn thay đổi Điều này giúp cho ứng dụng web của phản hồi nhanh hơn, thông minh hơn Ngoài ra, điểm đặc biệt quan trọng trong công nghệ Ajax nằm ở chỗ Asynchronous - bất đồng bộ - tức là gửi yêu cầu của mình tới server và tiếp tục thực thi tác vụ hiện tại mà không cần chờ trả lời Khi nào server xử lý xong yêu cầu, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi cần thiết

2.4 Các công nghệ AJAX

AJAX là một tập hợp các công nghệ bổ sung lẫn nhau JavaScript có vai trò chất keo kết dính các ứng dụng lại với nhau Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model, tạo và tổ chức biểu diễn dữ liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và bàn phím.

2.4.1 Các công nghệ trong AJAX - CSS 2.4.1.1 CSS

Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc.

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, 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ỡ, 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, stylesheet 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, stylesheet cung cấp một “kho chứa” các giao diện xác định trước có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất.

CSS định dạng một trang web theo ba cách :

1 Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)2 Định nghĩa trong một trang web (Internal Style Sheet).

3 Định nghĩa thành một file CSS riêng (External Style Sheet) Trang web của chúng ta sẽ tham chiếu đến file CSS này.

Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn - selector và phần khai báo - style declaration Selector đặc tả các phần tử được định dạng và bố trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng 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 đỏ.

Có thể khai báo thuộc tính CSS như sau:

h1 {color: red}

2.4.1.2 Các ưu điểm của CSS trong thiết kế web

a CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.

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.

b CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí.

c Có thể định nghĩa nhiều style vào một thẻ HTML

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.

d 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 của một trang HTML)• External Style (style được qui định trong file CSS ngoài)

• Browser Default (thiết lập mặc định của trình duyệt)

2.4.1.3 Cú pháp cơ bản của CSS

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

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ử Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web.

a External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng)Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK> Thẻ <LINK> được đặt bên trong thẻ <HEAD>.

<link rel="stylesheet" type="text/css"href="mystyle.css" />

b Internal Style Sheet (định nghĩa các style sheet ngay trong trang web)

Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng

Internal Style Sheet Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.

<style type="text/css">hr {color: sienna}p {margin-left: 20px}

body {background-image: url("images/back40.gif")}</style>

c 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>

2.4.1.4 Các thuộc tính của CSS Style

Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu Một phần text của một phần tử có thể được quy định theo các thuộc tí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 paragraph:

.robotic{font-size: 14pt;

font-family: courier new, courier, monospace;font-weight: bold;

color: gray;}

2.4.2 Công nghệ trong AJAX - Javascript

JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống C JavaScript được biết dưới dạng một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng.

Kiểu tự do nghĩa là các biến không được khai báo cụ thể như string, integer, hay object, và các biến giống nhau có thể được gán bới các kiểu khác nhau Ví dụ, đoạn mã sau là hợp lệ:

var x=3.1415926;x='pi';

Biến x lúc đầu được định nghĩa là giá trị số và sau đó được gán lại bởi giá trị xâu kí tự Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhị phân có thể thực thi được, và nó được thực thi trực tiếp, cụ thể là qua các trình duyệt Khi triển khai một ứng dụng JavaScript, ta đặt mã nguồn trên web server, và mã nguồn này được truyền trực tiếp qua Internet tớI web browser.

Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật toán và các tác vụ JavaScript cơ bản hỗ trợ các kiểu số - number, string, date và time, array, các biểu thức toán học được xử lí trong văn bản, và các hàm toán học như các hàm

lượng giác và bộ tạo số ngẫu nhiên Hoàn toàn có thể định nghĩa cấu trúc một đối tượng bằng JavaScript, điều này mang đến nguyên lý cơ bản cho lập trình và để viết lên nhưng đoạn mã phức tạp.

Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt, gồm CSS, DOM, và các đốI tượng XMLHttpRequest, được coi là các phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau.

Trong chồng công nghệ của Ajax, JavaScript là chất kết dính các thành phần lại với nhau.

2.4.3 Các công nghệ trong AJAX - DOM2.4.3.1 DOM

Document Object Model (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.

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, paragraph, list, 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.

2.4.3.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.

<link rel='stylesheet' type='text/css' href='hello.css' /><script type='text/javascript' src='hello.js'></script></head>

<p id='hello'>hello</p><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ồnJavaScript 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.

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);

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.

2.4.3.3 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ư,

var children=empty.childNodes;for (var i=0;i<children.length;i++){

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() 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 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.

2.4.3.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út:

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";

Sử dụng 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>";}

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.

Như vậy, các bạn đã nắm được 2 công nghệ dùng trong AJAX: CSS và DOM Trong các phần tiếp theo chúng ta cùng nhau thảo luận về: XML và việc truyền dữ liệu bất đồng bộ (Giới thiệu về XML và XSLT, XMLHttpRequest) và có lẽ cũng nên nói qua một chút về JS (JavaScript).

2.4.4 Các công nghệ trong AJAX - XML và việc truyền dữ liệu bất đồng bộ - XML.

Tuy nhiên, trở ngại lớn nhất đối với người dùng SGML là chúng quá phức tạp và tiêu tốn nhiều công sức trong việc hiện thực Vì vậy hầu hết người dùng cá nhân và doanh nghiệp đều không thể đáp ứng những yêu cầu để sử dụng công nghệ hữu dụng này.

Năm 1996, Word Wide Web Consortium (W3C) khởi động kế hoạch xây dựng một ngôn ngữ được gọi là XML (eXtensible Markup Language – ngôn ngữ đánh dấu mở rộng) kết hợp được sức mạnh của SGML và tính phổ dụng của HTML Sự xuất hiện của XML mang lại cho người dùng sức mạnh của SGML với tốn kém ít hơn và không phải đối mặt với sự phức tạp của SGML Hơn nữa việc viết parser (bộ phân tích từ vựng và cú pháp) cho tài liệu XML cũng đơn giản hơn Ngoài ra, XML tương thích với các giao thức Internet và phần mềm xử lý, chuyển đổi dữ liệu XML được xem là một tập con của SGML, vì vậy XML có được khả năng tương thích với những hệ thống dựa trên SGML, giúp nhà phát triển vẫn có thể duy trì được những hệ thống đã được xây dựng trên nền tảng SGML mà không phải tốn kém trong việc chuyển đổi

7 Không đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML

2.4.4.3 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à một file XML:

<?xml version="1.0"?><Catalog>

<ProductName>Bantam Lexica</ProductName><ListPrice>49.99</ListPrice>

Một tài liệu HTML có thể tồn tại một số thẻ không đúng quy định (trình biên dịch sẽ bỏ qua những thẻ này) Tuy nhiên 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 đó Những tài liệu XML tuân thủ đúng những quy luật này được gọi là well-formed (tạm dịch là định dạng đúng) Với một tài liệu không phải là well–formed, Internet Explorer sẽ thông báo lỗi khi nạp tài liệu này.

Một tài liệu XML well–formed chưa chắc là một tài liệu hợp lệ Một tài liệu XML được xem là hợp lệ nếu nó đảm bảo những quy tắc đặc tả trong tài liệu Document Type Definition (DTD) hay giản đồ (schema) Một DTD hay schema sẽ định nghĩa mọi thứ từ cấu trúc dữ liệu tới kiểu dữ liệu, những thuộc tính được yêu cầu, và những ràng buộc về thành phần và thuộc tính được kết hợp trong tài liệu Phương thức kiểm tra tài liệu này thường được sử dụng trong giao tiếp giữa ứng dụng - ứng dụng, đảm bảo dữ liệu trao đổi hợp lệ tránh dẫn tới những ảnh hưởng của dữ liệu không hợp lệ trên toàn hệ thống.

2.4.4.4 XSLT - (eXtensible Style Language Transforming)

XSLT là một phần của XSL (eXtensible Style Language) 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 thành một tài liệu