AJAX là gì

Một phần của tài liệu Phát triển mẫu thiết kế phần mềm và ứng dụng (Trang 104)

AJAX là viết tắt của cụm từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ) [5], là kỹ thuật cho phép tăng tốc độ của các ứng dụng web bằng cách chia nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. Kỹ thuật kết hợp hai tính năng mạnh của JavaScript đƣợc các nhà phát trển đánh giá rất cao:

 Gửi yêu cầu đế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.

AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ: CSS , DOM, XMLHttpRequest, JavaScript. Trong đó

 Trình bày trang web theo tiêu chuẩn XHTML và CSS;

 Biểu diễn động và tƣơng tác bằng DOM (Document Object Model);

 Trao đổi và xử lý dữ liệu bằng XML và XSLT;

 Truy cập dữ liệu không đồng bộ bằng MLHttpRequest;

 Liên kết các công nghệ trên với nhau bằng JavaScript.

4.2.3. AJAX hoạt động như thế nào

Trong ứng dụng web truyền thống, khi cần thay đổi dữ liệu trên trang web, ngƣời dùng tạo ra một yêu cầu HTTP tới server. Server thực hiện một số thao tác xử lý nhƣ lấy dữ liệu, tính toán, thẩm định tính hợp lệ thông tin, sau đó gửi lại một trang web hoàn chỉnh tới client yêu cầu. Tuy nhiên, kỹ thuật này có hạn chế là: khi server đang thực hiện công việc xử lý của mình thì client phải chờ đến khi server xử lý xong thì mới có thể tiếp tục thực hiện các công việc khác.

Để khắc phục hạn chế nêu trên, ngƣời ta đƣa ra một kỹ thuật trung gian, cơ chế Ajax, giữa client và server. Khi đó, các yêu cầu gửi và nhận do AJAX Engine thực hiện. Mọi thao tác ngƣời dùng sẽ gửi lệnh JavaScript tới bộ xử lý Ajax, thay vì tạo ra một truy vấn HTTP tới máy chủ. Nếu cần thông tin từ server, nhƣ tải về bổ sung mã giao diện hay dữ liệu mới cập nhật, AJAX sẽ truyền yêu cầu tới server 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. Thay vì trả dữ liệu dƣới dạng HTML và CSS trực tiếp cho trình duyệt, server gửi dữ liệu phản hồi dƣới dạng XML tới Ajax Engine. AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML và CSS để hiển thị trên trình duyệt. Việc này đƣợc thực hiện trên client nên giảm tải rất nhiều cho server.

98

Hình 4.14. Ứng dụng web truyền thống (trái) và ứng dụng AJAX

Nhƣ vậy, việc sử dụng cơ chế kỹ thuật Ajax đã làm giảm quá trình “đi lại” của thông tin và thời gian phản ứng. Thay vì tải lại toàn bộ một trang web, nó chỉ nạp những thông tin đƣợc thay đổi, còn các phần khác đƣợc giữ nguyên. Vì thế, ngƣời dùng không gặp hiện tƣợng cửa sổ trắng và biểu tƣợng đồng hồ cát - dấu hiệu khi server đang thực hiện nhiệm vụ.

Hình 4.15. Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX.

99

4.2.4. Các ứng dụng AJAX phổ biến

Hãng Google đã đầu tƣ nhiều vào việc phát triển ứng dụng AJAX. Các ứng dụng của họ gần đây, từ Orkut, Gmail đến phiên bản thử nghiệm Google Groups, đều ứng dụng công nghệ AJAX. Google Suggest hiển thị các thuật ngữ gợi ý gần nhƣ ngay lập tức khi ngƣời sử dụng chƣa gõ xong từ khóa. Với Google Maps, ngƣời dùng có thể xê dịch, kéo thả bản đồ nhƣ trên môi trƣờng desktop.

Yahoo dự định sẽ ra mắt bản Yahoo Mail Beta 1 sử dụng AJAX trên toàn thế giới. Hãng cũng đang xây dựng một công cụ Ajax có thể nhanh chóng cập nhật thông tin về sân bay, chuyến bay, thời gian... phục vụ khách hàng.

Microsoft cũng đang triển khai chƣơng trình Windows Live Mail và Windows Live Messenger hỗ trợ AJAX.

