Đồ án Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX

Mục Lục Nhiệm vụ của đồ án Đồ án này tập trung nghiên cứu về công nghệ Ajax và ứng dụng của nó, trong đó tập trung vào các yếu tố sau: Giới thiệu về AJAX, các công nghệ trong AJAX Việc truyền và xử lý dữ liệu trong AJAX Các framework cho phát triển ứng dụng web với AJAX Xây dựng ứng dụng áp dụng AJAX Kết quả Nêu lên quá trình phát triển của công nghệ Web và thế hệ Web 2.0 Tìm hiểu các công nghệ trong AJAX đó là CSS, DOM, XML và JavaScript Nghiên cứu về đối tượng XMLHttpRequest, đây là trái tim của công nghệ AJAX Nghiên cứu việc truyền và xử lí dữ liệu phía client cũng như server Xây dựng ứng dụng với AJAX CHƯƠNG I: Tổng quan về AJAX I.1 Quá trình phát triển các công nghệ trong ứng dụng Web Ban đầu, các trang Web là tĩnh; người dùng gửi yêu cầu một tài nguyên nào đó, và server sẽ trả về tài nguyên đó. Các trang Web không có gì hơn là một văn bản được định dạng và phân tán. Không lâu sau đó, nhu cầu về các trang Web động, có sự tương tác ngày một tăng, chính vì thế sự ra đời các công nghệ Web động là một điều tất yếu. I.1.1 CGI CGI cho phép tạo các chương trình chạy khi người dùng gửi các yêu cầu. CGI không phải là cách an toàn cho các trang Web động. Với CGI, người khác có thể chạy chương trình trên hệ thống. I.1.2 Applet Applet cho phép các nhà phát triển Vết các ứng dụng nhỏ nhúng vào trang Web. Song nó cũng có một số nhược điểm: thường bị chặn bởi việc đọc và ghi các file hệ thống, không thể tải các thư viện, hoặc đôi khi không thể thực thi trên phía client. I.1.3 JavaScript JavaScript được thiết kế để việc phát triển dễ dàng hơn cho các nhà thiết kế Web và các lập trình viên không thành thạo Java. Việc người ta coi các trang như là một đối tượng đã làm nảy sinh một khái niệm mới gọi là Document Object Model (DOM). DOM hoàn toàn là cách biểu diễn hướng đối tượng của trang Web và nó có thể được sửa đổi với các ngôn ngữ kịch bản bất kỳ như JavaScript hay VBScript. I.1.4 JSP/Servlet, ASP và PHP Servlet là một bước tiến lớn, nó đưa ra một thư viện hàm API trên Java và một thư viện hoàn chỉnh để thao tác trên giao thức HTTP. JSP và ASP đều được thiết kế để phân tách qua trình xử lí khỏi quá trình biểu diễn. Các công nghệ khác, trong đó phải kể đến là PHP (Hypertext Preprocessor) cho tới Cold Fusion. Các công nghệ này cung cấp các bộ công cụ rất mạnh cho các nhà phát triển. I.1.5 Flash Flash cho phép các nhà thiết kế tạo các ứng dụng hoạt họa và linh động. Flash không đòi hỏi các kỹ năng lập trình cao cấp và rất dễ học. I.1.6 DHTML Trong thực tế nó là một tập hợp gồm HTML, Cascading Style Sheets (CSS), JavaScript, và DOM. Tập hợp các công nghệ trên cho phép các nhà pháp triển sửa đổi nội dung và cấu trúc của một trang Web một cách nhanh chóng. I.1.7 XML Ngày nay chúng ta có rất nhiều dạng dẫn xuất của XML cho các ứng dụng Web (tất nhiên là có cả XHTML): XUL của Mozilla; XAMJ, một sản phẩm mã nguồn mở trên nền Java; MXML từ Macromedia; và XAML của Microsoft. I.2 Web 2.0 và công nghệ AJAX I.2.1 Công nghệ Web thế hệ thứ hai – Web 2.0 Được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web mới có những thay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở cách thức sử dụng - hình thành nên môi trường cộng đồng, ở đó mọi người cùng tham gia đóng góp cho xã hội "ảo" chứ không chỉ "duyệt và xem". I.2.1.1 Khái niệm Dougherty không đưa ra định nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0. Có 7 đặc tính của Web 2.0: 1. Web có vai trò nền tảng, có thể chạy mọi ứng dụng 2. Tập hợp trí tuệ cộng đồng 3. Dữ liệu có vai trò then chốt 5. Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng 4. Phát triển ứng dụng dễ dàng và nhanh chóng 6. Phần mềm có thể chạy trên nhiều thiết bị 7. Giao diện ứng dụng phong phú I.2.1.2 Công nghệ Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng. Cung cấp nội dung Cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình. Dịch vụ web Có hai loại giao thức chính là REST và SOAP. REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web đều được gọi qua API. Ngôn ngữ chung của dịch vụ web là XML, nhưng có thể có ngoại lệ. Phần mềm máy chủ Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm hai loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng "gắn thêm" cho máy chủ web, có sử dụng giao tiếp API. I.2.2 Các vấn đề nảy sinh và sự ra đời của AJAX Một trong những giới hạn quan trọng của các ứng dụng Web hiện tại là cách thức nó tương tác với người dùng. Khác với các phần mềm chạy độc lập ở máy khách có những khả năng dường như vô tận trong cách thức tương tác với người dùng, các ứng dụng Web bị giới hạn bởi chính nguyên lý hoạt động của nó: tất cả các giao dịch phải thực hiện thông qua phương thức giao dịch HTTP. Bên cạnh rào cản về cách thức tương tác, các ứng dụng Web còn vấp phải nhiều giới hạn khác (ví dụ như bản thân việc phải hoạt động dựa trên các trình duyệt đã là một rào cản quan trọng). Ajax ra đời là một giải pháp cho các ứng dụng Web hiện nay. I.2.3 AJAX là gì ? AJAX là tập hợp của nhiều công nghệ với thế mạnh của riêng mình để tạo thành một sức mạnh mới. AJAX bao gồm: Thể hiện web theo tiêu chuẩn XHTML và CSS, các chuẩn của W3C, được Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rất tốt. Nâng cao tính năng động và phản hồi bằng DOM (Document Object Model); một chuẩn của W3C Trao đổi và xử lý dữ liệu bằng XML và XSLT; cũng là một chuẩn của W3C Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest Và tất cả các công nghệ trên được liên kết lại với nhau bằng JavaScript. I.2.4 Các thế mạnh của AJAX Ajax là viết tắt của Asynchronous JavaScript and XML – công nghệ kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao: Gửi yêu cầu (request) đến server Phân tách và làm việc với XML Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest. Ở các ứng dụng web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả response chứa các thông tin dưới dạng HTML và CSS, trang HTML này sẽ thay thế trang cũ. Mô hình tương tác trong một ứng dụng Web truyền thống Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp này. Khi đó, các yêu cầu gửi resquest và nhận response do Ajax Engine thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi trả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị. Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang. Mặt khác, sự kết hợp của các công nghệ web như CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. Đây là những lợi ích hết sức thiết thực mà Ajax đem lại. So sánh hai mô hình ứng dụng Web: truyền thống và sử dụng Ajax Mô hình tương tác trong một ứng dụng Web dùng Ajax Rõ ràng điểm khác biệt là thay vì phải tải cả trang web thì với AJAX ta chỉ cần tải về phần của trang Web muốn thay đổi. Điều này giúp cho ứng dụng web của phản hồi nhanh hơn, thông minh hơn. Ngoài ra, điểm đặc biệt quan trọng trong công nghệ Ajax nằm ở chỗ Asynchronous - bất đồng bộ - tức là gửi yêu cầu của mình tới server và tiếp tục thực thi tác vụ hiện tại mà không cần chờ trả lời. Khi nào server xử lý xong yêu cầu của, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi cần thiết. CHƯƠNG II: Các công nghệ trong AJAX AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. JavaScript có vai trò chất keo kết dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model, tạo và tổ chức biểu diễn dữ liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và bàn phím. Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc. II.1 Cascading Style Sheet – CSS II.1.1 Giới thiệu về CSS Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần không thể thiếu trong thiết kế Web. Một stylesheet đưa ra cách kiểm soát các loại định dạng trực quan, nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang. Với Ajax, stylesheet cung cấp một “kho chứa” các giao diện xác định trước có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất. CSS định dạng một trang web theo ba cách : Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet) Định nghĩa trong một trang web (Internal Style Sheet). Định nghĩa thành một file CSS riêng (External Style Sheet). Trang web của chúng ta sẽ tham chiếu đến file CSS này. Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn - selector và phần khai báo - style declaration. Selector đặc tả các phần tử được định dạng và bố trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng. II.1.2 Các ưu điểm của CSS trong thiết kế web a. CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web b. CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí. c. Có thể định nghĩa nhiều style vào một thẻ HTML d. Thứ tự áp dụng các định dạng Inline Style (Style được qui định trong một thẻ HTML cụ thể) Internal Style (Style được qui định trong phần của một trang HTML) External Style (style được qui định trong file CSS ngoài) Browser Default (thiết lập mặc định của trình duyệt) II.1.3 Cú pháp cơ bản của CSS Cú pháp của CSS gồm ba thành phấn: Thành phần lựa chọn (thường là một thẻ HTML) (Selector) Thuộc tính (Property) Giá trị (Value) có ba cách để chèn CSS vào trang web. a. External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng) b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web) c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML) II.1.4 Các thuộc tính của CSS Style Các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. II.2 Document Object Model – DOM DOM giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để Vết một ứng dụng Ajax. Trong một ứng dụng Ajax, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ , để biểu diễn tài liệu. Trong đó thẻ biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa. II.2.1 Làm việc với DOM bằng JavaScript Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu. II.2.2 Tìm kiếm một DOM Node Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử để thay đổi. Trước hết cần bắt đầu tham chiếu qua nút gốc - root node, nút này thể hiện qua biến toàn cục document. Mỗi nút trong DOM là một nút con (hoặc nút con cấp hai, ba…) của document. Mỗi phần tử HTML có một thuộc tính ID. Mỗi một nút DOM có thể có một ID gán cho nó, và ID này có thể được dùng để tham chiếu tới nút qua hàm : var hello=document.getElementById('hello'); Một cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức getElementsByTagName(). II.2.3 Tạo DOM Node Trong nhiều trường hợp cần tạo các nút mới và thêm nó vào tài liệu. JavaScript cung cấp một số phương thức để làm điều đó. Các phương thức chuẩn để tạo nút mớilà document.createElement() và document.createTextNode().createTextNode() tạo một nút thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item. Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt, phương thức appendChild() được dùng để thực hiện điều này. II.2.4 Thêm style vào tài liệu DOM cũng cung cấp các phương thức để chỉnh sửa style. Thuộc tính className hello.className='declared'; với hello tham chiếu tới một nút DOM. Thuộc tính style Ví dụ, đoạn mã sau bổ sung các thuộc tính style cho nút empty: empty.style.border="solid green 2px"; empty.style.width="200px"; II.2.5 Sử dụng thuộc tính innnerHTML Các phần tử DOM của các trình duyệt web đều hỗ trợ một thuộc tính gọi là innerHTML, cho phép các nội dung kiểu string tùy ý được gán cho các phần tử theo thuộc tính này. II.3 XML và việc truyền dữ liệu bất đồng bộ II.3.1 Giới thiệu về XML và XSLT II.3.1.1 XML là gì? Năm 1969, IBM đã cho ra đời GML là ngôn ngữ dùng để đặc tả cho ngôn ngữ khác. Về sau GML phát triển thành SGML là chuẩn lưu trữ và chuyển đổi dữ liệu. Nhưng quá phức tạp và tiêu tốn nhiều công sức trong việc hiện thực. XML ra đời kết hợp được sức mạnh của SGML và tính phổ dụng của HTML. II.3.1.2 Các đặc điểm của XML XML tương thích với SGML Dễ dàng Vết được những chương trình xử lý tài liệu XML Tài liệu XML dễ đọc và có tính hợp lý cao XML được xây dựng với sự giảm thiểu những thuộc tính tùy chọn XML dễ dàng được sử dụng trên Internet XML hỗ trợ nhiều ứng dụng Không đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML II.3.1.3 Cấu trúc một tài liệu XML Một tài liệu XML sẽ chứa những đặc tả về cấu trúc dữ liệu. Mỗi cấu trúc gồm nhiều phần tử (element), mỗi thành phần được bắt đầu với một thẻ bắt đầu (Start–tag) và kết thúc với một thẻ kết thúc (End–tag). Giữa Start–tag và End–tag là nội dung của phần tử này. Nội dung có thể bao gồm dữ liệu văn bản hay có thể là một phần tử khác. II.3.1.4 XSLT - (eXtensible Style Language Transforming) XSLT là một phần của XSL (eXtensible Style Language). XSL là một ngôn ngữ nền tảng XML và ra đời với mục đích chuyển đổi một tài liệu XML thành một tài liệu XML khác hay chuyển một tài liệu XML thành những đối tượng có thể thể hiện được. II.3.2 XMLHttpRequest Các ứng dụng web truyền thống đều phải tái nạp toàn bộ trang web khi gửi yêu cầu đến server, điều này thường dẫn đến một sự ngắt quãng cho công việc của người dùng. Vì thế yêu cầu đặt ra là làm cho các request của server không đồng bộ và người dùng vẫn có thể làm việc trong khi đợi tín hiệu trả lời từ server. XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ và hiệu quả. II.3.2.1 XmlDocument và XMLHttpRequest Các đối tượng XmlDocument và XMLHttpRequest không phải là các chuẩn DOM mở rộng của trình duyệt web nhưng vẫn được hỗ trợ bởi rất nhiều trình duyệt. Các đối tượng đều dựa trên ActiveX hay các đối tượng JavaScript. Các trình duyệt khác đều có thực thi các đối tượng trên có các chức năng tương đương và các lời gọi hàm API. II.3.2.2 Gửi một yêu cầu đến server Gửi một yêu cầu đến server từ một đối tượng XMLHttpRequest rất dễ dàng. Tất cả những việc ta cần làm là truyền cho nó địa chỉ URL của server. II.3.2.3 Dùng các hàm callback để giám sát các yêu cầu Các hàm callback đón bắt các sự kiện trong cách tiếp cận lập trình hướng sự kiện trong hầu hết các bộ công cụ UI. Khi tạo các giao diện người dùng UI bằng JavaScript, ta gán các hàm onkeypress, onmouseover, và đặt tên tương tự cho các thuộc tính tương đương cho các đối tượng. II.4 Lập trình bằng JavaScript phía client JavaScript là một ngôn ngữ lập trình đa năng, nó là một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không được khai báo cụ thể và các biến giống nhau có thể được gán bới các kiểu khác nhau. Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhị phân có thể thực thi được, và nó được thực thi trực tiếp, cụ thể là qua các trình duyệt. Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật toán và các tác vụ. Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt, gồm CSS, DOM, và các đối tượng XMLHttpRequest, được coi là các phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau. CHƯƠNG III: Đối tượng XMLHttpRequest III.1 Giới thiệu về XMLHttpRequest Trước tiên cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này để gửi request và xử lý các response. XMLHttpRequest chưa là chuẩn của W3C, vì thế phải dùng JavaScript theo nhiều cách để tạo một thể hiện của của XMLHttpRequest. Để tạo một thể hiện của đối tượng XMLHttpRequest. Công việc chỉ đơn giản là kiểm tra sự hỗ trợ đối tượng ActiveX của trình duyệt. Nếu hỗ trợ ActiveX, thì tạo một đối tượng XMLHttpRequest dùng ActiveX. Trường hợp khác, tạo đối tượng này bằng kỹ thuật tạo đối tượng JavaScript nguyên thủy. III.2 Phân tích các đặc tính của XMLHttpRequest III.2.1 Các phương thức và thuộc tính void open(string method, string url, boolean asynch, string username, string password): Phương thức này thiết lập một phiên gọi tới server. Khởi tạo một request. Nó có hai tham số yêu cầu và ba tham số tùy chọn; ta phải cung cấp đặc tả của phương thức được triệu gọi (GET, POST, hay PUT) và địa chỉ URL của tài nguyên được gọi. void send(content): Phương thức này thực hiện gửi request tới server. Nếu request được khai báo bất đồng bộ, kết quả được trả về ngay, còn không nó sẽ đợi cho tới khi nhận được response từ server. void setRequestHeader(string header, string value): Phương thức thiết lập giá trị cho phần header đã cho trong HTTP request. void abort(): Phương thức này rất dễ hiểu, nó sẽ hủy request. string getAllResponseHeaders(): Trả về một biến kiểu string chứa response header của HTTP request. string getResponseHeader(string header): Phương thức này tương tự như getAllResponseHeaders(); III.2.2 Sự tương tác Ta xét một ví dụ để tìm hiểu các tương tác của Ajax. Hình sau cho thấy mô hình tương tác chuẩn trong một ứng dụng Ajax. Mô hình tương tác chuẩn Ajax Quá trình tương tác: Một event client-side gây ra một sự kiện - Ajax event. Bất kỳ một tác động nào cũng có thể gây ra Ajax event, từ một sự kiện onchange đơn giản cho đến một số tác động của người dùng. Một thể hiện của XMLHttpRequest được tạo ra. Dùng phương thức open(), tạo lời gọi hàm - địa chỉ URL được thiết lập cùng với phương thức HTTP yêu cầu, thông thường là GET hay POST. Request được tạo ra qua việc gọi phương thức send(). Một request được tạo và gửi đến server. Server xử lí các yêu cầu Response được trả về cho trình duyệt. Trường Content-Type được thiết lập ở dạng text/xml; XMLHttpRequest chỉ có thể xử lí kết quả dạng text/html. Cấu hình XMLHttpRequest để gọi hàm callback() khi kết quả xử lí được trả về. Hàm này kiểm tra thuộc tính readyState trên đối tượng XMLHttpRequest và sau đó xem xét mã trạng thái trả về từ server. III.2.3 Các phương thức GET và POST Trên lý thuyết, sử dụng GET khi request không thay đổi giá trị, tức là nhiều request sẽ trả về cùng kết quả. Trong thực tế, dùng GET để truy lục dữ liệu từ server; hay nói cách khác tránh được việc thay đổi trạng thái trên với lời gọi GET. Phương thức POST được dùng khi muốn thay đổi trạng thái trên server. III.3 Remote Scripting Chúng ta cùng xét một công nghệ gọi là remote scripting nó cung cấp một cơ chế dùng để tránh việc tái nạp các trang web. III.3.1 Tổng quan về Remote Scripting Về cơ bản, remote scripting là một loại lời gọi các thủ tục từ xa. Sự tương tác với server vẫn như các ứng dụng Web thông thường, nhưng không tái nạp (refresh) toàn bộ trang web. Chỉ với Ajax, mới có thể sử dụng công nghệ bất kỳ phía server để có thể nhận các request, xử lí chúng và trả về kết quả. Với mỗi công nghệ phía server, có một số lựa chọn cho phía client để thực hiện remote scripting. III.4 Gửi các request Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest là: Dùng một tham chiếu tới một thể hiện của XMLHttpRequest Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest. Gán các thuộc tính của request. Gửi request tới server. III.5 DOM Level 3 và DOM III.5.1 DOM Level 3 Một chuẩn mới được công bố: DOM Level 3 Load and Save Specification. Đặc tả này được thiết kế như một platform độc lập với các ngôn ngữ để thay đối nội dung một tài liệu DOM với XML. III.5.2 DOM DOM là một đặc tả của W3C cho một platform độc lập với ngôn ngữ lập trình để truy cập và sửa đổi nội dung và cấu trúc của tài liệu. Một cách hiểu khác, nó là một cách thông dụng để biểu diễn và thao tác một tài liệu HTML hay XML. thiết kế của DOM dựa trên đặc tả của Object Management Group, cho phép sử dụng với bất kỳ ngôn ngữ lập trình nào. DOM là một mô hình đối tượng trong ngữ cảnh hướng đối tượng. DOM xác định các đối tượng cần thiết để biểu diễn và thay đổi tài liệu, các hành V và thuộc tính của các đối tượng này, và mối liên hệ giữa các đối tượng. Lợi thế của đặc tả DOM là nó cung cấp một chuẩn để tương tác với tài liệu. III.6 Kết luận Trong chương này, chúng ta vừa xem xét các kỹ thuật cơ bản và là “trái tim” của Ajax, đối tượng XMLHttpRequest.Với sự kết hợp giữa JavaScript và một số thao tác DOM, Ajax cho phép một mức độ tương tác chưa từng có từ trước đến nay. Với XMLHttpRequest ta không còn đợi quá trình tái nạp trang web và sự đồng bộ với server nữa. CHƯƠNG IV: Gửi các request và xử lý response IV.1 Giao thức HTTP Một HTTP message bắt đầu với một dòng request hay status, tiếp theo có thể là nhiều loại headers và phần message body. IV.1.1 Cấu trúc của HTTP Message HTTP là một giao thức kiểu client/server; client đưa ra các request, và server sẽ trả lời các request này. Cấu trúc các HTTP message vì thế cũng thay đổi theo yếu tố này. Có một định dạng cho HTTP request và cho các response. IV.1.1.1 HTTP Request Mỗi request bắt đầu với một Request-Line. Dòng này chỉ ra phương thức mà client yêu cầu, tài nguyên, và phiên bản của HTTP mà client có thể hỗ trợ. Request-Line có thể có tiếp sau một hay nhiều header và một message body. Một HTTP request bắt đầu với một Request-Line và có thể bao gồm các header và message body. Phần header có thể mô tả quá việc truyền dữ liệu, xác định các yêu cầu hay phần message body kèm theo. Request-Line chứa ba mục phân biệt, đó là method, uri, và phiên bản HTTP, mỗi mục được phân tách bởi một hay nhiều khoảng trống. Một HTTP Request-Line có một phương thức, một địa chỉ định danh tài nguyên (URI), và thông báo phiên bản HTTP. Mục tiếp theo trong Request-Line là Request-uri. Mục này cung cấp địa chỉ định danh tài nguyên cho một tài nguyên. Mục cuối cùng trong Request-Line là phiên bản HTTP Tiếp sau Request-Line, một HTTP request có thể bao gồm một hay nhiều dòng message header. Một message header có thể chứa các loại general header, request header, hoặc entity header. General header áp dụng trong truyền dữ liệu; request header áp dụng cho các request cụ thể, và entity header áp dụng cho message body trong request. Một HTTP request luôn chứa một dòng trống sau Request-Line. Dòng trống - blank line rất quan trọng vì server xác định được phần kết của request, hoặc phần kết của header IV.1.1.2 HTTP Response HTTP Response khá giống với HTTP Request. Dấu hiệu khác biệt duy nhất là response bắt đầu với một dòng trạng thái status so với Request-Line. Status-Line, cũng giống như Request-Line, chứa ba mục ngăn cách bởi các khoảng trống. Một HTTP response bắt đầu với một Status-Line và có thể chứa các header và một message body. Header có thể mô tả quá trình truyền dữ liệu, xác định response, hoặc phần body kèm theo. HTTP Status-Line bắt đầu với chỉ báo HTTP, mã trạng thái, và một đoạn text mô tả response. Hai mục còn lại trong Status-Line là Status-Code và Reason-Phrase. Status-Code là một bộ ba kí tự chỉ báo kết quả của request. Status-Code phổ biến nhất là 200. Giá trị này thông báo yêu cầu của client thành công. IV.1.2 Header Field HTTP request và response có thể có một hay nhiều message header. Message header bắt đầu với tên trường và dấu (“:”). Trong một số trường hợp, chỉ có tên trường trong phần header. Trong hầu hết các trường hợp khác header chứa các thêm thông tin khác nữa, các thông tin này đi sau dấu “:”. Một message header kết thúc ở cuối dòng, nhưng nếu một client cần biểu diễn nhiều hơn một dòng thì dòng tiếp theo sẽ bắt đầu với một hay nhiều kí tự trống hay kí tự gạch ngang. IV.1.3 Status Code Một phần rất quan trọng của HTTP response là mã trạng thái - status code. Mã này xác định xem yêu cầu của client có được thực hiện thành công hay không và cung cấp thêm thông tin về request. Mỗi giá trị status code là một số ba kí tự. IV.2 Xử lí các response của server XMLHttpRequest cung cấp hai thuộc tính để truy cập vào response của server. Thuộc tính đầu tiên, responseText, chỉ đơn giản là cung cấp response dưới dạng một biến string. Thuộc tính thứ hai, responseXML, cung cấp response dưới dạng đối tượng XML. Truy cập response dưới dạng text đơn giản rất thuận lợi cho các trường hợp sử dụng đơn giản, chẳng hạn như hiển thị response trong một alert hay response là một cấu trúc đơn giản thông báo thành công hay bị lỗi. IV.2.1 Dùng thuộc tính innerHTML để tạo nội dung động Rất khó khăn khi dùng các response dạng text để tạo nội dung động cho các trang web. Thuộc tính responseText trở nên hữu ích nếu ta dùng nó chung với thuộc tính innerHTML của các phần tử HTML. Nó đơn giản là một xâu kí tự biểu diễn nội dung giữa một thẻ mở và thẻ đóng. Bằng cách dùng kết hợp responseText và innerHTML, server có thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các trình duyệt qua thuộc tính innerHTML. IV.2.2 Phân tách response theo chuẩn XML Có thể server không cần thiết phải gửi response với định dạng XML. Nó hoàn toàn có thể gửi response dưới dạng text. Các cấu trúc dữ liệu phức tạp thường được gửi trong định dạng XML. IV.2.2.1 W3C Document Object Model W3C Web định nghĩa về DOM: Document Object Model (DOM) là một nền tảng hay là một giao diện ngôn ngữ trung gian cho phép các chương trình hay các script truy cập và cập nhật động nội dung, cấu trúc, kiểu dáng của tài liệu (document). Tài liệu có thể được xử lí, và kết quả của quá trình xử lí này có thể kết hợp lại trong trang hiển thị. IV.2.2.2 W3C DOM và JavaScript Rất dễ nhầm lẫn W3C DOM với JavaScript. DOM là một tập các hàm API cho các tài liệu HTML và XML, cung cấp một câu trúc biểu diễn tài liệu và xác định xem cấu trúc tài liệu được truy cập qua script như thế nào. JavaScript là một ngôn ngữ được dùng để truy cập và thao tác DOM. Không có DOM, JavaScript không thể có các khái niệm về trang web và các phần tử đánh dấu trang web đó. IV.2.3 Cập nhật nội dung động với W3C DOM W3C DOM cung cấp các thuộc tính và phương thức cho phép duyệt cấu trúc XML và khai phá dữ liệu yêu cầu. IV.3 Gửi các tham số request từ phía client Nếu gửi request không kèm tham số, server sẽ không có biết được yêu cầu của client, và nó sẽ gửi các response giống nhau tới tất cả client. Công nghệ AJAX yêu cầu việc gửi dữ liệu phải có ngữ cảnh (tức là có các tham số đi kèm). IV.3.1 Gửi các tham số request theo chuẩn XML Có thể gửi dữ liệu dạng XML tới server như một phần của request body, giống như các câu truy vấn được gửi trong request body trong một POST request. Server có thể đọc dữ liệu XML từ request body và làm việc với chúng. IV.3.2 Gửi dữ liệu tới server bằng JSON JSON là một chuẩn định dạng text độc lập với các ngôn ngữ, có thể dùng tượng tự như các ngôn ngữ họ C như C, C#, JavaScript,…. JSON được xây dựng theo hai cấu trúc dữ liệu hỗ trợ tất các ngôn ngữ lập trình hiện đại: Một tập các cặp name/value. Trong các ngôn ngữ hiện đại chúng được biết dưới các kiểu object, record, hay dictionary. Một danh sách có thứ tự, như là một mảng. IV.4 Kết luận Trong chương này ta đã tìm hiểu một số cách mà XMLHttpRequest và server có thể trao đổi dữ liệu với nhau. XMLHttpRequest có thể gửi request dùng các phương thức HTTP GET hay POST, trong khi dữ liệu request có thể gửi qua các câu truy vấn, XML hay dữ liệu JSON. Sau khi xử lí request, server trả lời bằng các dữ liệu text đơn giản, dữ liệu XML hay thậm chí là dữ liệu JSON. CHƯƠNG V: Xây dựng ứng dụng AddressBook V.1 Giới thiệu AddressBook là một ứng dụng web dùng để quản lý các danh bạ trực tuyến. Ứng dụng này được xây dựng với PHP/MySQL được áp dụng AJAX. V.2 Thiết kế các module trong ứng dụng Ứng dụng AddressBook có các module chính sau: Module admin Module quản lý login/logout cho user Module quản lý danh mục Module quản lý nhóm Module quản lý danh sách mail Module quản lý các chức năng khác V.3 Thiết kế cơ sở dữ liệu Ta thiết kế dữ liệu theo cách từ trên xuống; nghĩa là chúng ta đi tìm các bảng, sau đó tìm các mối liên kết giữa các bảng này, lập sơ đồ quan hệ. Xây dựng các bảng dữ liệu Về người sử dụng ta xây dựng bảng user để lưu thông tin người dùng, và một bảng khác là user_person để lưu thêm các thông tin về vai trò của người dùng trong hệ thống, là người sử dụng hay là tên người trong các danh mục. Những người có tên trong các danh mục được lưu trữ trong bảng person, và bảng user_person với cách thiết lập như đã nói ở trên, bảng group dùng để lưu các nhóm, address lưu các địa chỉ địa lý, contact dùng để lưu các cách liên hệ có thể qua email, điện thoại…..Bảng mailling_list lưu các nhóm danh sách email và mailling_list_contact chứa id của mailling_list và contact để gửi mail cho một nhóm nào đó. Bảng closed_frame lưu các frame mặc định được đóng lại trên giao diện. V.4 Triển khai ứng dụng V.4.1 Yêu cầu Ta sẽ dùng Appserv để triển khai ứng dụng này. V.4.2 Qui trình cài đặt Sau đây là các bước cài đặt ứng dụng: Cài đặt Appserv trên localhost Vào địa chỉ để tạo cơ sở dữ liệu cho ứng dụng Copy project AddressBook vào thư mục webroot (mặc định là \appserv\www) Mở file cấu hình properties.inc.php (trong AddressBook\inc) để cấu hình user và password của admin Truy cập địa chỉ với user và pass đã có để tạo người dùng Vào địa chỉ và sử dụng chương trình V.4.3 Kết quả cài đặt ứng dụng trên Windows V.5 Triển khai một ứng dụng không dùng AJAX V.5.1 Giới thiệu và cài đặt ứng dụng SimpleAddressBook Ứng dụng SimpleAddressBook dùng để quản lý thông tin các danh mục, gồm tên địa chỉ, điện thoại… Đây là một ứng dụng rất đơn giản được viết bằng PHP/MySQL. Việc triển khai và thực thi ứng dụng này với WAMP Server rất dễ dàng. VI.5.2 So sánh hai ứng dụng AddressBook và SimpleAddressBook Chạy ứng dụng SimpleAddressBook trên localhost ta có kết quả sau: Ta thấy khi thực thi một ứng dụng không dùng AJAX, mỗi khi chuyển một tác vụ nào đó, chẳng hạn như thêm một danh mục vào danh bạ. Trang web sẽ được nạp lại toàn bộ, xuất hiện thanh tiến trình của quá trình nạp. Trong khi việc thay đổi các tác vụ trong ứng dụng AddressBook chỉ dẫn đến sự thay đổi ở phần của trang web được thao tác. Ta không phải đợi cho việc nạp lại toàn bộ trang web. Như vậy, có thể kết luận ưu điểm và sức mạnh của AJAX ở chỗ, nó không thao tác đồng bộ với server theo cách truyền thống là cách nạp lại toàn bộ trang web mà nó truyền dữ liệu theo kiểu bất đồng bộ, cho phép làm việc với từng phần của trang web. KẾT LUẬN AJAX là một công nghệ mang tính đột phá và là công nghệ chủ chốt của thế hệ Web 2.0. Với AJAX, không chỉ là vấn đề cải thiện tốc độ duyệt Web, mà quan trọng hơn đó là việc xóa nhòa ranh giới giữa các ứng dụng Web và ứng dụng Desktop. Việc mô hình hóa theo hướng đối tượng (DOM) các trang web cho ta một hướng tiếp cận và thao tác với từng phần của trang web với các ngôn ngữ script (như JavaScript) trở nên dễ dàng và hiệu quả. Để hiển thị các trang web phía client thì CSS là một giải pháp hoàn hảo. Sự kết hợp các công nghệ hiển thị và cập nhật nội dung phía trình duyệt cộng với việc truyền dữ liệu bất đồng bộ qua XMLHtttpRequest đã hình thành lên AJAX. AJAX có thể mở ra một hướng đi mới cho CNTT, khi đó có thể chia sẻ và tiết kiệm tối đa. Một số hướng nghiên cứu và phát triển với AJAX có thể được triển khai là: Xây dựng các ứng dụng Web để thay thế các ứng dụng desktop. Nâng cao tính cộng đồng và chia sẻ trong các ứng dụng Web (một ví dụ là ứng dụng flickr). Xây dựng các ứng dụng web có tính tương tác cao với người dùng (như các ứng dụng blog, wiki) Tạo ra các ứng dụng Web kiểu AJAX thay thế các ứng dụng web truyền thống. Tất nhiên, AJAX đang trong quá trình hoàn thiện, vẫn có nhiều vấn đề phải giải quyết, nhưng trong tương lai gần, các ứng dụng AJAX sẽ dần thay thế các ứng dụng dùng công nghệ truyền thống.