Làm thế nào để cấu trúc XML cho các ứng dụng Web tương tác?

MOD

XML (Extensible Markup Language) là một lựa chọn phổ biến nhất cho Ajax, đơn giản bởi vì nó là một ngôn ngữ trung gian chuẩn để tất cả các ngôn ngữ lập trình có thể sử dụng. Thêm vào đó, XML cũng hỗ trợ trên cả trình chủ lẫn trình khách, điều đó làm nên những giải pháp linh động nhất. Về cơ bản thì XML cũng có cấu trúc tag truyền thống mà bạn đã quá quen thuộc.

Cấu trúc các tag của XML cũng giống như các tag trong HTML, ngoại trừ một điều rằng, các tag trong HTML được định nghĩa từ trước như các tag <head>, <body>, <table>, .. Dưới đây là một ví dụ cực kỳ đơn giản của HTML table mà có thể được dịch một cách dễ dàng như XHTML.

<p><table><tr><td></td></tr></table></p>

XML được chấp nhận giữa front end và back end và cho truyền thông dễ dàng trong nhiều ngôn ngữ. Đây là một trong những điểm mạnh của XML. Nó có thể cho chúng ta tạo các kết nối trực tiếp từ GUI đến một ngôn ngữ trình chủ hay một cơ sở dữ liệu. Việc truyền thông bằng XML giữa GUI và front end cho phép phân chia tách biệt hoàn toàn giữa hai lớp ứng dụng này. Sự phân tách của GUI với phần logic back end là rất quan trọng bởi vì nó có thể cho chúng ta có một ứng dụng tách riêng hoàn toàn mà trong đó các nhà phát triển GUI có thể làm trên front end trong khi đó các nhà phát triển ứng dụng back end làm việc trên back end.

Điều này dường như có cảm giác chung nhưng đó là một cách nhìn chưa thấu đáo trong nhiều công ty. Nó giữ một phần rõ ràng của ứng dụng được phân tách dành cho việc quản lý dễ dàng và cho phép các nhà phát triển ứng dụng riêng lẻ có thể tập trung vào một layer để phát triển. Không chỉ là một phương pháp dành cho các nhà phát triển ứng dụng, nó cũng quan trọng không kém cho bất kỳ người phát triển ứng dụng nào đang làm việc trên mỗi phần riêng lẻ của ứng dụng. Với cấu trúc này, một nhà phát triển ứng dụng có thể tập trung vào các layer đặc biệt của ứng dụng mà không cần quan tâm đến hay thay đổi các layer liền kề.

Định dạng XML là rất phổ dụng, nhưng có nhiều nguyên lý quan trọng cần phải xem xét khi lập kế hoạch cho một giải pháp. Hãy hình dung bằng việc định dạng dữ liệu e-mail thành một cấu trúc để có thể yêu cầu thông qua một phần Ajax và được hiển thị bằng các đối tượng JavaScript bên phía trình khách. Khi xây dựng cấu trúc này, chúng tôi muốn rằng chúng tôi có thể sử dụng nó trong nhiều đối tượng hay các thành phần mà sẽ tạo nên cấu trúc này.

Các thành phần

XML bao gồm các tag thông thường được gọi là các thành phần, chúng được định nghĩa trong phương diện cấu trúc của một ứng dụng web. Chúng có thể được trình bày dưới bất kỳ tên, giá trị hay loại dữ liệu nào sẽ được sử dụng trong ứng dụng của bạn. Khi tạo một cấu trúc XML, bạn sẽ trở thành một nhà kiến trúc trong ứng dụng của bạn, việc quyết định loại dữ liệu nào để hiển thị các mục rõ ràng trên màn hình hay cái gì sẽ xảy ra dựa trên các tương tác người dùng.

Việc giữ cho cấu trúc trừu tượng một cách có thể bằng việc không đặt tên các mục chọn rõ ràng là một việc rất quan trọng đối với ứng dụng, nhưng ở đây lại có các vấn đề ngăn cản chúng ta. Trường hợp này, nó thực sự không có ích khi tốn thời gian để làm cho cấu trúc XML của chúng ta trừu tượng bởi vì thậm chí có thể không cần thiết dùng lại dữ liệu XML trong nhiều phần của ứng dụng. Điều đó đã nói lên rằng, với một ví dụ email XML là hoàn toàn có khả năng và nó sẽ được dùng lại trong các khía cạnh khác của ứng dụng. Định dạng XML dưới đây là không thể sử dụng nhưng đó không phải là vấn đề quá quan trọng.

<categories>
<From/>
<Subject/>
<Date/>
</categories>

Để giữ cho các mục chọn trừu tượng, chúng tôi sẽ thay đổi tên của các thành phần trong mục chọn.

<categories>
<category>From</category>
<category>Subject</category>
<category>Date</category>
</categories>