Những ứng dụng trên cho thấy AJAX không phải là một công nghệ quá xa xôi mà đang hiện diện ngay trong thế giới thực, từ mô hình đơn giản nhƣ Google Suggest đến phức tạp nhƣ Google Maps.

4.2.5. Tổng quan về mẫu thiết kế Ajax

Ajax chứa đựng rất nhiều hứa hẹn trong việc thiết kế các ứng dụng web. Hiện tại nó đã đƣợc sử dụng trong nhiều ứng dụng tiêu biểu. Khi Ajax bắt đầu, các mẫu thiết kế đã đƣợc ứng dụng rộng rãi. Mẫu thiết kế giúp cho quá trình phát triển phần mềm trở lên hiệu quả hơn bởi nó đẩy nhanh quá trình lập trình thông thƣờng và loại bỏ nhu cầu viết các mã dƣ thừa qua các dự án. Ajax design pattern đang nổi lên với việc sử dụng ngày càng phổ biến trong việc phát triển các ứng dụng web. Ajax design patters giúp cho ta cách thực hành tốt nhất mà cải tiến một cách nhanh chóng các dự án phát triển ứng dụng web. Nó chỉ cho ngƣời dùng biết làm thế nào để áp dụng các nguyên lý thiết kế một cách hiệu quả trong các ứng dụng web sử dụng công nghệ Ajax.

Có thể đáng ngạc nhiên là đã có nhiều mẫu thiết kế Ajax khi mà thuật ngữ Ajax chỉ mới xuất hiện. Dù sao, các ý tƣởng đó không phải là mới, đã có nhiều phần liên quan Ajax trên web trƣớc khi thuật ngữ đó hình thành để mô tả chúng. Đã có hàng trăm các site mới hiện tại sử dụng Ajax cung với các công cụ mạnh nhƣ RSS, Technorati, Google và Wikis để xác định chúng ngay khi chúng sẵn sàng.

Hiện tại đã xây dựng đƣợc hơn 60 mẫu Ajax đƣợc phân làm 4 nhóm [9]: Foundational Technology, Programming, Functionality and Usability, và Development.

Các mẫu Foundational Technology: gồm có 11 mẫu. Là các mẫu thiết kế mức thấp, phù hợp cho những ngƣời mới nghiên cứu về Ajax. Là các khối làm sẵn để xây dựng mà phân biệt Ajax với các cách tiếp cận thông thƣờng và giải thích cách sử dụng

100

đặc trƣng. Các mẫu này đƣợc xem nhƣ “nguyên tử” trong ngôn ngữ mẫu, theo ý nghĩa là tất cả các mẫu sau đó đƣợc xây dựng trên các kỹ thuật nền tảng này. Để giữ cho các mẫu Ajax đƣợc xúc tích, bạn sẽ chỉ bắt gặp các công nghệ mà thêm những thứ vào việc phát triển web thông thƣờng.

Các mẫu Programming: gồm 23 mẫu. Giải thích làm thế nào các thành phần đƣợc kết hợp theo góc độ bảo trì và thực thi. Chúng là những đặc trƣng về kiến trúc và mã mà thỏa mãn các nguyên lý thiết kế phần mềm. Chúng bao gồm cả những thứ khác nhƣ là việc thiết kế các dịch vụ web, quản lý luồng thông tin giữa trình duyệt và server, định vị DOM khi một phản hồi đến và tối ƣu hóa thực thi.

Các mẫu Functionality and Usability: gồm 28 mẫu, hƣớng dẫn giao diện ngƣời dùng và các khái niệm về khả năng sử dụng. Chúng là những thứ quan trọng với ngƣời dùng, bao gồm widgets và các kỹ thuật tƣơng tác, cấu trúc và duy trì những thứ trên trang web, hiệu ứng trực quan và các chức năng mà Ajax có khả năng. (adsbygoogle = window.adsbygoogle || []).push({});

Các mẫu Development: 8 mẫu. Chúng là các mẫu tiến trình đƣợc sử dụng trong thực hành cho phát triển, nhƣ là đối lập với các mẫu trƣớc, đó là những thứ mà tồn tại bên cạnh một ứng dụng Ajax. Các thực hành đó là phát hiện vấn đề và chạy kiểm thử.

Hình 4.16. Nhóm các mẫu AJAX.

