Ajax và ứng dụng tại công ty điện thoại Hà Nội 1

văn là nghiên cứu của bản thân tôi d−ới sự h−ớng dẫn của T.S Hà Quốc Trung và không có sự sao chép bất hợp pháp từ nghiên cứu của ng−ời khác. Nếu sai tôi hoàn toàn chịu trách nhiệm. Hà Nội, ngày 29 tháng 11 năm 2006 Ng−ời cam đoan: Nguyễn Khắc Vinh. -2- Mục lục Danh mục các ký hiệu, các chữ viết tắt……………………….6 Danh mục các hình vẽ………………………………………………...7 Lời nói đầu………………………………………………………………...9 Phần 1: Ajax một cách thiết kế web mới I. Đặt vấn đề………………………………………………………….......11 II.Ajax mở rộng các client……………………………………………….11 2.1 Khía cạnh ng−ời dùng..........................................................................12 2.2 Khía cạnh mạng………………………………………………….…...14 2.3 Các t−ơng tác dị bộ…………………………………………….……..16 III. Các nguyên tắt cơ bản của Ajax…………………...............………..19 3.1 Trình duyệt chứa ứng dụng, không chứa nội dung...............................19 3.2 Server chuyển dữ liệu, không phải nội dung........................................21 3.3 T−ơng tác liên tục giữa ng−ời dùng với ứng dụng ……………….…..21 Phần 2: Các kỹ thuật chính của Ajax Ch−ơng 1: Các thành phần chính của Ajax………………………….…...23 I. Giới thiệu………………………………………………………………23 II. JavaScript……………………………………………………...............25 III.CSS cách nhìn và cảm nhận.................................................................26 3.1 Chọn lựa CSS…………………………………………………………27 3.2 Đặc tính CSS………………………………………………………….28 IV. DOM và cách thức làm việc với DOM………………………………30 4.1 Làm việc với DOM sử dụng JavaScript………………………………31 4.2 Tìm kiếm node DOM………………………………………………...33 -3- 4.3 Tạo một node DOM.............................................................................33 4.4 Thêm các kiểu dáng cho tài liệu...........................................................34 4.5 Shortcut: Sử dụng đặc tính trong HTML…………………….…..…...35 V. Tải dữ liệu sử dụng kỹ thuật XML…………………………………..36 5.1 IFrames……………………………………………………….………36 5.2 Các đối t−ợng XmlDocument và XmlHttpRequest………..…………38 5.3 Gửi yêu cầu tới server………………………………………………...41 5.4 Sử dụng các hàm gọi ng−ợc để giám sát các yêu cầu………………...41 Ch−ơng II: Cách sử dụng ứng dụng trong Ajax…………………….……44 I. Phát triển và duy trì cơ sở dữ liệu…………………………………….44 1.1 Giới thiệu……………………………………………………………..44 1.2 Refactoring…………………………………………………………...44 1.3 Các mô hình sử dụng refactoring.........................................................45 II. Mô hình MVC: Model-View- Controller…………………………….48 2.1 Giới thiệu……………………………………………………………..48 2.2 Web server MVC…………………………………………………..…49 2.2.1 Các vấn đề nảy sinh với khả năng sử dụng lại các đoạn kịch bản..49 2.2.2 Sắp xếp lại mô hình………………………………………………50 2.2.3 Chia tách nội dung từ thể hiện……………………………………50 Ch−ơng III: Các kỹ thuật chính trong thiết kế ứng dụng……………......52 I. Các mô hình MVC……………………………………………………..52 1.1 MVC dùng trong mô hình lặp……………………………………......52 1.2 Sử dụng MVC tại trình duyệt………………………………………...53 II. View trong một ứng dụng Ajax………………………………….…...55 2.1 Chia tách Logic khỏi View……………………………………….……55 2.2 Chia tách View khỏi Logic…………………………………….………57 III. Bộ điều khiển trong ứng dụng của Ajax……………………….…...57 3.1 Điều khiển sự kiện JavaScript truyền thống……………………….....57 -4- 3.2 Mô hình sự kiện W3C…………………………………………...…...60 IV. Tạo ra View từ các mô hình……………………………………….....61 Ch−ơng IV: Vai trò của Server…………………………………………....62 I. Làm việc với Server…………………………………………………...62 II. Mã ch−ơng trình phía server…………………………………………63 2.1 Các ngôn ngữ ứng dụng thông dụng…………………………………63 2.2 Các kiến trúc N-tier……………………………………………….….64 2.3 Duy trì các mô hình phía client và server…………………………….65 III. Bức tranh toàn cảnh: Thiết kế server thông dụng………………...66 3.1 Làm việc với Framework dựa trên thành phần……………………….66 3.2 Làm việc với kiến trúc h−ớng dịch vụ………………………………..67 3.3 Trao đổi dữ liệu………………………………………………………69 3.3.1 T−ơng tác với client………………………………………………..70 3.3.2 T−ơng tác content-centric……………………………………….…70 3.3.3 Các t−ơng tác script-centric………………………………………..71 3.3.4 T−ơng tác data-centric…………………………………………..…73 IV. Viết cho server………………………………………………………..74 4.1 Sử dụng dạng HTML…………………………………………………75 4.2 Sử dụng đối t−ợng XMLHttpRequest………………………………...77 Phần III. Xây dựng ứng dụng Ajax tại công ty điện thoại Hà Nội 1 I. Khảo sát và đánh giá hiện trạng…………………………………..….78 1.1 Đặc điểm công ty…………………………………………………….78 1.2 Bài toán……………………………………………………………….78 II. Phân tích hoạt động và kết quả thực hiện…………………………...79 2.1 Hoạt động cập nhật thông tin DSLAM…………....………………….79 2.2 Các mối quan hệ...................................................................................80 -5- 2.3 Kết quả thực hiện công việc………………………………………….81 2.4 Đánh giá kết quả thực hiện……………………………………….......84 Phần IV. triển vọng của Ajax và khó khăn I. Xây dựng ứng dụng chất l−ợng…………………………………..…85 II. Bảo mật Ajax………………………………………………………...86 III. Các thay thế cho Ajax………………………………………….…......87 3.1 Các giải pháp dựa trên Macro Media Flash………………………....87 3.2 Java Web start và các kỹ thuật có liên quan………………………...88 IV. Những nh−ợc điểm của Ajax………………………………………..88 V. H−ớng phát triển t−ơng lai………………………………………….89 Kết luận và kiến nghị…………………………………………….....90 Tài liệu tham khảo……………………………………………….......92 -6- Danh mục các ký hiệu, các chữ viết tắt STT Từ viết tắt Giải nghĩa 1 AJAX Asynchronous JavaScript and XML 2 CGI Common Gateway Interface 3 CSS Cascading Style Sheets 4 DOM Document Object Model 5 DHTML Dynamic HTML 6 HTML Hyper Text Messager 7 HTTP Hyper Text Transfer Protocol 8 ID IDENTIFIER 9 IE Internet Explorer 10 IFRAME Inline Frame 11 J2EE Java/Java 2 Enterprise Edition 12 MVC Model – View – Controller 13 RPC Remote Procedure Call 14 ORM Object Relational Mapping 15 W3C World Wide Web Consortium 16 SQL Query Language 17 SOA Service Oriented Architechture 18 UI User Interface -7- Danh mục các hình vẽ, đồ thị Thứ tự Tên hình Trang Hình 1.1 Kiến trúc cơ bản của một ứng dụng đơn trên máy tính để bàn. 13 Hình 1.2 Kiến trúc của các hệ thống client/server và các kiến trúc n-tier 13 Hình 1.3 Biểu đồ của hàm gọi thủ tục cục bộ 15 Hình 1.4 Biểu đồ của một thủ tục gọi từ xa. 16 Hình 1.5 Biểu đồ của một phản hồi đồng bộ 17 Hình 1.6 Biểu đồ của một phản hồi dị bộ 18 Hình 1.7 Thời gian sống của một ứng dụng web truyền thống 19 Hình 1.8 Thời gian sống của một ứng dụng Ajax 20 Hình 2.1 Cách thức các dữ liệu làm việc cùng nhau trong Ajax. 24 Hình 2.2 Cấu trúc cây DOM của một tài liệu HTML 31 Hình 2.3 Chuỗi các sự kiện xử lý dị bộ trong trang web. 38 Hình 2.4 Chu trình thực hiện trong mô hình Facade 46 Hình 2.5 Phân chia trách nhiệm trong mô hình Giám sát 46 Hình 2.6 Mô hình tập lệnh trong ứng dụng sử lý văn bản 47 Hình 2.7 Mô hình singleton 47 Hình 2.8 Thành phần chính trong mô hình MVC 48 Hình 2.9 Cách thức thực hiện một yêu cầu qua mạng 49 -8- Hình 2.10 Mô hình MVC ứng dụng trong cấu trúc widget cây. 53 Hình 2.11 Mô hình MVC với các quy mô khác nhau trong kiến trúc ứng dụng. 54 Hình 2.12 Kiến trúc MVC với mô hình tự lặp 54 Hình2.13 di chuyển phản hồi của tier thể hiện từ server tới trình duyệt 65 Hình2.14 Lập trình web khi không có framework. 66 Hình 2.15 Kiến trúc của một web framework dựa vào thành phần 67 Hình 2.16 Hệ thống xử lý tất cả các đối t−ợng và hệ thống sử dụng Facade xử lý một số ít các đối t−ợng 69 Hình 2.17 Mô hình content-centric 71 Hình 2.18 Kiến trúc Script – centric cho một ứng dụng Ajax. 73 Hình 2.19 Kiến trúc Data-centric trong ứng dụng Ajax 74 Hình 3.1 Giao diện thống kê DSLAM 81 Hình 32 Giao diện thiết bị tại các vệ tinh 82 Hình 3.3 Các lựa chọn nhập số liệu thiết bị trong một trạm 83 Hình 3.5 Giao diện nhập và hiển thị với các lựa chọn các trạm khác nhau 84 -9- Lời nói đầu Trong thời đại ngày nay, việc xây dựng một cổng thông tin cho mỗi doanh nghiệp đang trở thành một nhu cầu tất yếu. Thông qua kênh thông tin trên trang web, doanh nghiệp có thể quảng bá hình ảnh của mình tới tất cả c− dân trên mạng cũng nh− tới các đối tác làm ăn. Với nhu cầu nh− vậy, các công nghệ thiết kế web tĩnh truyền thống nh− Fronpage, Dreamware không thể đáp ứng đ−ợc những đòi hỏi ngày càng khắt khe do khả năng xử lý thông tin trong giao diện ng−ời dùng kém, cơ chế bảo mật đơn giản, cơ sở dữ liệu nghèo nàn không linh hoạt, khả năng cập nhật thông tin hạn chế. Để giải quyết các vấn đề đối với web tĩnh, xuất hiện các công nghệ mới, cho phép cung cấp các trang web động với cơ sở dữ liệu lớn, khả năng cập nhật nhanh, tốc độ trao đổi thông tin nhanh chóng kịp thời, khả năng bảo mật −u việt. Có thể kể ra ở đây các công nghệ nh− PHP, JavaScript, .Net…..và một công nghệ đang dành đ−ợc nhiều sự chú ý trong thời gian gần đây chính là Ajax với cách thức xử lý và xây dựng web mới. Với điều kiện công tác tại Công ty Điện thoại Hà Nội 1, thực tế địa bàn quản lý và yêu cầu công việc của tôi đòi hỏi phải có một cổng thông tin có khả năng trao đổi thông tin với khối l−ợng lớn, tốc độ cao, thời gian trao đổi thông tin nhanh chóng kịp thời, đơn giản dễ dàng sử dụng. Từ thực tế công việc, từ niềm yêu thích Ajax, tôi quyết định chọn đề tài “Ajax và ứng dụng tại công ty Điện Thoại Hà Nội 1” Nội dung của đề tài bao gồm: - Nghiên cứu tổng quan về công nghệ Ajax - Tìm hiểu cách thức triển khai Ajax với các ứng dụng mạng theo mô hình client/server. -10- - Thiết kế ứng dụng thực tế tại Công ty Điện Thoại Hà Nội 1 Đề tài đ−ợc hoàn thành với sự giúp đỡ nhiệt tình của thầy giáo T.S Hà Quốc Trung, Giảng viên Khoa Công nghệ thông tin, Tr−ờng ĐH Bách Khoa Hà Nội, KS Nguyễn Kh−ơng Duy cán bộ Công ty Điện Thoại Hà Nội 1. Mặc dù đã có nhiều cố gắng trong việc nghiên cứu, s−u tầm, dịch và tổng hợp tài liệu nh−ng chắc hẳn luận văn không tránh khỏi những thiếu sót. Tôi rất mong nhận đ−ợc ý kiến đóng góp của các thầy cô, các anh chị cùng toàn thể các bạn. Tôi xin chân thành cảm ơn! -11- Phần 1: Ajack một cách thiết kế web mới I. Đặt vấn đề. Ajax là tên viết tắt của cụm từ (Asynchronous JavaScript + XML). Đây thực sự không phải chỉ là một cái tên. Có rất nhiều điều thú vị xung quanh Ajax, cả về khía cạnh kỹ thuật lẫn khía cạnh kinh tế. Về kỹ thuật, Ajax đ−a vào rất nhiều triển vọng trong các kỹ thuật duyệt web. Google và một vài công ty khác đã và đang sử dụng Ajax để đáp ứng các nhu cầu của cộng đồng, với những gì mà ứng dụng web có thể làm đ−ợc. Trong một vài năm trở lại đây, xuất hiện sự bùng nổ về Internet thế hệ mới. Đi kèm với nó là sự gia tăng của các dịch vụ web (các ứng dụng web) phức tạp hơn. Có rất nhiều kỹ thuật khác nhau đ−ợc áp dụng nhằm cung cấp thông tin tới các client một cách nhanh nhất và hiệu quả nhất. Ajax có thể thực hiện công việc này khá tốt khi sử dụng lại các kỹ thuật đã đ−ợc cài đặt trên phần lớn các máy tính hiện đại. Đây chính là khía cạnh khiến Ajax dành đ−ợc nhiều sự quan tâm trong thời điểm hiện nay. II. Ajax mở rộng các client. Khi nhắc đến các ứng dụng trên mạng, điều đầu tiên chúng ta phải tính chính là cách thức thiết kế các giao diện ng−ời dùng (UI). Việc xây dựng một giao diện client đa dạng là khá phức tạp so với việc thiết kế một trang web. Để có đ−ợc một client đa dạng cần phải thoả mãn hai tiêu chí, thứ nhất nó phải là một client, thứ 2 nó phải đa dạng. Tính đa dạng đ−ợc nhắc đến ở đây chính là mô hình t−ơng tác của client. Một mô hình t−ơng tác ng−ời sử dụng đa dạng phải cung cấp, hỗ trợ đầy đủ các ph−ơng thức giao tiếp tại đầu vào và có những phản hồi trong thời -12- gian đúng yêu cầu. Chúng phải thực sự có hiệu quả, giống nh− những ứng dụng trên máy tính để bàn, ví dụ nh− ch−ơng trình word và excel. 2.1 Khía cạnh ng−ời dùng Lấy ch−ơng trình bảng tính trong máy tính để bàn làm ví dụ (ch−ơng trình Excel). Có thể nói, ch−ơng trình này đã cung cấp cho ta khá đầy đủ các tính năng của bảng tính. Ta có thể thực hiện các t−ơng tác với bảng tính theo nhiều cách khác nhau. Sau khi thực hiện xong các thao tác, ch−ơng trình cho ta các tính năng quay trở lại các hoạt động tr−ớc đó thông qua các phím back hay follow. Tuy vậy, ứng dụng này vẫn không phải là một client đa dạng. Do đây là một ch−ơng trình ứng dụng chạy trên máy tính để bàn nên các mô hình dữ liệu và mô hình logic của nó đều đ−ợc thực hiện trong một môi tr−ờng đóng, ở đó các ch−ơng trình đó có thể nhìn thấy nhau tuy vậy chúng không thể liên kết đ−ợc với bên ngoài. Mặt khác, theo nh− định nghĩa về một client thì client là một ch−ơng trình mà có thể kết nối thông tin với các ch−ơng trình (tiến trình ) độc lập khác, điển hình là các ch−ơng trình chạy trên một server. Vể căn bản, server có nhiều đặc tính −u điểm hơn so với client cả về kích th−ớc lẫn tính năng hoạt động, nó có thể l−u đ−ợc rất nhiều thông tin. Ng−ời sử dụng cuối có thể xem và thay đổi các thông tin trên Client, và nếu một vài client kết nối tới cùng một server, chúng cho phép chia sẻ dữ liệu với nhau. Chính vì thế, ứng dụng bảng tính (excel) trên máy tính để bàn không phải là một client đa dạng. -13- Hình 1.1: Kiến trúc cơ bản của một ứng dụng đơn trên máy tính để bàn. Với máy tính để bàn, ứng dụng chạy trên tiến trình của nó, trong đó mô hình dữ liệu và logic là có thể nhìn thấy nhau. Một ứng dụng thứ 2 chạy trên nó sẽ không thể truy cập đ−ợc vào mô hình dữ liệu của ch−ơng trình tr−ớc, chúng chỉ có thể truy cập vào đó thông qua file hệ thống. Trạng thái của ch−ơng trình đ−ợc l−u trữ trong một file đơn, và hoàn toàn bị khoá khi ứng dụng đang chạy, qua đó ngăn chặn tất cả các trao đổi thông tin tức thời. Hình 1.2 Kiến trúc của các hệ thống client/server và các kiến trúc n-tier -14- Với kiến trúc client/server, Server đ−a ra một mô hình chia sẻ dữ liệu, với mô hình này các client có thể t−ơng tác đ−ợc với nhau. Các client vẫn duy trì mô hình dữ liệu riêng của nó, dùng cho các truy cập cố định. Một vài client có thể t−ơng tác với cùng một server, với việc khoá tài nguyên đ−ợc quản lý tại một mức tiêu chuẩn của các đối t−ợng riêng lẻ hoặc các cơ sở dữ liệu. Một server cũng có thể là một tiến trình đơn (giống nh− trong mô hình client/server truyền thống trong những năm đầu của thập niên 90). Trong bất kỳ tr−ờng hợp nào, từ khía cạnh client, server có một điểm truy cập duy nhất và ta có thể xem nó nh− là một hộp đen. Trong một mô hình kiến trúc n-tier, server sẽ giao tiếp với các server đầu cuối khác nh− là các cơ sử dữ liệu , tạo đ−ờng dẫn tới các lớp trung gian (các lớp này có thể hoạt động cả ở client và server). Về mặt bản chất các ứng dụng Ajax đ−ợc đặt tại điểm cuối, hoạt động giống nh− một client. Tất nhiên, các trình duyệt web là các client, liên kết với web server thông qua các yêu cầu trang web. Một trình duyệt có một số chức năng đa dạng, phục vụ cho mục đích quản lý việc duyệt web của ng−ời sử dụng, ví dụ các nút bấm, danh sách nhớ cũng nh− các nút chức năng dùng để l−u trữ dữ liệu khác. Với các trang web hiện đại, ví dụ nh− trang mua bán sách Amazon, cung cấp cho ta một l−ợng thông tin dồi dào, và cách thức để t−ơng tác với l−ợng tông tin lớn này là click vào đ−ờng link và điền thông tin vào các form. Điều này là khá đơn giản và hiệu quả, tạo cho ng−ời dùng cảm giác tiện lợi khi truy cập vào các trang web kể trên. 2.2 Khía cạnh mạng Mục đích chính của việc phát triển Internet chính là tạo ra một môi tr−ờng trong đó tất cả các máy tính trên thế giới kết nối với nhau thành một máy tính với nguồn tài nguyên rất lớn. Sẽ không còn sự phân biệt giữa các thủ -15- tục gọi từ xa cũng nh− thủ tục gọi cục bộ, khi đó sẽ không thể xác định đ−ợc thiết bị nào đang hoạt động. Tuy vậy các thủ tục gọi từ xa và thủ tục gọi cục bộ không giống nhau. Chi phí thông tin trên mạng khá lớn (do chậm và không ổn định). Trong cùng một miền, rất nhiều máy tính sẽ chung một kết nối mạng để gửi và nhận dữ liệu. Đây là nguyên nhân dẫn tới tốc độ mạng bị giảm do có quá nhiều tiến trình vật lý trên đ−ờng dây. Với mỗi yêu cầu, ta cần mã hoá chúng thành một đối t−ợng, d−ới dạng một chuỗi dữ liệu. Chuỗi dữ liệu này sau đó đ−ợc chuyển tới giao thức ứng dụng (HTTP) và đ−ợc gửi đi trên đ−ờng truyền. Tại đầu xa, giao thức ứng dụng đ−ợc giải mã để tạo ra bản sao của đối t−ợng yêu cầu. Bản sao này sau đó đ−ợc cung cấp cho mô hình dữ liệu. Để có thể giao tiếp đ−ợc với hàm gọi, các lớp nối tiếp cũng nh− các lớp giao vận phải tìm đ−ờng đi rất nhiều. Hình 1.3: Biểu đồ của hàm gọi thủ tục cục bộ -16- Hình 1.4: Biểu đồ của một thủ tục gọi từ xa. Vì vậy, để thực hiện một lệnh gọi qua mạng sẽ là không hiệu quả nếu nh− gọi một ph−ơng thức cục bộ trong bộ nhớ. Hơn nữa, do tính chất không đảm bảo của mạng nên công việc này sẽ không hiệu quả và không có độ chính xác cao. Nhìn chung, trễ mạng tạo ra sự không ổn định cũng nh− gây ra những lỗi đối với những ứng dụng trong các ứng dụng của thế giới th−c. 2.3 Các t−ơng tác dị bộ Lấy ví dụ về tiến trình ng−ời mẹ thực hiện trong một buổi sáng. Tiến trình đó bao gồm việc đánh thức ng−ời con đang ngủ say, mở cửa sổ và cho mèo ăn sáng. Nếu nh− ng−ời mẹ thực hiện tiến trình trên một cách tuần tự (đồng bộ) tức là đánh thức và đợi khi ng−ời con dậy hẳn mới đi mở cửa sổ và cho mèo ăn, quá trình diễn ra một cách chậm chạp và tốn rất nhiều thời gian. Có thể khi mở cửa sổ xong thì quên mất nhiệm vụ cho mèo ăn. Vậy chúng ta phải thực hiện tiến trình trên nh− thế nào để đạt đ−ợc những yêu cầu đặt ra ? Trong thực tế, chúng ta cố gắng thực hiện các phản hồi giao diện ng−ời sử dụng độc lập với các hoạt động khác đang diễn ra -17- Hình 1.5: Biểu đồ của một phản hồi đồng bộ Trong lĩnh vực tin học, những gì chúng ta làm là tạo ra một xử lý dị bộ trong một tiến trình riêng rẽ. Mỗi đối t−ợng sẽ thực hiện một tiến trình riêng của chúng. Trong thời gian này các đối t−ợng sẽ không t−ơng tác với nhau. Tuy vậy các tiến trình này phải chạy theo một kịch bản nhất định. Với bất kỳ một giao tiếp ng−ời dùng nào, luôn có một tiến trình dị bộ quản lý độ dài các tính toán, thực hiện nó trong khi ng−ời dùng đang thực hiện các thao tác khác. Cần phải khoá ng−ời sử dụng trong khi tiến trình đang thực hiện. Tuy vậy do tiến trình này có thể đ−ợc thực hiện trong thời gian ngắn nên việc khoá hoạt động của ng−ời dùng là có thể chấp nhận đ−ợc. -18- Hình 1.6: Biểu đồ của một phản hồi dị bộ Giải pháp ở đây là chúng ta sẽ sử dụng những lệnh gọi từ xa dị bộ. Nếu nh− HTTP là giao thức hỏi-đáp, trong đó client tạo ra một yêu cầu tài liệu và server trả lời bằng cách gửi tài liệu, hay nói rằng nó không tìm thấy, đ−a ra một vị trí thay thế, nói với client sử dụng bản copy của nó…Giao thức hỏi- đáp là giao thức 1 chiều. Client có thể liên lạc với server nh−ng server không thể khởi tạo một phiên truyền thông với client, do đó server không thể nào nhớ đ−ợc client từ một yêu cầu tr−ớc đó. Chính vì thế, đặc tính then chốt của giải pháp gọi ng−ợc dị bộ là ở chỗ client sẽ tạo ra thông báo 2 lần: một lần khi bắt đầu chuỗi hoạt động và lần thứ 2 khi chuỗi hoạt động hoàn thành. Điều này thì HTTP và mô hình ứng dụng web truyền thống không thực hiện cho chúng ta. -19- III. Các nguyên tắc cơ bản của Ajax 3.1 Trình duyệt chứa ứng dụng, không phải chứa nội dung Trong ứng dụng web truyền thống, trình duyệt là một đầu cuối. Nó không biết bất kỳ điều gì về ng−ời dùng đang ở đâu trong luồng thông tin. Tất cả các thông tin đ−ợc l−u trữ trên web server, th−ờng là trong phiên ng−ời dùng. Các phiên ng−ời dùng phía server th−ờng đ−ợc nhắc đến gần đây, điển hình là một phần của chuẩn API. Hình 1.7: Thời gian sống của một ứng dụng web truyền thống. Hình 1.7 mô tả chu kỳ sống của một ứng dụng web. Tất cả các trạng thái của hội thoại ng−ời dùng với ứng dụng đ−ợc quản lý trên server web. Khi ng−ời sử dụng truy cập vào hoặc khởi tạo một phiên, một vài đối t−ợng phía server sẽ đ−ợc tạo ra. Trong cùng thời điểm này, trang home sẽ đ−ợc load tới trình duyệt, trong một luồng HTML mà đ−ợc chộn lẫn giữa các thể hiện và dữ liệu cụ thể của ng−ời dùng cùng với danh sách những vấn đề đã xem gần đây. Bất cứ khi nào ng−ời dùng t−ơng tác với trang, một tài liệu khác sẽ đ−ợc gửi tới trình duyệt, chứa cùng dữ liệu. Khi đó trình duyệt sẽ bỏ toàn bộ tài liệu cũ -20- đi và thay vào đó là tài liệu mới mà không biết cái mới đó sẽ làm việc nh− thế nào. Khi ng−ời dùng thoát và đóng trình duyệt, khi đó ứng dụng sẽ đóng lại và phiên làm việc bị xoá bỏ. Bất kỳ thông tin mà ng−ời dùng cần xem trong phiên tới sẽ đ−ợc quản lý. Một ứng dụng Ajax sẽ dịch chuyển một số các đối t−ợng tới trình duyệt, nh− hình sau: Hình 1.8: Thời gian sống của một ứng dụng Ajax Khi ng−ời dùng truy cập vào, một tài liệu phức tạp hơn đ−ợc chuyển tới trình duyệt, trong đó có một phần lớn là các mã JavaScript. Tài liệu này sẽ tồn tại trong suốt phiên làm việc của ng−ời dùng, mặc dù có thể nó bị thay thế bởi các thông tin khác khi ng−ời dùng t−ơng tác với đối t−ợng khác. Do tài liệu tồn tại trong toàn bộ phiên ng−ời dùng nên nó có thể l−u lại đ−ợc trạng thái tất cả các trạng thái. -21- 3.2 Server chuyển dữ liệu, không phải là nội dung. Nh− đã nói ở trên, ứng dụng web truyền thống cung cấp cả nội dung và dữ liệu tại tất cả các b−ớc. Khi ng−ời dùng thêm vào một mục, thì việc chúng ta phải thực hiện là cập nhật lại toàn bộ thông tin. Điều này là rất lãng phí và không cần thiết. Với Ajax, bằng việc gửi đi các yêu cầu dị bộ tới server và server chỉ phải gửi lại những dữ liệu t−ơng ứng. ứng dụng có thể thực hiện công việc này theo nhiều cách, ví dụ nh− gửi trả lại một đoạn JavaScript, một luồng text hoặc một tài liệu XML nhỏ. Nh− vậy với các cách kể trên hoạt động hiệu quả hơn và nhỏ gọn so với cách trả về của ứng dụng web truyền thống. Trong một ứng dụng Ajax, l−u l−ợng load là rất lớn khi ng−ời dùng truy nhập vào một server lớn. Chính vì vậy cách thức thực giao tiếp kể trên với server là khá hiệu quả. 3.3. T−ơng tác liên tục giữa ng−ời dùng với ứng dụng Một trình duyệt web cung cấp 2 cơ chế đầu vào cho một đối t−ợng: qua các siêu liên kết (hyperlinks) và qua siêu văn bản (HTML). Các siêu liên kết có thể đ−ợc xây dựng trên server và đ−ợc tải về tr−ớc với các tham số giao diện cổng (CGI), đ−ợc chỉ ra tại các trang server động hoặc các serverlet. Chúng có thể phù hợp với các hình ảnh và các bảng CSS, để cung cấp thông tin trả về ngay khi con chuột di chuyển. Các siêu liên kết có thể đ−ợc thực hiện giống nh− các thành phần UI. Các điều khiển Form đ−a ra một tập con cơ sở của các thành phần giao diện ng−ời dùng máy tính để bàn tiêu chuẩn: các hộp text, các hộp kiểm, các nút bấm…Tuy vậy không có các điều khiển cây , l−ới, các hộp combo-box. Các form cũng giống nh− các siêu liên kết đ−ợc đặt tại URL phía server. Tuy vậy các siêu liên kết và các form thể hiện đ−ợc đặt trong hàm JavaScript. Đây là một kỹ thuật thông dụng trong các trang web để cung cấp định dạng trong JavaScript, kiểm tra các tr−ờng trống, các số nằm -22- ngoài dải quy định tr−ớc khi đ−a dữ liệu tới server. Những hàm JavaScript chỉ tồn tại cùng với trang và chúng sẽ bị thay thế khi trang thay đổi. Trong khi trang thay đổi, ng−ời dùng vẫn không biết đ−ợc những gì đang diễn ra. Trang cũ vẫn tồn tại trong một khoảng thời gian, và trình duyệt vẫn cho phép ng−ời dùng chọn vào bất kỳ đ−ờng dẫn nào họ nhìn thấy, nh−ng làm nh− vậy sẽ tạo ra những kết quả không chính xác và có thể làm hỏng phiên làm việc của server. Ng−ời dùng cần chờ đợi cho tới khi trang đ−ợc làm mới, th−ờng với một tập các lựa chọn t−ơng tự nh− những gì đã có từ tr−ớc. Sử dụng Ajax, với cơ chế gửi dữ liệu dị bộ, ng−ời dùng có thể thực hiện các thao tác trên ứng dụng một cách liên tục, tạo cho họ cảm giác thời gian chờ đợi là rất ngắn và không bị cảm giác khó chịu. Một thuận lợi nữa của Ajax là ở chỗ chúng ta có thể duy trì các sự kiện các hoạt động ng−ời dùng trong một phạm vi rộng lớn. Các khái niệm phức tạp hơn nh− drag-and-drop trở nên đơn giản… Từ khía cạnh sử dụng, sự thoải mái này là rất quan trọng không chỉ bởi vì nó cho phép chúng ta kiểm tra lại các hình ảnh mà còn bởi vì nó cho phép chúng ta sử dụng các t−ơng tác ng−ời dùng cũng nh− các yêu cầu server đ−ợc đầy đủ hơn. -23- Phần 2: Các kỹ thuật chính của Ajax Ch−ơng I: Các thành phần chính của Ajax I. Giới thiệu: Ajax không phải là một kỹ thuật đơn, nó đ−ợc hình thành nên từ sự kết hợp từ 4 kỹ thật khác nhau: - Javascript: Javascript là một ngôn ngữ kịch bản mục đích chung, đ−ợc thiết kế ra để nhúng vào trong các ứng dụng. Bộ biên dịch JavaScript trong các trình duyệt web cho phép thực hiện các hoạt động đ−ợc lập trình sẵn với rất nhiều khả năng khác nhau. Các ứng dụng Ajax th−ờng đ−ợc viết trên nền JavaScript. - Cascading Style Sheets (CSS): CSS đ−a ra cách thức định nghĩa các loại thành phần một trang web. Các định nghĩa này th−ờng đơn giản và hiệu quả. CSS còn đ−a ra các cách thức thực hiện khác nhau. Trong một ứng dụng Ajax, bằng CSS, ta có thể thay đổi đ−ợc kiểu cách của một giao diện ng−ời dùng. - Document Object Model (DOM): DOM mô tả cấu trúc của các trang web, giống nh− là một tập các đối t−ọng có thể ch−ơng trình hoá, mà có thể đ−ợc kết hợp với JavaScript, Việc viết kịch bản bằng DOM cho phép một ứng dụng Ajax thay đổi giao diện ng−ời dùng tại những phần làm lại của một trang. - Đối t−ợng XMLHttpRequest: đ−ợc sử dụng cho phép các nhà lập trình web truy vấn dữ liệu từ web server. Định dạng dữ liệu th−ờng là XML, tuy nhiên nó có thể làm việc với bất kỳ dữ liệu dạng text nào. Trong khi đối t−ợng XMLHttpRequest là một công cụ linh hoạt để thực hiện truy vấn dữ -24- liệu từ server, thì còn có nhiều cách thức khác cũng có khả năng thực hiện công việc trên. Trong Ajax, JavaScrip đ−ợc sử dụng để kết nối các phần của ứng dụng với nhau, định nghĩa các b−ớc làm việc ng−ời dùng và logic hoá công việc của ứng dụng. Giao diện ng−ời dùng đ−ợc sử dụng và đ−ợc làm mới bằng cách sử dụng JavaScript có ứng dụng DOM, mô tả và tổ chức lại dữ liệu của ng−ời dùng, xử lý các t−ơng tác về chuột và bàn phím. CSS cung cấp một cái nhìn đây đủ và tổng thể về ứng dụng và đối t−ợng XMLHttpRequest đ−ợc sử dụng để giao tiếp dị bộ với server, nhận các yêu cầu ng−ời dùng và thực hiện cập nhật dữ liệu trong khi ng−ời dùng làm việc. Hình 2.1: Cách thức các dữ liệu làm việc cùng nhau trong Ajax. -25- Trong hình 2.1, JavaScript định nghĩa các quy tắc làm việc. DOM và CSS đ−ợc sử dụng để tổ chức lại các xuất hiện của ứng dụng nhằm phù hợp với dữ liệu chuyển từ server qua đối t−ợng XMLHttpRequest. Ba trong 4 kỹ thuật trên gồm CSS, DOM và JavaScript đã đ−ợc biết đến nh− là HTML động hoặc đơn giản là DHTML. Do không có cơ chế quay trở lại (back) server nên ở DHTML tồn tại rất nhiều vấn đề. Ajax sử dung DHTML, nh−ng có thêm vào các yêu cầu dị bộ, nhờ đó tăng thời gian sống của một trang web. Bằng việc cho phép quay trở lại server trong khi đang thực hiện t−ơng tác mà không gây ra bất kỳ sự gián đoạn nào, Ajax đã tạo ra những khác biệt lớn mà các kỹ thuật khác không thể thực hiện đ−ợc. II. JavaScript Đóng vai trò chính trong các công cụ của Ajax chính là JavaScript. Một ứng dụng Ajax sẽ download toàn bộ một client vào bộ nhớ. JavaScript thực hiện việc kết hợp giữa dữ liệu với thể hiện và logic ch−ơng trình. JavaScript là một ngôn ngữ lập trình mục đích chung. Có thể coi JavaScript là ngôn ngữ kịch bản mục đích chung với các đặc tính nh− các biến không đ−ợc khai báo cụ thể d−ới dạng chuỗi, số thực hoặc đối t−ợng, và cùng một biến có thể đ−ợc đăng ký các loại giá trị khác nhau. Ví dụ : var x=3.1415926 x=’pi’ ở đây, x vừa đ−ợc khai báo là số, vừa đ−ợc đăng ký là giá trị chuỗi. Bên cạnh đó JavaScript có tính thông dịch, có nghĩa là mã nguồn đ−ợc thực hiện một cách trực tiếp. Khi phát triển một ứng dụng JavaScript, ta có thể thay thế mã nguồn trên web server, và mã nguồn đ−ợc truyền trực tiếp qua mạng tới trình duyệt web. Thậm chí, ta có thể khai báo biến d−ới dạng sau: Var x=eval(‘7*5’); -26- ở đây chúng ta đã định nghĩa tính toán của chúng ta d−ới dạng text, thay vì 2 số và một thuật toán. Hàm gọi eval() thay thế đoạn JavaScript mà nó chứa, và trả về giá trị mong muốn. Trong hầy hết các tr−ờng hợp, cách thức này làm chậm quá trình thực hiện ch−ơng trình, tuy nhiên do linh hoạt nên nó vẫn đ−ợc sử dụng. Một đặc tính nữa của JavaScript là tính chung, có nghĩa là ngôn ngữ phù hợp với phần lớn các thuật toán. Ngôn ngữ JavaScript gốc chứa hỗ trợ cho các số, chuỗi, ngày tháng, các mảng, các xử lý văn bản và các hàm toán học… Ta có thể định nghĩa các đối t−ợng có cấu trúc sử dụng JavaScript, đ−a ra các nguyên tắc thiết kế và trình tự của mã ch−ơng trình. Với môi tr−ờng trình duyệt web, các phần của một trình duyệt nh− là CSS, DOM và các đối t−ợng XMLHttpRequest đ−ợc kết hợp với JavaSCript, cho phép nhà quản lý t− động điều khiển các trang web. III. CSS cách nhìn và cảm nhận CSS là một phần quan trọng để thiết kế web. Chúng tìm kiếm tần suất sử dụng các thành phần trong các ứng dụng web, cũng nh− trong Ajax. Một bảng biểu đ−a ra cách thức định nghĩa tập trung cho các loại hình ảnh, nhờ đó có thể đ−ợc áp dụng các định nghĩa này vào các thành phần khác nhau trên trang web một cách dễ dàng. Bên cạnh đó để quan sát đ−ợc các đối t−ợng khác nh− nh− màu sắc, đ−ờng bao, ảnh nền, độ trong suốt và kích cỡ, bảng biểu này có thể định nghĩa cách thức mà các thành phần này đ−ợc tạo ra dựa trên mối quan hệ với một thành phần khác và dựa trên t−ơng tác ng−ời dùng. CSS đ−a ra một tài liệu bằng cách định nghĩa các quy tắc, th−ờng là các file riêng rẽ, đ−ợc đ−a vào trang web đang đ−ợc tạo. Một quy tắc về mô tả kiểu dáng bao gồm ._.2 phần: phần chọn lựa là phần khai báo. Phần chọn lựa chỉ định những loại (thành phần) nào sẽ đ−ợc mô tả, phần khai báo sẽ khai báo đặc tính sẽ đ−ợc áp dụng. -27- Ví dụ : h1 {color: red} trong ví dụ này phần chọn lựa đ−ợc áp dụng co tất cả các tags trong tài liệu, phần khai báo thay đổi đặc tính của loại kiểu dáng đơn. 3.1Chọn lựa CSS Để định nghĩa một kiểu tag của HTML cung cấp cho một dạng nào đó, ta có thể giới hạn quy tắc áp dụng áp dụng với một nội dung cụ thể. Có nhiều cách để chỉ định một nội dung: bằng loại tag HTML, bằng các lớp hoặc bằng nhận dạng duy nhất . *)Lựa chọn tag: Ví dụ để áp dụng luật trên cho các tag mà đ−ợc chứa cùng với một tag , ta sẽ thay đổi quy tắc nh− sau: Div h1 {color: red} Cách thức này cũng đ−ợc nhắc đến nh− là những chọn lựa kiểu thành tố, bởi vì chúng quyết định liệu khi nào một thành phần DOM đ−ợc mô tả dựa trên thành phần của nó. Chúng ta cũng định nghĩa các lớp để mô tả những thứ không thực hiện với một loại tag HTML. Ví dụ, nếu ta định nghĩa một loại lớp có kiểu callout, xuất hiện d−ới dạng là một hộp có màu sắc, chúng ta có thể viết nh− sau: Callout {border: solid blue 1px; background-color: cyan} Để đăng ký một lớp cho một thành phần, chúng ta chỉ việc khai báo thuộc tính lớp trong tag HTML. Các thành phần có thể đăng ký nhiều lớp khác nhau. Ta có thể sử dụng cả 2 loại lớp trong một tài liệu hoặc kết hợp các lớp với các quy định dựa trên thành tố, để định nghĩa một lớp mà chỉ hoạt động trên một số loại tag nhất định. Ta cũng có thể sử dụng trong mô tả các chọn lựa cha con để tạo ra những quy tắc cụ thể. Div.prose span.highlight {background-color: yellow} -28- *) Lựa chọn nhận dạng (ID) Ta cũng có thể chỉ định những quy tắc mà áp dụng cho một thành phần với một ID cho tr−ớc, giống nh− việc chỉ định thuộc tính id trong HTML. Trong HTML, mỗi thành phần sẽ có một ID duy nhất và vì thế những chọn lựa đ−ợc chỉ định tr−ớc sẽ đ−ợc sử dụng để chọn lựa một thành phần đ−a trên trang web. Ví dụ, để tạo một nút close phía trên trang, ta có thể định nghĩa nó nh− sau: #close {color:red} CSS cho phép ta định nghĩa các kiểu dựa trên các chọn lựa ảo. Một trình duyệt web định nghĩa một số l−ợng nhất định các chọn lựa ảo. Ví dụ nh−: .First-letter{ Font-size: 500% Color:red Fload:left } hoặc thể hiện theo cách sau: .P.illuminated:firtst-letter{ Font-size: 500% Color:red Float:left } 3.2 Đặc tính CSS Bất kỳ thành phần nào trong một trang HTML đều có thể đ−ợc thể hiện thông qua nhiều cách khác nhau. Ví dụ nh− thành phần phổ biến nhất nh− là cũng có tới 12 cách thể hiện. -29- Văn bản của một thành phần có thể đ−ợc thể hiện d−ới dạng màu sắc, kích cỡ chữ, độ đậm nhạt và kiểu dáng sử dụng. Các phông chữ có thể có nhiều chức năng, cho phép thay đổi trong những tình huống phông chữ mong muốn không cài đặt trên máy client. Để quy định màu sắc, kiểu chữ, chúng ta có thể định nghĩa một kiểu dáng d−ới dạng nh− sau: .robotic{ font-size: 14pt; font-family: courier new, courier, monospace; font-weight: bold; color:gray; } CSS có thể định nghĩa theo lớp và kích th−ớc (mô hình hộp) của một thành phần bằng cách chỉ định lề và các thành phần padding khác, theo cách cho cả 4 kích th−ớc hoặc cho từng kích th−ớc khác nhau. .padded{padding: 4px;} .ecccentricPadded{ padding-bottom: 8px; padding-top: 2px; padding-left:2px; padding-right:1px; } Kích th−ớc của từng thành phần có thể đ−ợc quy định thông qua đặc tính chiều rộng và độ cao. Vị trí của một thành phần có thể đ−ợc chỉ định theo vị trí toàn cục hay vị trí quan hệ. Với cách thức chỉ định vị trí toàn cục, thành phần của trang đ−ợc xác định vị trí bằng cách thiết lập các đặc tính bên trên và bên trái, trong đó mối quan hệ vị trí của các thành phần sẽ thay đổi theo toàn bộ trang web. -30- Màu nền đ−ợc thiết lập qua đặc tính background-color. Thêm vào đó ta có thể thiết lập hình ảnh nền thông qua đặc tính background-image. .titlebar{ background-image: url(image/topbar.png);} Ta có thể thiết lập đặc tính hiện và ẩn của các thành phần thông qua đặc tính visibility:hidden hoặc display: none. IV. DOM Và cách thức làm việc với dom DOM (Document Object Model- Mô hình đối t−ợng tài liệu) tạo ra một tài liệu (một trang web) cho thực thể JavaScript. Khi sử dụng DOM, cấu trúc tài liệu có thể đ−ợc xây dựng một cách tự động. Đây là một đặc tính hết sức hữu ích khi tiến hành viết một ứng dụng Ajax. Trong một ứng dụng web cơ bản, mỗi khi có các luồng thông tin HTML mới từ server đến, ta th−ờng làm mới trang, và ta có thể định nghĩa lại giao diện thông qua việc sử dụng một bản HTML mới. Trong ứng dụng Ajax, những thay đổi chính tại giao diện ng−ời dùng sẽ đ−ợc thực hiện thông qua việc sử dụng DOM. Các tag HTML trong một trang web đ−ợc tổ chức d−ới dạng một cấu trúc cây. Mỗi nút của cây là một tag HTML, dùng để mô tả tài liệu. T−ơng tự nh− thế tag sẽ mô tả phần thân tài liệu, đây là một nút của cấu trúc tài liệu mà có thể quan sát đ−ợc. Trong phần thân này, chúng ta tìm thấy các bảng, các sơ đồ, danh sách và các loại tag khác. Một thể hiện DOM của một trang web đ−ợc cấu trúc d−ới dạng cây, bao gồm các thành phần hoặc các node, mỗi node lại có thể chứa các node con. Thực thể JavaScript xác minh node gốc của trang web thông qua tài liệu biến toàn cục, là điểm bắt đầu của tất cả thao tác DOM. Thành phần DOM đ−ợc định nghĩa bởi W3C. Một thành phần cha sẽ không có hoặc có nhiều thành phần con và một tập các thuộc tính, đ−ợc l−u trữ d−ới dạng một mảng( bằng một ký tự khoá ví dụ nh− độ rộng hoặc một kiểu chỉ số nào đó.) -31- Hình 2.2: Cấu trúc cây DOM của một tài liệu HTML Trong hình 2.1, mỗi thành phần là một tag dấu trong HTML. Nh− vậy có thể coi DOM là một bản sao của HTML. Mối quan hệ ở đây là quan hệ 2 chiều. Những thay đổi trong DOM sẽ dẫn đên những thay đổi trong HTML và ng−ợc lại. 4.1 Làm việc với DOM sử dụng JavaScript Trong nhiều ứng dụng, ta muốn thay đổi giao diện ng−ời dùng khi họ làm việc, cung cấp các quay ng−ợc đối với các tiến trình cũng nh− với các hoạt động của họ . Để thực hiện đ−ợc điều này ta có thể thực hiện bằng cách thay thế nhãn hoặc màu sắc của một thành phần đơn, thông qua việc đ−a ra một hộp hội thoại, để thay thế những phần màn hình ứng dụng với một tập các widget mới. Cách thức thông dụng nhất là xây dựng một cấu trúc cây DOM thông qua việc điền đầy trình duyệt với một HTML (nói theo cách khác, ta thực hiện viết một trang HTML). Ví dụ, ta muốn đ−a ra một lời chào tới ng−ời -32- dùng. Ban đầu trang đ−ợc tải về, ta không biết tên của ng−ời đó, vì thế ta muốn có thể thay đổi cấu trúc của trang để thêm vào tên ng−ời dùng ở phía sau, ta có thể thực hiện thêm các node DOM một cách tự động. Ví dụ: <link rel= ‘stylesheet’ type=’text/css’ href=’hello.css’/> <script type=’text/javascript’ src=’hello.js’> hello Trong đoạn mã này chúng ta đã đ−a vào 2 thành phần: một CSS và một file chứa đoạn mã JavaScript. Ta cũng khai báo một giá trị trống với nhận dạng là ID, thành phần này giúp ta có thể thêm vào các thành phần tiếp theo một cách tự động. ở đây, CSS định nghĩa kiểu màu sắc và kiểu chữ khác nhau giữa các thành phần. Và đoạn JavaScript thực hiện công việc thêm các node mới một cách tự động giúp chúng ta. Nh− vậy DOM đã đ−ợc xây dựng và ta có thể thực hiện các công việc trên nó. Ta có thể thay đổi thuộc tính các node, ẩn và hiện các node cũng nh− tạo ra các node mới. -33- 4.2. Tìm kiếm node DOM Điều cần thiết đầu tiên khi muốn làm việc trên một DOM với JavaScript là phải tìm đ−ợc các thành phần mà ta muốn thay đổi. Nh− đã đề cập ở phần trên, chúng ta có một node gốc, trong biến toàn cục tài liệu (document) Mọi node trong DOM đều là node con, cháu của biến tài liệu. Tuy vậy việc vẽ lại toàn bộ theo cấu trúc cây là khá phức tạp, đặc biệt với những tài liệu có kích cỡ lớn. Để xử lý vấn đề này, đơn giản chúng ta chỉ cần sử dụng một số các shortcut. Hầu hết các thành phần đ−ợc sử dụng ở đây đều là một tag với một ID duy nhất. Trong file JavaScript ở trên, giả sử ta muốn tìm 2 thành phần: một là thành phần đồ hoạ và một là tag để thêm vào nội dung. Biết đ−ợc điều này, ta sẽ thêm vào các thuộc tính ID cho từng thành phần trong HTML : Và Bất kỳ node DOM nào đều có một ID đ−ợc đăng ký, và ID này có thể đ−ợc sử dụng trong một hàm gọi, ví dụ: Var hello=document.getElementById(‘hello’); Nh− vậy ta có thể tìm kiếm một node DOM thông qua ID của nó hoặc thông qua loại tag HTML. Nhìn chung, sử dụng hàm getElementById() an toàn hơn so với hàm getElementsByTagName(). 4.3 Tạo một node DOM Có một số tr−ờng hợp ta muốn tạp thêm những node mới và thêm chúng vào tài liệu. Khi đó các ứng dụng JavaScript của DOM sẽ cho chúng ta cách thức để thực hiện công việc đó. Lấy ví dụ về đoạn mã Hello.js. Khi tải trang, chúng ta tự động tạo nội dung cho node DOM với ID ‘empty’. Hàm addNode() sử dụng các ph−ơng thức -34- document.createElement() và ph−ơng thức document.createTextNode(). Trong đó createElement() dùng để tạo thành phần HTML , ví dụ nh− : Var childEl=document.createElement(“div”); còn thành phần createTextNode() tạo ra một node DOM t−ơng ứng với đoạn text, th−ờng thấy trong các tag heading, div, paragraph và các tag về danh sách var txtNode=document.createTexxtNode(“some text”); DOM xử lý các node văn bản một cách riêng rẽ từ các thể hiện của các thành phần HTML. Các node văn bản không đ−ợc chỉ định kiểu từ tr−ớc và do đó chúng chiếm rất ít tài nguyên. Cũng có thể chỉ định kiểu cho văn bản trên thông qua thành phàn DOM chứa nó. Mỗi một nde đ−ợc tạo ra sẽ phải đ−ợc gắn vào văn bản tr−ớc khi có thể nhìn thấy nó trong cửa sổ trình duyệt. Ph−ơng thức node DOM appendChidl() thực hiện chức năng này. el.appendChild(childEl) Nh− vậy, với 3 ph−ơng thức createElement(), createTextNode(), và appendChild() chúng ta đã có thể thêm cấu trúc mới vào một tài liệu. 4.4 Thêm các kiểu dáng cho tài liệu Chúng ta có thể biến đổi các thành phần trong một trang web thông qua DOM, ví dụ nh− vị trí, chiều cao, độ rộng, màu sắc, đ−ờng bao… Việc thay đổi thuộc tính này cho phép chúng ta điều khiển đ−ợc tốt hơn. Bên cạnh đó trình duyệt web cung cấp chúng ta những tính toán chính xác trên JavaScript tại giao diện mức thấp. *) Đặc tính tên lớp (ClassName) Khi chúng ta định nghĩa các thành phần mà ta tạo trong code, ta có thể áp dụng CSS, bằng việc sử dụng đặc tính className của node DOM. -35- Ví dụ áp dụng quy tắc thể hiện đ−ợc định nghĩa tr−ớc bởi lớp declared cho node hello trong DOM Hello.className=’declared’ Nhờ đó ta có thể đăng ký nhiều quy tắc CSS cho một node trong một thời điểm và có thể quản lý các kiểu phức tạp khác nhau thông qua bảng tính. *). Đặc tính kiểu loại (style) Trong một tình huống khác, chúng ta muốn thực hiện thay đổi đối với một kiểu dáng của một thành phần nào đó, có thể kiểu dáng này đã đ−ợc áp dụng thông qua CSS. Các node DOM cũng chứa một mảng đ−ợc gọi là style, chứa tất cả các chi tiết về kiểu dáng của node. Bằng việc sử dụng các ph−ơng pháp ở trên, chúng ta có thể tạo ra các node DOM mới cũng nh− kiểu dáng của chúng. Đây chính là một trong những công cụ hữu hiệu nhất đ−ợc sử dụng trong việc viết web tự động. 4.5 Shortcut: Sử dụng đặc tính trong HTML Các ph−ơng thức ta đã mô tả ở trên cung cấp điều khiển mức thấp thông qua DOM API. Mặc dù vậy các hàm createElement() và appendChild() cung cấp API để xây dựng một tài liệu và nó chỉ phù hợp với các tình huống trong đó tài liệu đ−ợc tạo ra theo cấu trúc thông th−ờng mà có thể đ−ợc mã hoá giống nh− một thuật toán. Tất cả các thành phần DOM của trình duyệt web thông dụng cúng hỗ trợ đặc tính tên là innerHTML, cho phép đăng ký nội dung thuộc tính của một đối t−ợng theo cách đơn giản. InnerHTML là một chuỗi, thể hiện một node con giống nh− một dấu HTML. Ví dụ chúng ta có thể viết lại hàm addNode sử dụng innerHTML nh− sau: Function addListItemUsingInnerHTML (el, text) { el.innerHTML+=”div class=’programmed’>”+text+”” -36- thành phần cũng nh− node văn bản gần đó có thể đ−ợc thêm vào trong một trạng thái đơn. Cần chú ý tới phần +=, nó không đ−ợc đăng ký một cách trực tiếp. Khi xoá node có sử dụng ph−ơng thức innerHTML, chúng ta cần trích và parse chuỗi. InnerHTML ít phù hợp với các ứng dụng đơn kiểu này. Nếu một node có thay đổi nhiều, khi đó các node DOM sẽ đ−ợc sử dụng. V. Tải dữ liệu sử dụng kỹ thuật XML Trong khi làm việc với một ứng dụng, đặc biệt là một ứng dụng của n−ớc ngoài, ng−ời dùng sẽ phải t−ơng tác liên tục với ứng dụng. Việc duy trì t−ơng tác một cách liên tục ở đây rất quan trọng. Trong khi thực hiện hoạt động dài, nếu mọi đối t−ợng bị khóa, hoạt động của ng−ời dùng sẽ bị gián đoạn. –Ph−ơng thức gọi dị bộ đ−ợc đ−a ra nh− là cách để cải thiện hoạt động giao diện ng−ời dùng khi thực hiện những phiên giao dịch hoặc các hoạt động dài. Do tác dụng của trễ mạng nên ta coi tất cả các cuộc gọi tới server đều là các cuộc gọi dài. Một thực tế ta phải chấp nhận đó là tài liệu sẽ bị khoá cho tới khi server trả lời. Để có thể làm việc liên tục với tài liệu ta có một số cách thức thực hiện một yêu cầu dị bộ tới ng−ời dùng. Hai kỹ thuật đ−ợc sử dụng đó là IFrames, và trong thời gian gần đây là kỹ thuật XMLHttpRequest. 5.1 IFrames Iframe là cụm từ viết tắt của: inline, có nghĩa là nó là một phần của một lớp tài liệu khác có trong một tập Frame. Một IFrame đ−ợc thể hiện bằng một thành phần trong cây DOM, do vậy ta có thể di chuyển, định lại kích cỡ, ẩn…trong khi vẫn nhìn thấy trang. B−ớc ngoặt đến khi ng−ời ta bắt đầu nhận ra rằng một IFrame có thể đ−ợc định dạng sao cho nó hoàn toàn ẩn đi. Điều này cho phép nó cập nhật dữ liệu trong trang gốc, trong khi ng−ời dùng vẫn đang hoạt động. Cơ chế để tiếp xúc với server là dị bộ. -37- Cũng giống nh− các thành phần DOM khác, ta có thể khai báo một IFrame trong HTML cho một trang hoặc nó có thể tự động tạo ra khi sử dụng hàm document.creatElement(). Trong tr−ờng hợp đơn giản, ta chỉ muốn một IFrame để tải dữ liệu, ta khai báo nó nh− là một phần của tài liệu, tạo một điều khiển bằng cách sử dụng document.getElementById(): window.onload=function(){ var iframe=document.getElementById(‘dataFeed’); var src=’datafeeds/mydata.xml’; loadDataAsynchronously(iframe,src); } function loadDataAsynchronously(iframe,src){ …………………………….. } ở đây IFrame đ−ợc ẩn đi. Ta định dạng ẩn bằng việc thiết lập độ rộng và chiều cao của nó bằng 0. Ta cũng có thể sử dụng kiểu display : none. Tuy nhiên. Ta cần đợi tài liệu đ−ợc load hết tr−ớc khi tìm kiếm IFrame qua hàm gọi getElementById() trong hàm điều khiển window.onload. Ta cũng có thể tạo các IFrame theo yêu cầu theo cách sau: function fetchData(){ var iframe=document.creatElement(‘iframe’); iframe.className=’hiddentDataFeed’; -38- document.body.appendChild(iframe); var src=’datafeeds/mydata.xml’; loadDataAsynchronously(iframe,src); } Điểm thuận lợi ở đây là ta có thể l−u tất cả các mã có liên quan tới việc yêu cầu dữ liệu tại một địa điểm, tốt hơn là phải duy trì tính đồng bộ ID của node DOM giữa giữa kịch bản và HTML. Hình 2.3: Chuỗi các sự kiện xử lý dị bộ trong trang web. Hoạt động ng−ời dùng liên quan tới một yêu cầu từ một đối t−ợng yêu cầu ẩn (một Iframe hoặc một đối t−ợng XMLHttpRequest ), đây là một lệnh gọi tới server dị bộ. Ph−ơng thức trả về rất nhanh, giao diện ng−ời sử dụng bị khoá trong một thời gian rất ngắn. 5.2 Các đối t−ợng XmlDocument và XMLHttpRequest Các IFrame có thể đ−ợc sử dụng để yêu cầu dữ liệu.Tuy vậy những phiên bản trình duyệt web sau này đã đ−a vào các đối t−ợng cho mục đích truyền dữ liệu dị bộ và chúng thuận tiện hơn so với các IFrame. -39- Các đối t−ợng XmlDocument và XMLHttpRequest là những đối t−ợng mở rộng không chuẩn tắc của DOM đ−ợc phần lớn các nhà trình duyệt web hỗ trợ. Chúng đ−a ra lộ trình thực hiện các cuộc gọi dị bộ, do chúng đ−ợc thiết kế để đ−a dữ liệu vào trong môi truờng gốc. Cả hai đối t−ợng trên đều do Microsoft tạo ra, có trong các đối t−ợng JavaScript trong trình duyệt IE. Các trình duyệt khác sử dụng các đối t−ợng t−ơng tự, và các lệnh gọi API. Trong hai loại trên, XMLHttpRequest đ−ợc sử dụng nhiều hơn, cung cấp nhiều điều khiển hơn. Do đó ta chỉ sử dụng XMLHttpRequest. Hàm sau đây tạo ra một đối t−ợng XMLHttpRequest Function getXMLDocument(){ Var xDoc=null; If (document.implement && document.implementation.createDocumnet){ xDoc=document.implementation.createDocumnet(“”,””,null);} else if (typeof ActiveXObject !=”undefined”){ var msXmlAx==null; try{ msXmlAx=new ActiveXObject(“Msxml12.DomDocument”);} catch (e){ msXmlAx=new ActiveXObject(“Msxml.DomDocument”); } xDoc=msXmlAx; } if (xDoc==null || typeof xDoc.load==”undefined”){ xDoc=null;} return xDoc; } -40- Hàm trên tạo ra một đối t−ợng XmlDocument với một API mà hầu hết các trình duyệt ngày nay có thể nhận biết đ−ợc. Ch−ơng trình kiểm tra xem đối t−ợng có hỗ trợ đặc tính cần thiết để tạo ra một đối t−ợng XmlDocument. Nếu ch−ơng trình không tìm đ−ợc các hỗ trợ, ch−ơng trình sẽ trả về đối t−ợng ActiveXlDocument(). Cần chú ý rằng ta có thể kiểm tra các phiên bản cũng nh− thông tin của các trình duyệt. Nhờ đó giúp cho việc thực hiện kịch bản đ−ợc dễ dàng hơn. Function getXMLHTTPRequest() { Var xRequest=null; If (window.XMLHttpRequest){ xRequest=new XMLHttpRequest(); }else if (typeof ActiveXObject !=”ubdefined”){ xRequest=new ActiveXObject(“Microsoft.XMLHTTP”); } return xRequest; } Đây là cách thức thực hiện hàm XMLHttpRequest đơn giản hơn. Trong hàm này ta có sử dụng lệnh phát hiện đối t−ợng để kiểm tra các hỗ trợ đối t−ợng HttpRequest, nếu không có các hỗ trợ ch−ơng trình sẽ tự động trả về một ActiveX. Nếu nh− trình duyệt không hỗ trợ cả hai, khi đó ch−ơng trình sẽ trả về giá trị null. Nh− vậy, ta có thể tạo ra một đối t−ợng để gửi yêu cầu tới server giúp chúng ta. -41- 5.3 Gửi yêu cầu tới server Việc gửi yêu cầu tới server thông qua đối t−ợng XMLHttpRequest khá đơn giản. Ta chỉ cần chuyển URL tới trang server mà tạo ra dữ liệu cho chúng ta. Ví dụ: Function sendRequest(url,params,HttpMethod){ If (!HttpMethod){ HttpMethod=”POST”; } var req=getXMLHTTPRequest(); if (req){ req.open(HttpMethod,url,true); req.setRequetHeader (“content-Type”, “application/x-www-form-urlenclosed”); req.send(params); } } XMLHttpRequest hỗ trợ một số l−ợng lớn các cú pháp gọi HTTP, bao gồm các tham số hàng đợi cho các trang đ−ợc tạo tự động (Ví dụ nh− là các tham số CGI, các tham số ServeletRequest hoặc các argument Forms phụ thuộc vào sự phat triển của server.) 5.4 Sử dụng các hàm gọi ng−ợc để giám sát các yêu cầu. B−ớc thứ 2 của quá trình điều khiển truyền thông dị bộ là thiết lập một điểm gần nhất trong đoạn mã để nhận kết quả của một lệnh gọi khi nó kết thúc. ở đây ta sẽ đăng ký một hàm gọi ng−ợc, thực chất là một đoạn mã có liên quan khi có các kết quả, tại một số điểm ch−a chỉ định tr−ớc trong t−ơng lai. Hàm -42- window.onload mà chúng ta đề cập ở trên trong đoạn 2.9 là một hàm gọi ng−ợc. Các hàm gọi ng−ợc phù hợp với ch−ơng trình đ−ợc điều khiển qua sự kiện, đ−ợc sử dụng trong hầu hết các công cụ trong giao diện ng−ời dùng – ấn bàn phím, click chuột… sẽ xảy ra tại những điểm không chính xác trong t−ơng lai, và các nhà lập trình kiểm soát nó bằng việc viết một hàm để quản lý các sự kiện đó khi chúng xảy ra. Khi viết các sự kiện giao diện ng−ời dùng bằng JavaScript, ta đăng ký các hàm onkeypress, onmouseover, cũng nh− các đặc tính theo tên của đối t−ợng. Khi viết các hàm gọi ng−ợc yêu cầu server, chúng ta đ−a thêm các đặc tính nh− onload và onreadystatechange. Một điều khiển hàm gọi ng−ợc (callback fuction ) đơn giản nh− sau: Var READY_STATE_UNINITIALIZED=0; Var READY_STATE_LOADING=1; Var READY_STATE_LOADED=2; Var READY_STATE_INTERACTIVE=3; Var READY_STATE_COMPLETE=4; Var req; Function sendRequest(url,params,HttpMethod){ If (!HttpMethod){ HttpMethod=”GET”; } req=getXMLHTTPRequest(); if (req){ req.onreadystatechange=onreadyStateChange; req.open(HttpMethod,url,true); req.setRequestHeader (“Content-Type”,”application/x-www-form-urlenclose”); } } -43- function onreadyStateChange(){ var ready=req.readyState; var data=null if (ready=READY_STATE_COMPLETE){ data=req.responseText; }else{ data=”loading…[“+ready+”]”; } //…do something with the data… } Ta định nghĩa một hàm điều khiển gọi ng−ợc onReadystateChange(). Có một số giá trị cho trạng thái sẵn sàng. Ta đăng ký các biến cho từng giá trị đó. Trong phần này, ch−ơng trình chỉ kiểm tra giá trị 4, t−ơng ứng với trạng thái yêu cầu đã hoàn thành. ở đây, ta khai báo đối t−ợng yêu cầu là biến toàn cục. Nhờ đó giúp ta duy trì mọi thứ một cách đơn giản trong khi chúng ta đánh địa chỉ cơ chế của đối t−ợng XMLHttpRequest, tuy nhiên chính điều này sẽ dẫn đến một số vấn đề cho ta nếu ta cố gằng duy trì một số yêu cầu cùng một lúc. Ta sẽ xử lý vấn đề này trong phần sau. -44- Ch−ơng II: Cách Sử dụng Ajax trong ứng dụng I. Phát triển và duy trì cơ sở dữ liệu 1.1. Giới thiệu: Để xây dựng một ứng dụng Ajax hoàn chỉnh, ta cần phải có những công cụ để thực hiện công việc. Một trong những đối t−ợng cần quan tâm đầu tiên đó là những cách thức quản lý cơ sở dữ liệu lớn và phức tạp. Do Ajax là một công cụ đột phá trong lĩnh vực xây dựng web cho nên cần phải quản lý Ajax theo một cách thức riêng. Cách thức tốt nhất để thực hiện các công việc đó chính là xây dựng hệ thống dựa trên những mô hình thiết kế. Công cụ chính mà ta sử dụng là refractoring. Refactoring giúp duy trì mã ch−ơng trình đ−ợc trong sáng, bảo vệ và cho phép ta đối mặt với những thay đổi theo yêu cầu mà không sợ bất cứ điều gì. Ta cần nhận thức một điều rằng refactoring cũng nh− các mô hình thiết kế th−ờng đ−ợc sử dụng tại những vị trí mà chúng có thể phát huy đ−ợc hiệu quả của mình. Để công việc đ−ợc thực hiện đạt kết quả mong muốn, yêu cầu quyết yếu là tìm ra đ−ợc những mô hình thiết kế ứng dụng hiệu quả, dùng đúng lúc, đúng chỗ. 1.2 Refactoring Trong các đoạn ch−ơng trình, việc thực hiện yêu cầu từ client đến server thông qua XMLHttpRequest là quan trong nhất. Yêu cầu đó đ−ợc thể hiện qua hàm senRequest(). SendRequest() kích hoạt hàm initHttpRequest() để tìm đối t−ợng XMLHttpRequest. Hàm trả về là onReadyState(). Đối t−ợng XMLHttpRequest đ−ợc định nghĩa là một biến toàn cục, do đó hàm trả về có thể sử dụng nó. Quá trình điều khiển sau đó bao gồm việc điều khiển các thông tin trạng thái đối t−ợng yêu cầu và các thông tin gỡ rối. -45- Về nguyên tắc, khi thực hiện một yêu cầu tới server, điều ta quan tâm chính là những kết quả trả về ứng với những hoạt động của ng−ời dùng. Để đ−a hoạt động của ng−ời dùng vào đoạn ch−ơng trình hiện tại, ta cần phải thay đổi các xử lý của hàm onReadyState(). Việc sử dụng các biến toàn cục cũng là một vấn đề quan trọng. Nếu nh− ta thực hiện một vài yêu cầu tới server cùng một lúc, khi đó ta cần phải tạo ra khả năng đăng ký các điều khiển cho các trả về của từng yêu cầu đó. Do ta có một danh sách các tài nguyên cần cập nhật, nếu ta tập trung vào một tài nguyên và bỏ qua các tài nguyên khác. Điều quan trọng ta cần biết chúng là gì và chúng hoạt động nh− thế nào? Với lập trình h−ớng đối t−ợng, ng−ời ta xử lý các hàm yêu cầu trong một đối t−ợng. JavaScript hỗ trợ các loại mã lập trình h−ớng đối t−ợng giúp ta có thể thực hiện công việc đ−ợc dễ dàng. Gọi đối t−ợng là ContentLoader, thực hiện tải nội dung từ server. Về lý t−ởng ta có thể tạo ra một đối t−ợng, chuyển nó vào trong URL, khi đó yêu cầu sẽ đ−ợc gửi đi. Ta có thể chuyển giá trị mẫu tới phần điều khiển gọi ng−ợc của ng−ời dùng để thực hiện, nếu nh− tài liệu đ−ợc tải thành công. Trong tr−ờng hợp không thành công, sẽ có hoạt động khác đ−ợc thực hiện. Lệnh gọi đối t−ợng có thể có dạng nh− sau: Var loader net.ContentLoader (‘mydata.xml’,parseMyData) trong đó parseMyData là một hàm gọi ng−ợc đ−ợc sử dụng khi tải dữ liệu thành công. 1.3. Các mô hình sử dụng refactoring Trong từng tr−ờng hợp khác nhau ta có những cách thức sắp xếp lại khác nhau, làm giảm những khó khăn, nhận dạng các đối t−ợng trong giải pháp mà có thể đ−ợc sử dụng lại đ−ợc. -46- Trong một số tr−ờng hợp cụ thể, những mô hình thiết kế nhỏ tỏ ra khá hiệu quả. Đó là mô hình Cross-browser, mô hình tập lệnh, mô hình singleton. Các mô hình này còn đ−ợc gọi là các mô hình kiến trúc. - Cross-browser: các mô hình t−ơng thích và Facade. Hình 2.4: Chu trình thực hiện trong mô hình Facade - Quản lý các điều khiển sự kiện: mô hình giám sát Hình 2.5:Phân chia trách nhiệm trong mô hình Giám sát -47- - Sử dụng lại các điều khiển hoạt động ng−ời dùng: Mô hình tập lệnh Hình 2.6:Mô hình tập lệnh trong ứng dụng xử lý văn bản - Duy trì chuẩn cho tài nguyên: Mô hình singleton Hình 2.7: Mô hình singleton -48- II. Mô hình MVC: Model-View- Controller 2. 1 Giới thiệu Mô hình MVC: Mô hình- Khung nhìn - Điều khiển (Model-View- Controller) là một mô hình giúp ta tổ chức dự án Ajax theo nhiều cách khác nhau, giúp dễ dàng mã hoá và quản lý các dự án này. MVC đ−ợc sử dụng để chia tách các phần ch−ơng trình t−ơng tác với ng−ời dùng với phần thực hiện các công việc khác trong ứng dụng. Mô hình MVC có 3 vai trò quan trọng trong hệ thống. Model thể hiện các vấn đề của ứng dụng. Bộ xử lý từ sẽ là mô tả một tài liệu; một ứng dụng bản đồ sẽ mô tả các điểm trên một l−ới. View là phần ch−ơng trình mà thể hiện những thứ với ng−ời dùng: dạng đầu vào, tranh ảnh, dạng text hoặc widgets. View không cần đồ hoạ. Trong ch−ơng trình đ−ợc cài âm, dạng âm thanh cũng là View. Yêu cầu đầu tiên đối với MVC là View và Model không trao đổi với nhau, bởi vì đấy là nơi mà Controller hoạt động. Khi ng−ời dùng ấn một phím hoặc điền vào một mẫu nào đấy, khi đó View sẽ trao đổi thông tin với bộ điều khiển. Bộ điều khiển khi đó sẽ thông tin cho Model và mô tả thời điểm những thay đổi trong View yêu cầu Model cập nhận. Hình 2.8: Thành phần chính trong mô hình MVC -49- Mô hình MVC th−ờng đ−ợc áp dụng cho các ứng dụng web cơ bản theo những cách đặc biệt. Khi một ứng dụng Ajax đang đ−ợc chạy và yêu cầu dữ liệu từ server, cơ chế của việc dành dữ liệu là khá giống với cách thức của ứng dụng web truyền thống . 2. 2 Web server MVC Nhìn chung, các ứng dụng web đã quá quen với mô hình MVC. Một ứng dụng web tạo ra một số tách biệt giữa giữa View và Model, do chúng nằm trên các máy khác nhau. Tuy nhiên ta có thể viết một ứng dụng web mà có khả năng kết hợp các mô hình này với nhau, tại một số điểm nhất định. Hầu hết các thành phần của MVC trên Web thực hiện xử lý trang HTML, và ch−ơng trình mà tạo ra nó ( ví dụ là View ) khác xa so với những gì ng−ời dùng thực sự nhìn thấy khi trang này yêu cầu. Trong tr−ờng hợp một ứng dụng Ajax cung cấp dữ liệu cho một client JavaScript, View từ ứng dụng này chính là tài liệu XML sẽ đ−ợc trả về cho client d−ới dạng đáp ứng HTTP. Hình 2.9:Cách thức thực hiện một yêu cầu qua mạng 2.2.1 Các vấn đề nảy sinh với khả năng sử dụng lại các đoạn kịch bản. Trong các ứng dụng web, các thành phần của một ứng dụng th−ờng đ−ợc lặp đi lặp lại. Với Ajax, công việc của ta đơn giản chỉ là sử dụng lại các đoạn kịch bản đã có sẵn. Tuy nhiên khi áp dụng các đoạn kịch bản khác nhau -50- vào những vị trí khác nhau trong một ứng dụng cũng gặp một số vấn đề nảy sinh. Bao gồm: - V−ớng mắt với hàng đợi SQL trong trang. Nếu muốn tìm kiếm theo loại hoặc từ khoá, cần phải thay đổi lại việc tạo SQL. Ta có thể phải chịu một tập trạng thái if tích luỹ qua thời gian khi chúng ta càng thêm nhiều chức năng tìm kiếm, và tất nhiên số l−ợng các tham số tìm kiếm sẽ tăng lên. - Gặp khó khăn với dạng dữ liệu XML trong trang. Có một vài lý do tại sao ta muốn thay đổi dạng dữ liệu. - Khó khăn với cơ sở dữ liệu đ−ợc sử dụng để tạo ra XML. Do ta duy trì một cơ sở dữ liệu kết nối mở mọi lúc khi đang tạo XML, nên sẽ không có bất cứ thao tác gì phức tạp trong vòng lặp while(), vì thế kết nối sẽ không đ−ợc lâu, thậm chí còn xuất hiện hiện t−ợng thắt cổ chai. Cũng nh− vậy, cơ sở dữ liệu để tạo XML chỉ làm việc khi và chỉ khi ta xử lý cơ sở dữ liệu của chúng ta giống nh− là cấu trúc dữ liệu phẳng. 2.2.2. Refactoring lại mô hình Để giải quyết những v−ớng mắc trên, chúng ta thực hiện việc quản lý cơ sở dữ liệu thông qua các mô hình quan hệ đã đ−ợc chuẩn hoá. Các dữ liệu cũng nh− mối quan hệ giữa chúng đ−ợc xử lý thông qua các công cụ định bản đồ quan hệ-đối t−ợng. Chúng ta có các công cụ ORM (Object Relational Mapping). Một ORM tự động dịch giữa cơ sở dữ liệu và các đối t−ợng trong bộ nhớ, thực hiện quản lý cơ sở dữ liệu SQL. Các nhà lập trình PHP thích PEARDB_DataObject, Easy PHP Data Object (EZPDO) hoặc Metastorage. Các nhà lập trình Java thích .NET. 2.2.3. Chia tách nội dung từ thể hiện Trong tr−ờng hợp chúng ta phải duy trì nhiều trang web, nếu chúng ta muốn thay đổi định dạng XML tại một vị trí thì chúng ta phải thay đổi cho -51- mọi nơi. Trong tr−ờng hợp phức tạp hơn, nếu chúng ta muốn duy trì nhiều định dạng, trong đó một cho danh sách ngắn và danh sách chi tiết để mô tả các khách hàng và định dạng khác cho ứng dụng stock, khi đó chúng ta muốn định nghĩa từng dạng một và cung cấp một bản đồ trung tâm cho chúng. Một h−ớng tiếp cận thông dụng là ngôn ngữ tạm thời, là hệ thông mà chấp nhận tài liệu text chứa một số các markup mà hoạt động nh− là nơi chứ các biến thực trong suốt quá trình thực hiện. PHP, ASP, và JSP là những ngôn ngữ tạm thời, đ−ợc viết nh− là nội dung của trang web với mã đ−ợc nhúng, khác với mã mà nội dung đ−ợc nhúng nhìn thấy trong một Ja._.