XML: Cầu nối giữa GWT và PHP GWT có thể sử dụng các dịch vụ PHP, và XML cung cấp một cầu nối giúp trao đổi dữ liệu giữa chúng trở nên đơn giản Federico Kereki, Kỹ sư hệ thống, 自由职业者 Tóm
Trang 1XML: Cầu nối giữa GWT và PHP
GWT có thể sử dụng các dịch vụ PHP, và XML cung cấp một cầu nối giúp trao đổi dữ liệu giữa chúng trở nên đơn giản
Federico Kereki, Kỹ sư hệ thống, 自由职业者
Tóm tắt: Các ứng dụng trong bộ công cụ Web của Google (Google Web Tools),
ngoại trừ việc kết nối tới các servlet bằng ngôn ngữ Java™ đang được ưa chuộng,
nó cũng có thể sử dụng các dịch vụ Web PHP để gửi và nhận dữ liệu trong XML Bạn sẽ khảo sát các phương thức để tạo ra các tài liệu XML và xử lý chúng bằng
cả hai ngôn ngữ Java và PHP (Servlets là các đối tượng của ngôn ngữ Java, nó xử
lý động các yêu cầu và sinh các trả lời, nó chạy trên máy chủ)
GWT cho phép dễ dàng truy cập đến các servlet phía-máy chủ được lập trình bằng ngôn ngữ Java, và dữ liệu được di chuyển một cách rõ ràng theo chuẩn nhất định giữa máy khách và máy chủ Tuy nhiên, khi bạn làm việc với GWT, bạn không bị giới hạn khi giao tiếp với các servlet, và bạn có thể tự do chuyển đổi dữ liệu với tất
cả các loại dịch vụ Web Trong nhiều trường hợp (với các dịch vụ đơn giản), bạn
có thể chuyển đổi với đoạn văn bản đơn giản, nhưng với dữ liệu có cấu trúc hoặc phức tạp hơn (ví dụ như RSS), sự khác biệt với XML sẽ được thể hiện rõ
Bài viết này khảo sát một ứng dụng GWT đơn giản và một vài dịch vụ Web PHP, nhằm chỉ ra một vài cách khác nhau để tạo ra và sử dụng các tài liệu XML Điều này có nghĩa rằng nó không những là một tài liệu hướng dẫn tỉ mỉ hay một cuốn sổ tay hướng dẫn mà hơn thế nữa chúng là các lời gợi ý hay lời mách nước mà bạn có thể dễ dàng hơn khi bắt đầu làm việc với XML trong vai trò như là một cầu nối giữa GWT và PHP
Một ứng dụng thử nghiệm
JSON: Có thể tồn tại chung với ngôn ngữ khác
Phần độc đáo của ngôn ngữ JavaScript™, JavaScript Object Notation (JSON) cuối cùng cũng ra đời có đầy đủ những tính năng có thể thay thế XML một cách hiệu quả JSON cung cấp một định dạng dựa trên văn bản đơn giản, dễ đọc đại diện cho các mảng và các đối tượng Hơn thế nữa, chắc chắn là XML và JSON miêu tả cho cùng dữ liệu mà các dữ liệu này có thể tương đương về dung dượng Một vài trang Web nổi tiếng (ví dụ như Google hay Yahoo!) cung cấp JSON cũng giống như XML
Trang 2Một lợi thế của JSON là JavaScript có thể xử lý rất nhanh (thí dụ nó có thể chuyển đổi JSON thành một đối tượng với duy nhất một câu lệnh), điều này giúp nó có sức lôi cuốn lớn đối với các nhà phát triển Web Bởi vì GWT biên dịch tất cả mã lệnh phía máy khách thành mã lệnh JavaScript, điều này chứng tỏ một lý lẽ rằng GWT cung cấp một thư viện tốt cho nó, và tất cả các ví dụ trong bài viết này cũng
có thể được lập trình với JSON thay vì dùng XML Hãy ghé thăm Tài nguyên để
có các liên kết nhằm biết thêm thông tin về JSON
Nhằm chỉ ra làm thế nào bạn có thể sử dụng XML như là một cầu nối giữa PHP và GWT, tôi cung cấp một ứng dụng đơn giản dựa trên cơ sở dữ liệu về các quốc gia/các vùng miền/các thành phố Khi nhìn vào đoạn mã tạo cơ sở dữ liệu trong Ví
dụ 1, bạn có thể thấy rằng:
Các quốc gia đều có một mã riêng và duy nhất (ví dụ, UY cho Uruguay) và
kèm theo là tên nước
Các quốc gia được chia thành các vùng miền, được nhận dạng cùng với mã
(mã này là duy nhất trong quốc gia đó) và kèm theo tên vùng miền
Các vùng miền có các thành phố, chúng có một tên (dựa theo mã ASCII
thuần túy), và một tên chính xác của thành phố đó (chúng có thể bao gồm
các ký tự lạ tùy thuộc vào ngôn ngữ của quốc gia đó), dân số (hoặc bằng 0
nếu không được xác định), vĩ độ và kinh độ Tên của thành phố có thể trùng với tên thành phố của các vùng miền khác trong quốc gia đó
Ví dụ 1 Đoạn mã tạo cơ sở dữ liệu
CREATE DATABASE world
DEFAULT CHARACTER SET latin1
COLLATE latin1_general_ci;
USE world;
Trang 3CREATE TABLE countries (
countryCode char(2) NOT NULL, countryName varchar(50) NOT NULL, PRIMARY KEY (countryCode)
KEY countryName (countryName) );
CREATE TABLE regions (
countryCode char(2) NOT NULL, regionCode char(2) NOT NULL, regionName varchar(50) NOT NULL,
PRIMARY KEY
(countryCode,regionCode),
KEY regionName (regionName)
);
CREATE TABLE cities (
countryCode char(2) NOT NULL, cityName varchar(50) NOT NULL,
cityAccentedName varchar(50) NOT NULL,
regionCode char(2) NOT NULL, population bigint(20) NOT NULL,
Trang 4latitude float(10,7) NOT NULL,
longitude float(10,7) NOT NULL,
Hình 1 Biểu mẫu trống
Biểu mẫu GWT cho phép bạn nhập tên thành phố và gọi dịch vụ PHP để lấy tất cả các thành phố có tên phù hợp với tên thành phố mà bạn đã nhập Các thành phố
Trang 5được hiển thị ở dạng bảng các ô vuông, và bạn có thể chỉnh sửa các trường thông tin như dân số, kinh độ và vĩ độ Bạn có thể gửi các dữ liệu đã chỉnh sửa này quay lại dịch vụ Web PHP thứ hai, dịch vụ này sẽ cập nhật vào cơ sở dữ liệu Tất cả dữ liệu truyền đi được định dạng bằng XML Năm 2009, lễ kỉ niệm sinh nhật lần thứ
200 của Charles Darwin và lần thứ 150 ra đời cuốn sách của ông Nguồn gốc muôn loài, bạn có thể tìm kiếm các thành phố cùng với tên DARWIN; Xem Hình 2 cho
các kết quả
Trang 6Hình 2 Kết quả tìm kiếm các thành phố cùng với tên "Darwin"
Một vài cấu hình bổ xung
Thông tin này chỉ mang tính tham khảo, tôi đã làm việc với:
GWT phiên bản 1.5.3
Trang 7 PHP phiên bản 5.2.8
MySQL® cơ sở dữ liệu máy chủ phiên bản 5.0.67
Apache phiên bản 2.2.10 dưới OpenSUSE® phiên bản 11.1
Sau khi tôi cài đặt tất cả các phần mềm nhưng GWT vẫn yêu cầu một bước cấu hình thêm nữa vậy nên tôi có thể kiểm tra kết nối GWT-PHP; xem thêm tại Vấn đề
về SOP để hiểu tại sao Để vô hiệu chính sách cùng nguồn (SOP) hãy kiểm tra bên trong trình duyệt GWT, chỉnh sửa tệp /mozilla-1.7.12/greprefs/all.js trong thư mục GWT của bạn và thêm các dòng lệnh như trong Ví dụ 2 vào phần cuối cùng của tệp:
Ví dụ 2 Thay đổi cấu hình bên trong trình duyệt GWT
pref("capability.policy.default.XMLHttpRequest.abort", "allAccess");
pref("capability.policy.default.XMLHttpRequest.getAllResponseHeaders","allAccess");
pref("capability.policy.default.XMLHttpRequest.getResponseHeader","allAccess");
pref("capability.policy.default.XMLHttpRequest.open", "allAccess");
pref("capability.policy.default.XMLHttpRequest.send", "allAccess");
pref("capability.policy.default.XMLHttpRequest.setRequestHeader","allAccess");
pref("capability.policy.default.XMLHttpRequest.onreadystatechange","allAccess");
pref("capability.policy.default.XMLHttpRequest.readyState", "allAccess");
pref("capability.policy.default.XMLHttpRequest.responseText","allAccess"); pref("capability.policy.default.XMLHttpRequest.responseXML","allAccess"); pref("capability.policy.default.XMLHttpRequest.status", "allAccess");
Trang 8pref("capability.policy.default.XMLHttpRequest.statusText", "allAccess");
Vấn đề về SOP
SOP là một sự hạn chế đáng tin cậy mà về cơ bản nó ngăn chặn các trang Web được tải từ nguồn chắc chắn (nghĩa là giao thức/hệ chủ/cổng là một bộ ba của URL) truy cập dữ liệu từ một nguồn khác (Windows® Internet Explorer® đã hơi kiêu ngạo về SOP và bỏ qua sự thay đổi của các cổng, mặc dù đó không phải là điều bắt buộc.) Ví dụ, nếu máy khách Web GWT của bạn được tải từ
http://www.yoursite.com:80/some/page/at/your/site, SOP sẽ không cho phép máy khách của bạn lấy dữ liệu khác từ cùng một URL, các lời gọi bị chặn khi giao tiếp với https://www.yoursite.com (do khác giao thức), http://othersite.com (do khác hệ chủ) và ngay cả http://www.yoursite.com:81 (do khác cổng)
SOP thực sự là một ý tưởng tốt, bởi vì nó không cho phép mã JavaScript từ một nguồn chắc chắn được truy cập và điều khiển dữ liệu được lấy từ nguồn khác Trong thực tế, SOP bị vô hiệu hóa có thể là điều các phisher thực sự mong muốn: Giống như khi bạn nhìn thấy có hiệu lực, hợp pháp nhưng thực ra có một nhóm thứ ba giám sát nó Nếu SOP ở vị trí đó, bạn có thể thư giãn mà chắc chắn rằng bất
cứ thứ gì bạn nhìn thấy thì chúng đều được gửi từ nguồn mong muốn; nó không thể là bất cứ đoạn mã nào từ các nguồn khác (các nguồn đáng nghi ngờ)
Ngược lại, với các nhà phát triển GWT, SOP đúng là phiền hà Khi bạn chạy thử ứng dụng của mình ở chế độ máy chủ phục vụ, nó kết nối tới cổng 8888, nhưng với các dịch vụ PHP bạn sẽ muốn truy cập thông qua cổng tiêu chuẩn 80, vậy nên SOP sẽ từ chối lời gọi này (Tất nhiên, sau khi bạn thay đổi ứng dụng của mình sang chế độ biên dịch, nó sẽ chạy một cách hoàn hảo, bởi vì nó cũng chạy từ cổng tiêu chuẩn 80, điều này liên quan đến SOP.) Bạn sẽ không muốn truy cập tất cả các loại cổng của các trang Web; bạn chỉ muốn truy cập cổng khác từ cùng một nguồn, nhưng SOP sẽ không cho phép bạn làm vậy
Bất cứ khi nào bạn cập nhật GWT, bạn sẽ phải thay đổi lại điều này Chính vì vậy, bạn nên hiểu rằng nếu không làm vậy, bạn có thể viết mã bị lỗi trong chế độ máy chủ phục vụ nhưng có thể chạy rất tốt trong chế độ biên dịch; sau khi thực hiện sự thay đổi, bạn có thể có mã lệnh có thể chạy ở chế độ máy chủ phục vụ nhưng lại lỗi trong chế độ biên dịch, hãy chú ý điều này!
Gửi XML bằng PHP
Trang 9Ứng dụng này chỉ định nghĩa một biểu mẫu đơn giản, với một vài nhãn, một hộp văn bản, hai nút điều khiển, và mạng lưới các ô vuông cho việc hiển thị kết quả
Bất cứ khi nào bạn kích chuột vào Get cities, ứng dụng sẽ gọi dịch vụ PHP để lấy
một tài liệu XML với tất cả các tên thành phố phù hợp với nội dung bạn gõ trong hộp văn bản nhập Ví dụ 3 là một ví dụ ngắn về XML mà nó được gửi từ dịch vụ PHP đến ứng dụng GWT Đoạn mã XML được tạo ra nhằm minh họa một vài khả năng của XML và hơn thế nữa nó còn có thể được sử dụng cho các ứng dụng thực
tế Điển hình là dịch vụ XML được tổ chức tốt sử dụng ít thẻ hơn và nhiều thuộc tính hơn, loại bỏ việc thụt vào ở đầu dòng và do đó tài liệu sẽ ngắn hơn
Ví dụ 3 Tài liệu XML được tạo ra khi tìm kiếm từ "tokyo"
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city name="tokyo">
<country code="JP" name="Japan"/>
<region code="40" name="Tokyo"/>
Trang 10<region code="01" name="Central"/>
Có hai phiên bản sử dụng dịch vụ PHP khác nhau — getcities1.php và
getcities2.php — hai phiên bản này chỉ ra hai cách khác nhau để tạo ra tài liệu XML
Cách đơn giản nhất để tạo XML là chỉ in các chuỗi văn bản thích hợp hoặc tạo ra các chuỗi ký tự, sau đó sử dụng lệnh echo Bạn nên thiết lập loại nội dung text/xml sau đó nó sẽ được nhận ra một cách chính xác và bạn cũng nên nhớ thêm vào các dòng chú thích một cách tương đối nhằm xác định phiên bản XML và ý nghĩa các dòng lệnh Bạn sẽ không được quên cách sử dụng một số kí tự đặc biệt như nhỏ
Trang 11hơn (<), lớn hơn (>), hay dấu và (&); cách dễ nhất là sử dụng htmlspecialchars(), đây là một hàm PHP Câu lệnh này rất đơn giản, giống như đoạn mã được chỉ ra trong Ví dụ 4 Chú ý rằng thụt vào đầu dòng và xuống dòng thực sự là không cần thiết, nhưng nhờ nó chúng ta có thể đọc mã một cách dễ dàng
Ví dụ 4 Phương thức đơn giản nhất để tạo ra XML từ dịch vụ PHP
Trang 12Ví dụ 5 XMLWriter cung cấp phương thức đơn giản để xây dựng một tài liệu XML một phần tử liên tiếp nhau
$writer= new XMLWriter();
Trang 14Xử lý XML với GWT
GWT cung cấp duy nhất gói XMLParser (tại địa chỉ com.google.gwt.xml.client ) cho cả hai việc đọc và viết XML Bạn có thể sử dụng phương thức parse() để tạo một tài liệu Document, sau đó sử dụng getDocumentElement() để lấy phần tử gốc của nó; sau đó bạn có thể bắt đầu làm việc với tài liệu XML này
Một điều quan trọng là bạn nên sử dụng phương thức removeWhitespace() để loại
bỏ các khoảng trắng ra khỏi tài liệu của mình Trình duyệt đôi khi tạo ra các nút văn bản trống tương ứng với các dấu tab hay dấu xuống dòng, và nếu bạn không loại bỏ được chúng, xử lý của bạn sẽ gặp vấn đề lạ, xuất hiện các phần tử không
Trang 15mong muốn, chúng có thể phá hỏng logíc của bạn (Xem Ví dụ 6) Một điều khác nữa là: Nếu bạn chờ các phân đoạn CDATA, bạn sẽ phải kiểm tra trình duyệt của bạn chấp nhận phương thức supportsCDATASection() hay không; Nếu không, thay vào đó các phân đoạn sẽ tạo ra các nút Kiểm tra tài liệu GWT (Xem Tài nguyên) để biết thêm thông tin
Ví dụ 6 XMLParser cung cấp việc đọc và tạo ra XML trong GWT
protected void loadCities(final String xmlCities) {
final Document xmlDoc= XMLParser.parse(xmlCities);
final Element root= xmlDoc.getDocumentElement();
XMLParser.removeWhitespace(xmlDoc);
final NodeList cities=
root.getElementsByTagName("city");
for (int i= 0; i < cities.getLength(); i++) {
final Element city= (Element)cities.item(i);
Trang 16final Element population=
Gửi XML với GWT
Ứng dụng GWT giúp người dùng chỉnh sửa các trường dân số, kinh độ và vĩ độ, sau đó gửi dữ liệu các thành phố đến máy chủ để cập nhật dữ liệu Hai thuật toán được sử dụng là: thuật toán đơn giản hơn thì xây dựng dòng lệnh XML từng phần
và thuật toán dựa trên XMLParser sử dụng các phương thức đặc trưng để tạo ra cấu trúc mong muốn
Trang 17Thuật toán đơn giản hơn được chỉ ra trong phương thức getCities1() Bạn có thể sử dụng cả hai đối tượng String hoặc StringBuffer để tạo XML Tôi sử dụng cách này, bởi vì nó tạo ra đoạn mã rõ ràng; nhưng khi thi hành, thuật toán thứ hai hoạt động tốt hơn Cùng với các vấn đề về các ký tự lớn hơn, nhỏ hơn, bạn có thể xem phiên bản sử dụng PHP dưới đây, đoạn mã này sử dụng phương thức
Html.htmlspecialchars() để giải quyết vấn đề đó (Xem Ví dụ 7, đã được chỉnh sửa một chút cho rõ ràng hơn.)
Ví dụ 7 Xây dựng XML từng phần từ các chuỗi ký tự đơn giản
protected String getCities1() {
String result= "";
result+= "<?xml version=\"1.0\"
encoding=\"UTF-8\"?>\n";
result+= "<cities>\n";
for (all rows in the grid) {
// get cityName, countryCode, regionCode, pop,
lat, and lon, from the grid
result+= " <city name=\"" +
Trang 18if (!pop.equals("0") && !pop.isEmpty()) {
result+= " <pop>" + pop + "</pop>\n";
}
result+= " <coords>\n";
result+= " <lat>" + lat + "</lat>\n";
result+= " <lon>" + lon + "</lon>\n";
Ví dụ 8 Các phương thức XMLParser để tạo XML tương tự với các phương thức SimpleXML trong PHP
Trang 19protected String getCities2() {
Document xml= XMLParser.createDocument(); Element cities= xml.createElement("cities"); xml.appendChild(cities);
for (all rows in the grid) {
// get cityName, countryCode, regionCode, pop, lat, and lon, from the grid
Element city= xml.createElement("city");
city.setAttribute("name", cityName);
Element country= xml.createElement("country"); country.setAttribute("code", countryCode); city.appendChild(country);
if (!pop.equals("0") && !pop.isEmpty()) {
Element popEl= xml.createElement("pop"); Text popText= xml.createTextNode(pop); popEl.appendChild(popText);
city.appendChild(popEl);
}