Tùy chọn này cung cấp tính linh động cho phép chúng ta có thể thêm vào các mục chọn một cách dễ dàng. Có nhiều lý do để chứng minh cho điều này; một điều quan trọng cần nhớ là chúng ta có thể thêm vào một mục chọn mới mà không cần thay đổi cấu trúc của dữ liệu XML. Điều này đã giải thích cho lý do linh hoạt và một tùy chọn dễ dàng thay đổi của XML hơn so với các ví dụ trước. Nếu chúng ta tạo các đối tượng hướng đối tượng để hiển thị dữ liệu thì chúng ta không cần phải phân tích cú pháp và hiển thị code để quản lý các thành phần mới. Đến đây nó trả lời cho rằng tại sao cấu trúc trừu tượng là quan trọng.

Cho ví dụ, hình dung rằng bạn cần hiển thị cùng một danh sách các mục chọn theo hai cách khác nhau, chẳng hạn như trong data grid và e-mail preview. Thiết lập này có thể được sử dụng trong cả hai đối tượng để loại trừ được bất kỳ sự rườm rà trong code của ứng dụng. Các thành phần nào đã tạo lên XML ở đây, và có một giới hạn nhất định với các thành phần đơn lẻ. Chúng ta hãy quan sát các thuộc tính và chúng có thể giúp ta như thế nào để thêm kiểu thông tin truyền thống vào dữ liệu.

Các thuộc tính

Các thuộc tính của XML cũng sở hữu những đặc tính truyền thống đã có như là chúng ta có thể thêm vào các thành phần của bạn để cung cấp nhiều thông tin rõ ràng hơn cho cấu trúc. Từ ví dụ mẫu về e-mail, chúng ta hãy tập trung vào thành phần e-mail. Một e-mail có nhiều thuộc tính như là action được kích hoạt khi e-mail được lựa chọn và một biểu tượng liên quan như đóng hay mở dựa trên trạng thái đọc của e-mail. Để trình bày các e-mail theo cấu trúc XML, chúng đã tạo một nhóm các mục chọn mà cuối cùng có thể trở thành một tập hợp các đối tượng hay một dãy khi chúng được phân tách bên phía trình khách. Đây chính là nơi chúng ta thêm action và các thuộc tính của biểu tượng. Việc thêm các thuộc tính vào các thành phần là khá dễ dàng. Bạn hãy quan sát một ý tưởng dưới đây của chúng tôi để thấy việc thêm action và các thuộc tính vào một thành phần XML như thế nào.

Một danh sách trừu tượng của các mục chọn (email.xml)

<items action="alert('Grace Hopper');" icon="img/mail.gif">
<item>
<item><![CDATA[BUG Found]]>
<item>2006-03-31 09:27:26
</items>

Có nhiều vấn đề rất quan trọng đòi hỏi phải có kiến thức khi sử dụng các thuộc tính này, đặc biệt trong các ứng dụng lớn khi bạn gây ra một lỗi trong phần cấu trúc, thì lỗi này có thể gây ra sự tàn phá lớn khi thay đổi kích thước. Một trong những vấn đề lớn nhât của các thuộc tính này là không có khả năng thêm vào nhiều giá trị trong cùng một thuộc tính. Điều này có thể gây ra một vấn đề, nếu bạn quyết định muộn trong khi bạn lại cần phải có nhiều ví dụ chi tiết được định nghĩa như một thuộc tính, phó mặc bạn hay các nhà phát triển ứng dụng quanh bạn đang thay đổi nhiều vị trí, nơi có nhiều các tham chiếu cho các thuộc tính.

Một vấn đề quan trọng khác và một thứ mà chúng tôi sẽ thảo luận trong một giải pháp ở phần tiếp theo đó là việc thêm HTML vào XML của bạn. HTML không thể thêm vào được các thuộc tính bởi vì nó sẽ tạo ra một cấu trúc không hợp lệ. Chỉ có một cách thêm HTML vào cấu trúc XML bên trong một thành phần. Nó an toàn hơn khi thêm vào một thành phần so với một thuộc tính bởi vì khi bạn gây ra một lỗi và quên mất định dạng của phần tử bao gồm HTML thì bạn lại phải định dạng lại nó để HTML chấp nhận mà không khá vỡ bất kỳ đoạn code nào có thể tham chiếu đến nó. Để thêm HTML vào các thành phần để nó có thể đọc được bằng việc lập trình thì bạn phải phân tích cú pháp của nó và không làm khá vỡ sự hợp lệ của XML thì chúng ta cần phải thêm tag CDATA vào các tag thành phần.

CDATA

CDATA tạo lên XML với nhiều điểm nổi trội, nói cho cùng là các ứng dụng web mà sử dụng nó bằng việc cho phép chúng thêm HTML vào trong các thành phần của XML. HTML có thể được sử dụng để hiển thị dữ liệu đã được định dạng trong một thành phần DOM(Document Object Model) trong ứng dụng Ajax front end của bạn. Khi XML được phân tách bởi ngôn ngữ lập trình mà chúng ta đang sử dụng thì giá trị giữa các tag thành phần cũng được phân tách. Ví dụ dưới đây sẽ thể hiện một nhóm của các thành phần được lồng trong thành phần <items> được lồng trong thành phần </items>.