Hình bên trên chỉ ra vị trí của 4 nhóm thiết kế mẫu Ajax trong một ứng dụng Ajax. Các mẫu trong 3 nhóm đầu là về sản phẩm, trong khi nhóm còn lại, Development patterns là về tiến trình. Trong các mẫu hƣớng sản phẩm, Foundational Technologies giải thích làm thế nào sử dụng các công nghệ web thô nhƣ là XMLHttpRequest và DOM. Ở mức trung bình là Programming Patterns, hƣớng dẫn các kế hoạch sử dụng các công nghệ này. Ở mức cao là các Functionality and Usability patterns. Foundational Technology Patterns là lõi của ngôn ngữ mẫu Ajax. Các nhóm còn lại tất cả đƣợc xây dựng trên đó, và khá độc lập với những nhóm khác.

101

4.3. Ứng dụng mẫu thiết kế trong thiết kế khung cho tầng truy cập dữ liệu

4.3.1. Đặt vấn đề

Khi xây dựng phần mềm, lập trình viên thƣờng quan tâm đến hệ cơ sở dữ liệu mà ứng dụng sẽ tƣơng tác. Điều này có một trở ngại là khi ngƣời dùng thay đổi hệ dữ liệu thì chƣơng trình không thực hiện đƣợc, hoặc phải cài đặt lại.

Một trƣờng hợp khác là một số phần mềm tƣơng tác với nhiều hệ cơ sở dữ liệu khác nhau, nhƣ: DB2, MySQL, SQLServer, Oracle, …. Lúc này buộc phải cài đặt các điều khiển truy cập dữ liệu theo yêu cầu. Điều này phát sinh một số vấn đề: tài nguyên cơ sở dữ liệu đƣợc khởi tạo chậm, mã cài đặt truy cập dữ liệu phức tạp, cồng kềnh dẫn đến khó phát triển và bảo trì.

Dựa trên lý thuyết thiết kế chƣơng trình theo mô hình ba tầng (3-Layer), luận văn áp dụng các mẫu thiết kế (Factory Method, Singleton và Null Object) để thiết kế và cài đặt Framework cho tầng truy cập dữ liệu một cách tổng quát, sử dụng đối tƣợng ADO.Net nhằm khắc phục những nhƣợc điểm nêu trên.

4.3.2. Mô hình 3 tầng

Ngày nay, đa phần các ứng dụng dựa trên mô hình 2-tầng Client/Server, trong đó tất cả mã lệnh về giao diện ngƣời dùng (UI), logic nghiệp vụ (Business logic) và truy cập dữ liệu (Data access) đƣợc viết “bên dƣới” tầng giao diện. Việc ứng dụng mô hình 2-tầng làm cho ngƣời phát triển ban đầu dễ triển khai và thời gian ngắn. Tuy nhiên có nhƣợc điểm là: khó thay đổi theo các nghiệp vụ khi chúng bị thay đổi do yêu cầu thực tế, khó bảo trì, tích hợp và không có khả năng kế thừa.

Để quản lý các thành phần hệ thống một cách độc lập, không ảnh hƣởng bởi các thay đổi, ngƣời ta nhóm những thành phần có cùng chức năng với nhau, phân chia nhiệm vụ cho từng nhóm để công việc không bị chồng chéo và ảnh hƣởng lẫn nhau. Khi đó, ngƣời ta dùng kiến trúc đa tầng (hay nhiều tầng), mỗi tầng thực hiện một chức năng nào đó, trong đó mô hình 3-tầng do MicroSoft đề xuất là phổ biến nhất, gồm: tầng trình diễn PL (Presentation Layer), tầng nghiệp vụ BL (Business Layer) và tầng dữ liệu DL (Data Layer).

102

Mỗi tầng tƣơng ứng với một trong ba phần tử cần thiết trong một kiến trúc ứng dụng: tƣơng tác, thao tác và lƣu trữ. Cụ thể nhƣ sau:

 PL: giao tiếp với ngƣời dùng cuối để thu thập dữ liệu và hiển thị kết quả / dữ liệu thông qua các thành phần giao diện ngƣời dùng.

 BL: thao tác thông tin theo yêu cầu của bài toán và ngƣời sử dụng.

 DL: tổ chức lƣu trữ và truy xuất dữ liệu.

