Tiểu luận: Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ AJAX

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