<items action="alert('Grace Hopper');" icon="img/mail.gif">
<item>Grace Hopper</item>
<item>BUG Found</item>
<item>2006-03-31 09:27:26</item>
</items>

Các thành phần đóng này cần phải được phân thành các thành phần con bằng các bộ tách làm cho ngôn ngữ lập trình hiểu chúng như các nút con. Điều này có nghĩa các tag đóng HTML bên trong các thành phần XML sẽ không làm việc bởi vì các bộ tách sẽ coi các thành phần này như các thành phần con hay thành phần đóng của thành phần cha mà không phải là các tag HTML, điều này sẽ làm cho XML không hợp lệ, gây ra lỗi hay các kết quả không mong muốn. Đoạn XML dưới đây sẽ phân biệt với tag HTML </b> như một thành phần bởi vì chúng sẽ coi như là các tag XML đóng thay vì HTML.

<item><b>BUG Found</b></item>

Để thêm HTML vào thành phần XML, chúng tôi đã sử dụng CDATA. Các bộ phân tách XML không phân tách ngay lập tức dữ liệu của các tag dưới đây, mặc dù đó là một cấu trúc XML hợp lệ và cuối cùng sẽ là định dạng HTML mà chúng ta muốn hiển thị trong trang này. Đoạn mã dưới đây sẽ thể hiện cho thấy XML hợp lệ với các tag đóng HTML trong một thành phần bằng việc sử dụng CDATA.

<item> <![CDATA[<b>BUG Found</b>]]></item>

Khi dữ liệu này được đóng bởi ngôn ngữ bên phía trình khách, trong trường hợp này sẽ là JavaScript, thì HTML sẽ trả lại như nội dung giữa hai tag. Cho ví dụ, giá trị text của BUG Found sẽ hiển thị là đoạn chữ in đậm đến người dùng trong GUI nếu chúng ta viết dữ liệu cho tài liệu. Dữ liệu có thể được viết cho tài liệu bằng việc nhắm đến một tag HTML sử dụng DOM và gắn vào dữ liệu của thuộc tính innerHTML của JavaScript hay chúng ta có thể đơn giản chúng bằng việc sử dụng document.write() để viết giá trị trực tiếp cho vị trí định vị trong đoạn mã.

Khi lập kế hoạch định dạng và đặt tên các tag mà bạn sẽ sử dụng trong XML, bạn cần phải nhớ được một số thứ. Cho ví dụ, nó sẽ rất tốt nếu có các tên duy nhất cho các thành phần. Điều này sẽ loại ra các vấn đề phân tách khi sử dụng phương pháp getElementsByTagName của JavaScript. Bằng việc sử dụng phương pháp này, bạn sẽ trả trở lại một mảng tất cả các thành phần bằng tên mà bạn định rõ không cần xem độ sâu nơi chúng cư trú.

Một vấn đề có thể là nguyên nhân là các nhóm giá trị đó với các độ sâu khác nhau sẽ không liên quan đến nhau chúng có thể được kết hợp thành một mảng không mô tả đúng vị trí dữ liệu, điều này có thể là một cơn ác mộng cho bạn hay các nhà phát triển ứng dụng cùng bạn. Có nhiều cách để phân tách dữ liệu bằng sử dụng các tag đóng với các tên giống hệt, như là việc nhắm vào thuộc tính childNodes, nhưng điều này có thể khó và có thể kéo dài quá trình phát triển ứng dụng. Bạn cũng có thể tạo một đối tượng có các phương pháp phân tách các mục rõ ràng bằng tên ở mỗi độ sâu khác nhau như là XPath làm trong các ngôn ngữ khác hay sử dụng các thuộc tính để nhận ra các nút khác nhau có cùng một tên. Tuy nhiên với mục đích của bài viết này, chúng tôi chỉ định nghĩa đơn giản cấu trúc của chúng ta theo cách mà chúng ta không còn lo ngại về các vấn đề như vậy.

Có nhiều cách chuẩn hóa trong việc phân tách XML với các ngôn ngữ khác nhau, nhưng việc phân tách XML với JavaScript thì có khác đôi chút. JavaScript có một phương pháp được đặt tên là getElementsByTagName có thể nhắm tới một nhóm các thành phần trực tiếp bằng tên và cho phép chúng ta truy cập vào chúng để có thể phân tách thành phần hay các giá trị thuộc tính một cách dễ dàng. Tham số này sẽ trả lại tất cả thành thành phần đơn hay một nhóm các thành phần bằng tên các tag được hiểu như là tham số, bạn hãy xem ví dụ dưới đây.

response.getElementsByTagName('items');

Phương pháp này sẽ tìm kiếm trong một nhóm các thành phần và nó sẽ trả lại một mảng các nút con mà bạn sẽ cần tách và nhận dữ liệu của chúng bên trong các giá trị nút.