Các tầng này giao tiếp với nhau thông qua các dịch vụ mà mỗi tầng cung cấp để tạo nên ứng dụng. Tầng này không cần biết bên trong tầng kia làm gì mà chỉ quan tâm tầng kia cung cấp dịch vụ gì cho mình và sử dụng nó. Giao diện ngƣời dùng không gọi trực tiếp tầng DL và ngƣợc lại, vì lý do an toàn và các giao tác thƣờng đƣợc quản lý trong tầng BL. Tất cả các trao đổi với cơ sở dữ liệu phải thông qua giao diện dịch vụ trong tầng BL.

4.3.3. Cài đặt mô hình khung cho tầng truy cập dữ liệu

Để dễ hình dung ta có thể xét một mô hình ứng dụng đƣợc thiết kế theo mô hình 3-tầng nhƣ hình dƣới. Tầng DL lƣu trữ và truy xuất dữ liệu, đƣợc chia thành hai phần: DataAccess và DataStorage:

 DataStorage: lƣu trữ dữ liệu và thực hiện các dịch vụ của hệ quản trị cơ sở dữ liệu nhƣ SQL Server, Oracle, DB2, MySQL, …

 DataAccess: gồm các đối tƣợng tác nghiệp (Business Object) và đối tƣợng kết nối, truy cập dữ liệu. Business Object cung cấp dịch vụ từ tầng DL cho tầng trên, nhƣ các dịch vụ: chèn, cập nhật, xóa dữ liệu.

Tầng PL và DL độc lập nhau, trao đổi với nhau qua tầng BL. Do đó, việc thay đổi hệ quản trị cơ sở dữ liệu SQL Server thành Oracle, Oracle thành DB2,… hay ngƣợc lại thì giao diện chƣơng trình vẫn không thay đổi.

Trong cài đặt khung cho tầng truy cập dữ liệu tổng quát, ta xây dựng các Business Object dựa trên đối tƣợng ADO.Net để cung cấp dịch vụ cho tầng BL và bảo đảm sự độc lập giữa hai tầng PL và DL.

Có một cách là xây dựng một lớp dịch vụ có phƣơng thức chứa điều khiển switch để biết đƣợc kiểu của điều khiển truy cập cơ sở dữ liệu nào đƣợc thực hiện, rồi cài đặt mã tƣơng tác tƣơng ứng. Giả sử phƣơng thức này đƣợc cài đặt nhƣ sau :

public override void MyProcedure(proType ProviderType){ switch(proType){ case ProviderType.SqlClient: objSqlCommand.SqlProcedure () break; case ProviderType.OleDb: objOleDbCommand.QleDbProcedure()

103 break; default: … break; } }

Cách thiết kế và cài đặt nhƣ trên có một số nhƣợc điểm: mã lệnh cài đặt nhiều do phải viết lại những đoạn mã tƣơng tự nhau, phức tạp và đôi khi là không cần thiết. Mặt khác khi muốn truy cập cơ sở dữ liệu mới thì phải cài đặt và biên dịch lại lớp này. Giải quyết vấn đề này bằng cách sử dụng các mẫu Factory Method, Singleton và Null Object để cài đặt một Framework cho tầng truy cập dữ liệu tổng quát. Biểu đồ lớp cho bài toán đƣợc trình bày trong hình dƣới, trong đó, lớp DataAccessBaseClass và các lớp kế thừa nó là các Business Object chứa các dịch vụ cung cấp cho tầng BL tƣơng tác với cơ sở dữ liệu.

Hình 4.18. Biểu đồ lớp của tầng truy cập dữ liệu

Lớp DataAccessBaseClass là lớp Product gồm các thuộc tính và phƣơng thức tổng quát để tƣơng tác với các hệ cơ sở dữ liệu, các phƣơng thức này là các phƣơng thức đƣợc nạp chồng. (adsbygoogle = window.adsbygoogle || []).push({});

Các lớp OdbcDataAccess, OleDbDataAccess, OracleDataAccess, SqlDataAccess, NullObject (là các lớp ConcreteProduct) đƣợc kế thừa từ lớp DataAccessBaseClass và cài đặt chi tiết phƣơng thức GetDataProviderConnection() (trả về đối tƣợng chuỗi kết nối đến hệ cơ sở dữ liệu tƣơng ứng) và GetDataProviderDataAdapter() (tạo một Adapter ứng với hệ cơ sở dữ liệu nào đó). Các lớp này đƣợc xây dựng dựa theo mẫu Singleton để đảm bảo tính duy nhất của bản

104

thể. Lớp NullObject cài đặt phƣơng thức thực thi các ứng xử mặc định ngoài các hành vi của các đối tƣợng của các lớp còn lại.

Phƣơng thức GetDataAccessLayer() là phƣơng thức static đƣợc nạp chồng, nhận một tham số có kiểu ProviderType (gồm một trong các giá trị : Odbc, OleDb, Oracle, Sql) để quyết định đối tƣợng ứng với điều khiển truy cập dữ liệu (Data Provider) nào sẽ đƣợc tạo ra. Nội dung của lớp chứa phƣơng thức này nhƣ sau :

public class ConcreteCreator : Creator{ private ConcreteCreator() {}

//Lấy giá trị được thiết lập trong tệp tin cấu hình

private static string GetAppSetting(string setting){ string val;

try {

val = System.Configuration.ConfigurationSettings. AppSettings[setting].ToString();

}

catch (NullReferenceException e){ val = ""; } if (val == null) val = ""; return val; }

/*Lấy chuỗi kết nối database bằng cách đọc trong tệp tin cấu hình (app.config)*/

private static string GetConnectionString(){ string val;

val = "server=" + GetAppSetting("Datasource") + ";database=" + GetAppSetting("Database") +

";uid=" + GetAppSetting("Userid") + ";pwd=" + GetAppSetting("Password") + ((GetAppSetting("Timeout").Length > 0) ?

";Connection Timeout=" + GetAppSetting("Timeout"): ""); return val;

}

/*Xây dựng một data provider của tầng truy cập dữ liệu dựa trên các thiết lập cấu hình ứng dụng. Tập tin cấu hình ứng dụng phải chứa 2 key:

1. "DataProviderType" key : giá trị của nó là một trong các giá trị được định nghĩa (sql,oracle,access,odbc,oledb)

2. "ConnectionString" key : chuỗi kết nối database*/

public static DataAccessBaseClass GetDataAccessLayer(){ if (GetAppSetting("DataProviderType") == null

||GetAppSetting("Datasource") == null || GetAppSetting("Database") == null)

105

throw new ArgumentNullException("Chưa chỉ định

'DataProviderType' hoặc chưa chỉ định 'Server' hoặc chưa chỉ định 'Database' trong tệp tin cấu hình");

DataProviderType dataProvider; try{ dataProvider= (DataProviderType)System.Enum.Parse(typeof(DataProviderTy pe),GetAppSetting("DataProviderType")); } catch(Exception e){

throw new ArgumentException("Kiểu provider cho tầng truy cập dữ liệu không hợp lệ.");

}

return getDataAccessLayer(dataProvider,GetConnectionString()); }

/*Xây dựng một data provider của tầng truy cập dữ liệu dựa Provider được cung cấp. Chuỗi connection được lấy từ thuộc tính ConnectionString của lớp DataAccessBaseClass*/ (adsbygoogle = window.adsbygoogle || []).push({});

public static DataAccessBaseClass

GetDataAccessLayer(DataProviderType dataProviderType){ return GetDataAccessLayer(dataProviderType, null); }

/*Xây dựng một data provider của tầng truy cập dữ liệu dựa Provider và chuỗi connection được cung cấp*/

public static DataAccessBaseClass

GetDataAccessLayer(DataProviderType dataProviderType, string connectionString) {

switch (dataProviderType){

case DataProviderType.OleDb:

return new OleDbDataAccess(connectionString); case DataProviderType.Odbc:

return new OdbcDataAccess(connectionString); case DataProviderType.Oracle:

return new OracleDataAccess(connectionString); case DataProviderType.Sql:

return new SqlDataAccess(connectionString); default:

return new NullObject (connectionString); }

}

Để sử dụng Framework này ta chỉ cần gọi phƣơng thức GetDataAccessLayer sử dụng hai tham số DataProviderType và ConnectionString để lấy về đối tƣợng điều khiển thao tác với hệ cơ sở dữ liệu tƣơng ứng. Các tham số đƣợc ngƣời dùng cung cấp

Một phần của tài liệu Phát triển mẫu thiết kế phần mềm và ứng dụng (Trang 104)