Ở 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ử
Trang 1Luận văn Kiến trúc WEB 2.0
Trang 2MỤC LỤC
Chương 1: Nghiên cứu kiến trúc 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á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”
WEB 2.0 là gì ? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0 ? Thuật ngữ
“Web 2.0” đang trở nên thịnh hành và có phần được lăng xê quá mức Thực chất Web 2.0 có nghĩa là sử dụng web với đúng bản chất và khả năng của nó
Trang 3Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm kết nối các nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ thông tin hiệu quả Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee cũng nhằm mục tiêu tạo ra phương tiện cho phép người dùng tự do đưa thông tin lên Internet
và dễ dàng chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-Lee viết bao gồm cả công cụ soạn thảo trang web) Tuy nhiên sau đó web đã phát triển theo hướng hơi khác mục tiêu ban đầu
Trang 4Tuy có một số ngoại lệ nhưng thế giới Web 1.0 (thế hệ web trước Web 2.0) chủ yếu gồm các website "đóng" của các hãng thông tấn hay các công ty nhằm mục đích tiếp cận độc giả hay khách hàng hiệu quả hơn Nó là phương tiện phát tin hơn là phương tiện chia sẻ thông tin Chỉ đến gần đây, với sự xuất hiện của nhiều kỹ thuật mới như blog (hay weblog), wiki web mới trở nên có tính cộng đồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực sự của nó.
1.1 Khái niệm WEB 2.0:
Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của OReilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do OReilly Media và MediaLive
Trang 5International tổ chức vào tháng 10/2004 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: "DoubleClick là Web 1.0; Google AdSense là Web 2.0 Ofoto là Web 1.0; Flickr là Web 2.0 Britannica online là Web 1.0; Wikipedia là Web 2.0 v.v " Sau đó Tim OReilly, chủ tịch kiêm giám đốc điều hành OReilly Media, đã đúc kết lại 7 đặc tính của Web 2.0:
Web có vai trò nền tảng, có thể chạy trên mọi ứ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 được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng
Phát triển ứng dụng dễ dàng và nhanh chóng
Phần mềm có thể chạy trên nhiều thiết bị
Giao diện ứng dụng phong phú
Trang 6Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò nền tảng ứng dụng Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng 10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.
1.2 Công nghệ:
Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0 Hàng loạt công nghệ mới phát triển nhằm làm cho ứng dụng trên web “mạnh” hơn, nhanh hơn và dễ sử dụng hơn, được xem là nên tảng của Web 2.0
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
Trang 71.2.1 Cung cấp nội dung:
Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hóa để cho phép người sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin) Có nhiều giao thức được cung cấp để phát triển nội dung như RSS, RDF và Atom, tất cả đều dựa trên XML Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính năng của website hay cho phép người dùng tương tác
1.2.2 Dịch vụ web:
Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0 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ả
Trang 8hai 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ệ
Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties Broadcasting Protocol do Chris Dockree phát triển Giao thức này cho phép các đối tượng ảo (tồn tại trên web) tự biết chúng "là gì và có thể làm gì”, nhờ vậy có thể tự liên lạc với nhau khi cần
1.2.3 Phần mềm máy chủ:
Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở "hậu trường" Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn
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 2 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
1.2.4 Cộng đồng:
Trang 9Công nghệ chỉ là "bề nổi" của Web 2.0, chính cộng đồng người dùng mới là yếu
tố nền tảng tạo nên thế hệ web mới Việc chuyển từ "duyệt và xem" sang "tham gia" là cuộc cách mạng thực sự, dĩ nhiên nhờ có sự phát triển công nghệ giúp hiện thực khả năng này nhưng ở đây muốn nhấn mạnh đến hành vi của người dùng đối với web
Hiện trạng phổ biến của các website thế hệ 1.0 đó là chứa nhiều thứ phiền toái
và làm việc chậm chạp, dường như luôn muốn gửi đến người dùng thông điệp: đây là website của chúng tôi chứ không phải của bạn Căn nguyên của vấn đề có thể là do chủ sở hữu các website cảm thấy họ "cho không" cái gì đó Đôi khi chủ
sở hữu website cho rằng càng làm khó người dùng thì họ càng được lợi! Điển hình như một số site cho bạn đọc đoạn đầu của bài viết rồi yêu cầu bạn phải đăng ký (có phí hay không) để đọc nốt phần còn lại
Trang 10Dĩ nhiên, với sự phổ biến của các phần mềm máy chủ, trong đó có cả phần mềm miễn phí như Apache thì người dùng có thể đưa lên web bất kỳ thông tin gì Tuy nhiên có nhiều yếu tố cản trở: kỹ năng tạo website, hạn chế của nhà cung cấp dịch vụ Internet, việc bảo mật và kiểm duyệt
Về cơ bản, Web 2.0 trao quyền nhiều hơn cho người dùng và tạo nên môi trường liên kết chặt chẽ các cá nhân với nhau Giờ đây có nhiều ví dụ cho thấy cộng đồng người dùng có thể đóng góp thông tin giá trị khi họ có phương tiện thích hợp Wikipedia có lẽ là ví dụ nổi tiếng nhất Tuy có nhiều học giả không đánh giá cao Wikipedia, nhưng họ quên một điều quan trọng: nó đủ tốt, miễn phí và nhiều người có thể đọc Ngoài ra còn có những ví dụ khác như các site Reddit
và Digg để cho người dùng quyết định thông tin gì là quan trọng, hay del.icio.us cho phép mọi người chia sẻ những địa chỉ web hay
Web 2.0 cho phép mọi người có thể đưa lên mạng bất cứ thông tin gì Với số lượng người tham gia rất lớn, đến mức độ nào đó, qua quá trình sàng lọc, thông tin sẽ trở nên vô cùng giá trị Ở đây có sự tương đồng với thuyết chọn lọc tự nhiên
1.3 Kết luận:
Thật sự, Web 2.0 không phải là cái gì đó hoàn toàn mới mà là sự phát triển từ web hiện tại Nó vẫn là web như chúng ta dùng lâu nay, chỉ có điều giờ đây chúng ta làm việc với web theo cách khác Các website không còn là những "ốc đảo" mà trở thành những nguồn thông tin và chức năng, hình thành nên môi trường điện toán phục vụ các ứng dụng web và người dùng
Không phải là viễn cảnh, Web 2.0 đã hiện hữu quanh chúng ta với hàng loạt website thế hệ mới Xu hướng chuyển đổi sang Web 2.0 đang diễn ra mạnh mẽ
và là xu thế tất yếu
Trang 11Chương 2: Nghiên cứu AJAX, jQuery.
2.1 AJAX:
2.1.1 Khái Niệm 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ũ Qui trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người dùng sau khi nhấn một nút “Submit” trên trang web phải chờ cho đến khi server
xử lý xong mới có thể tiếp tục công việc
Trang 12Ajax 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
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
2.1.2 AJAX -CSS
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
Trang 13XMLHttpRequest (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.
Cascading Style Sheet – 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, nó được dùng rất nhiều trong các ứng dụng Web truyền thống cũng như trong Ajax 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
Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ
Trong ứng dụng Web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa.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 :
1 Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet
2 Định nghĩa trong một trang web (Internal Style Sheet)
3 Đị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ử
Trang 14đượ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 Giả sử muốn tạo ra các dòng text trong level-1 heading trong tài liệu đó là đoạn nằm trong thẻ <H1> có màu đỏ.
Có thể khai báo thuộc tính CSS như sau:
h1 {color: red}
Chúng ta cũng nên phân tích:
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
Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ Style thường được lưu trong các file nằm ngoài trang web Chúng giúp thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS
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
CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong một trang web hoặc ở trong một file CSS bên ngoài
d Thứ tự áp dụng các định dạng
Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS Điều
gì sẽ xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML? Theo một cách chung nhất ra có thể nói các style sẽ được “xếp tầng” (cascade) Việc xếp tầng này tuân theo thứ tự ưu tiên giảm dần như sau:
Inline Style (Style được qui định trong một thẻ HTML cụ thể)
Internal Style (Style được qui định trong phần <HEAD> của một trang (HTML)
Trang 15 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)
2.1.3 AJAX – DOM
Document Object Model (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 để viết một ứng dụng Ajax Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server.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ẻ <HTML>, để biểu diễn tài liệu Trong đó thẻ <BODY> 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
Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM Phần tử DOM đã được đặc tả bởi W3C Mỗi phần tử DOM có một phần
tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối.Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML Mối quan hệ này là hai chiều Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web.Các công nghệ trong AJAX - DOM - Làm việc với DOM bằng JavaScript
Trang 16Là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
Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví
dụ về một trang HTML đơn giản
<html>
<head>
<link rel=’stylesheet’ type=’text/css’ href=’hello.css’ />
<script type=’text/javascript’ src=’hello.js’></script>
Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML:
Trang 17Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các style
là tùy chọn) Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript
Trang 18Yê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, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn
Vì thế có các cách sau để tìm kiếm một nút nhanh chóng hơn Mỗi phần tử HTML có một thuộc tính ID, ví dụ như:
Trang 19Mộ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() Ví dụ, document.getElementsByTagName(”UL”) sẽ trả về chuỗi tất cả các thẻ <UL> trong tài liệu.
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ới là document.createElement() và document.createTextNode(), phương thức createElement() có thể được dùng để tạo ra bất kỳ phần tử HTML nào, tham số
là kiểu của loại thẻ HTML:
var childEl=document.createElement(”div”);
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
var txtNode=document.createTextNode(”some text”);
Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML Chúng không có các stye để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn.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 el.appendChild(childEl);
Ba phương thức createElement(), createTextNode(), và appendChild() cho phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu
2.2 jQuery:
Khi mà nhiều nhà phát triển chấp nhận phát triển kiểu AJAX để tạo ra các ứng dụng tương tác mạnh hơn, họ sẽ tìm các công cụ giúp đơn giản hóa cho công việc của mình
Trang 20jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng Lang.Net của Microsoft hồi đầu tháng
8, tổ chức ở Redmond, Washington
2.2.1 jQuery làm việc như thế nào?
Căn bản: Để làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội dung như sau:
< html >
< head >
< script type = ”text / javascript” src = ”path / to / jquery js” > </script>
< script type=”text/javascript ”> // <font color=”#ff0000″>(*)</font> </script>
</head> <body>
<a href=”http://jquery.com/”>jQuery</a>
</body>
</html>
Bạn cần điều chỉnh lại src (nguồn) của file jquery.js Thí dụ, nếu như file
jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ giống như sau:
< script type = ”text / javascript” src = ”jquery js” > </script>
Bạn có thể tải về file jquery.js : http://docs.jquery.com/Downloading_jQuery
2.2.1.1 Chạy code khi tài liệu sẵn sàng:
Theo cách viết javascript thông thường, coder đặt code muốn brower xử lý tương tự như sau:
Trang 21window onload = function(){ // Your code here}
Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
$( document ) ready (function(){ // <font color=”#ff0000″>(**)</font>});
Chú ý: Từ nay, ta gọi vùng (**) ở đoạn code trên là vùng js chính
Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này Bây giờ, bạn hãy đặt đoạn code trên vào phần trong file html hiện thời của bạn
Thêm thuộc tính onclick
Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời để hiển thị một liên kết
< a href = ”http : //pcworld.com.vn”>Hello world</a>
Đoạn code js sau vào phần (**) để thêm thuộc tính onclick cho các thẻ “a”
$(”a”).click(function(){ alert(”Hello! How are you ?”);});
Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo
“Cảm ơn đã ghé thăm!” Bạn có thể thêm thuộc tính onclick này cho bất kỳ thẻ nào trong trang web của mình
Thủ thuật
Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ không chuyển sang trang web toila.net
$( ”a” ) click (function(){ alert ( ”Thank for your visit ! ” ); return false ;});
2.2.1.2 Thêm class:
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class vào một (nhiều) đối tượng DOM
Trang 22Thêm đoạn code sau vào phần header của trang web (định dạng cách trình bày cho class ‘test’ của các thẻ HTML có tên ‘a’)
< style type = ”text / css” > a test { font - weight : bold ; }</ style >
Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ ‘a’ sẽ được trình bày bằng định nghĩa ở đoạn code trên
$( ”a” ) addClass ( ”test” );
Bạn cũng có thể xóa class ra khỏi một DOM
2.2.1.3 Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem
$( ”a” ) click (function(){ $( this ) hide ( ”slow” ); return false ;});
2.2.2 Cách gọi dây chuyền:
Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình hướng đối tượng với jQuery:
$( ”p” ) addClass ( ”test” ) show () html ( ”foo” );
Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời Khi tương đối thành thạo jQuery, bạn có thể sẽ thấy quen thuộc đoạn code sau:
$( ”a” ) filter ( ” clickme” ) click (function() { alert ( ”click ! ” );}) end () filter ( ” hideme” ) click (function() { $ ( this ) hide ();});
Trang 232.2.3 Callbacks, Functions và đối tượng ‘this’Callback:
Là một hàm được thực thi sau khi một hàm cha của nó được thực thi xong Cách khai báo callback trong jQuery có phần khác với cách truyền thống
2.2.3.1 Khai báo callback không có tham số
$ get ( ’myhtmlpage html’ , myCallBack );
Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ không phải là một chuỗi (không đặt giữa cặp nháy đơn)
2.2.3.2 Khai báo callback với tham số:
Cách khai báo sai
$ get ( ’myhtmlpage html’ , myCallBack ( param1 , param2 ));
Cách khai báo đúng
$ get ( ’myhtmlpage html’ , function(){ myCallBack ( param1 , param2 );});
Giới thiệu cơ bản về jQuery và các khái niệm để bạn có thể sử dụng
Cơ bản
Đây là bài hướng dẫn cơ bản, nhằm giúp bạn có những kiến thức căn bản để sử dụng jQuery Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một tài liệu HTML với nội dung như sau:
Trang 24< script type = ”text / javascript” src = ”jquery js” > </script>
Có thể thấy rằng hầu hết các lập trình viên Javascript kết thúc mã thực thi bằng cách thêm các dòng mã vào script, tương tự như sau:
window onload = function(){ … }
Các mã bên trong đó sẽ được thực thi khi trang được tải xong Không còn gì phải bàn, tuy nhiên, mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo) Lý do cho việc sử dụng window.onload là để chắc chắn rằng HTML ‘document’ phải được tải xuống hết, sau đó mới chạy mã kia
Để giải quyết, jQuery có câu lệnh đơn giản, được biết như ready event:
$( document ) ready (function(){
Chuyện gì xảy ra với sự kiện Click
Đầu tiên, chúng ta sẽ thử thực hiện động tác click với clicked Bên trong ready function (từ ví dụ ở trên), thêm mã như sau:
Trang 25$( ”a” ) click (function(){
alert ( ”Cảm ơn đã ghé thăm ! ” );
$( ”a” ) click (function(){
alert ( ”Cảm ơn đã ghé thăm ! ” );
return false ;
});
Nếu không dùng các đoạn mã trên, nếu bạn nhấn link tới jquery.com trong trang, thì trình duyệt sẽ duyệt tới Nhưng ở đây, trình duyệt sẽ hiện thông báo và không chuyển đi đâu cả
Thêm một Class (lớp với CSS)
Đây là tác vụ dùng để thêm vào (hoặc bỏ đi) các class từ phần tử nào đó, ví dụ:
$( ”a” ) addClass ( ”test” );
Nếu bạn đặt đoạn mã trên vào phần script trong header của trang HTML, thì mã
Trang 26Các hiệu ứng khác:
Trong jQuery, có cung cấp các thành phần effects, để làm cho website của bạn thật sự nổi bật Để chạy thử, hãy thay đoạn mã như sau:
$( ”a” ) click (function(){
$( this ) hide ( ”slow” );
return false ;
});
Bây giờ, nếu bạn nhấn vào liên kết có trong trang, bạn sẽ thấy nó biến mất một cách từ từ
Khả năng liên kết thành chuỗi (một phép thuật jQuery)
jQuery cung cấp cho bạn một cách viết mã đơn giản và ngắn gọn Nó tương tự như cách thức lập trình hướng đối tượng (object-oriented programming), nói đúng hơn đây là cách viết thẳng một hàng
Tóm lại: Mỗi phương thức trong jQuery trả về câu truy vấn đối tượng của chính
nó, nó cho phép bạn ‘xích’ chúng lại với nhau, ví dụ:
$( ”a” ) addClass ( ”test” ) show () html ( ”foo” );
Câu lệnh này chứa những phương thức cá thể (addClass, show, và html) trả về đối tượng jQuery, nó cho phép bạn có thể tiếp dụng sử dụng phương thức để đặt cho phần tử hiện tại
Bạn có thể dùng xa hơn nữa, bằng cách thêm hoặc bỏ phần tử từ vùng chọn, thay đổi các phần tử này và sau đó trả giá trị lại cho vùng chọn trước, ví dụ:
$( ”a” )
filter ( ” clickme” )
click (function(){
Trang 27alert ( ”You are now leaving the site ” );
Bạn tạo thêm đoạn mã HTML như sau:
< a href = ”http : //google.com/” class=”clickme”>I give a message when you leave</a>
< a href = ”http : //yahoo.com/” class=”hideme”>Click me to hide!</a>
< a href = ”http : //microsoft.com/“>I’m a normal link</a>
Các phương thức thay đổi vùng chọn của jQuery, có thể hoàn lại với end(), nó cho biết sự kết thúc của vùng lựa chọn đó và bắt đầu áp dụng lựa chọn mới:
Trang 28Chương 3: Nghiên cứu JSON.
Viết tắt của JavaScript Object Notation JSON là một chuẩn để định dạng dữ liệu, về mặt này, có thể so sánh JSON với XML YAML… Nhưng khi JSON đi với JavaScript hoặc ActionScript thì nó có tính ưu việt hơn hẳn
Tại sao JSON có liên quan đến JavaScript, ActionScript Đơn giản là vì dữ liệu được định dạng JSON chính là cách biểu diễn một đối tượng trong các Scripting Language này
Khi sử dụng JSON với JavaScript hay ActionScript, không cần phải có các bước phân tích phức tạp như đối với XML Mà có thể truy vấn trực tiếp giá trị theo tên (khóa) được định nghĩa trong JSON
var x = xmlObj.childNodes[0].text;
var y = xmlObj.childNodes[1].text;
Trang 29Trong trường hợp tương tự, bạn có một dữ liệu JSON:
var jsonStr = '{ data : { x : 2 , y : 3}}';
Đối với lập trình viên client script JSON rút ngắn thời gian viết mã JS, AS hơn
Trang 30{ "firstname" : "John", "lastname" : "Brown" },
{ "firstname" : "Marc", "lastname" : "Johnson" }
] // end of sales array
}
Thể hiện là một cặp tên - giá trị cú pháp với dấu hai chấm ở giữa Dấu ngoặc vuông xác định các mảng, các dấu ngoặc nhọn xác định bắt đầu và kết thúc của một đối tượng JSON Lưu ý rằng trong javascript các mục tag là bị mất Đối tượng sales có thể được truy cập như sau :
alert("first item: " +employees.sales[0])
var extraSales = { "firstname" : "Mary",
"lastname" : "Doe"};
data.sales[employees.sales.length] = extraSales; // add extra sales record (with index 2)
alert("extra sales from: " +data.sales[2].firstname); // shows "Mary"
Các bản ghi JSON được truy cập bằng cách sử dụng một chỉ số bắt đầu từ số không Điều này cũng tương tự như truy cập vào các thẻ mục trong xml sử dụng XPath Trong trường hợp đó chỉ số bắt đầu từ một Ngoài ra một cấu trúc
Trang 31con JSON phải được tạo ra đầu tiên trước trường con của nó có thể được truy cập hoặc thiết lập Ví dụ:
data.sales[3]= extraSales; // or: data.sales.push(extraSales);
// the next statement is ok because sales[3] is has been created before
data.sales[3].firstname = "Pete";
Rất dễ dàng qua các đối tượng JSON giữa jQuery và PHP Dưới đây là một ví
dụ simpleform.html file html dùng ajax để gọi một simpleformSubmit.php kịch bản PHP Trang web này sẽ gửi một đối tượng JSON, được lặp lại bởi các script PHP
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple form sending and receiving a JSON object to/from PHP</title>
<script type="text/javascript" src=" / /jQuery/jquery-1.2.6/dist/jquery.pack.js"></script>
<script type="text/javascript" src=" / /jQuery/plugins/json2.js"></script>
{ "firstname" : "John", "lastname" : "Brown" },
{ "firstname" : "Marc", "lastname" : "Johnson" }
] // end of sales array
}
Trang 32var dataString = JSON.stringify(data);
$.post('simpleformSubmit.php', { data: dataString}, showResult, "text");
});
function showResult(res)
{
$("#fullresponse").html("Full response: " +res);
var obj = JSON.parse(res);
$("#sales1Lastname").html("Lastname of sales[1]: " +obj.sales[1].lastname);
$res = json_decode(stripslashes($_POST['data']), true);
error_log("result: ".$_POST['data'].", res=".json_encode($res), 3, $logFile);
error_log(", sales1_lastname: ".$res['sales'][1]['lastname'], 3, $logFile);
Trang 33Chính vì lẽ đó vào năm 1990 Tim Berners-Lee ở CERN, đã tạo ra HTML (là một ứng dụng của SGML), một phần nhỏ của SGML, nhưng mọi người lại rất
dễ dùng Không ngờ sự thành công của HTML vượt quá sức tưởng tượng của chính tác giả
Nhưng rồi đến một ngày vào năm 1995 người ta bắt đầu thấy sự giới hạn của HTML, mặc dù nó được Netscape, Microsoft cố gắng thêm thắt, bởi sự thịnh hành của Web Do đó, nhiều người có ý định quay trở lại SGML, nhưng lại ái ngại
Ðúng lúc đó vào 1996, Jon Bosak ở Sun Microsystem khởi đầu nhóm cộng tác(working group) W3C SGML, bấy giờ được gọi là nhóm XML Mục đích là đơn giản hoá SGML để nó dễ dùng như HTML mà đồng thời mạnh mẽ, dễ dùng,
Tim Bray và C.M Sperberg-McQueen viết hầu hết Specification (bản điều kiện
Trang 34kỹ thuật) nguyên thủy của XML Trước đó, Bray đã có kinh nghiệm nhiều năm quản lý dự án "New Oxford English Dictionary" Ông muốn XML hội các điều kiện sau:
Ðơn giản đủ cho lập trình viên áp dụng
Dễ cho Search Engine (như AltaVista, Yahoo, Infoseek, ) phân loại
Không giới hạn trong tiếng Anh của nước Mỹ
Chính vì lẽ đó, bản Specification đầu tiên của XML được ra đời vào tháng 11 năm 1996 Tháng 7 năm 1997 Microsoft áp dụng đầu tiên của XML, Channel Definition Format (CDF) Họ dùng CDF để xuất bản các trang Web đến những khách đã đóng tiền tháng (subscribers) CDF là một phần của Internet Explorer 4.0 Tháng 5 năm 1997 Microsoft và Inso Corporation xuất bản XSL (eXtensible Style Language)để làm Style Sheet diễn tả cách trình bày một trang XML
Ðến tháng 1 năm 1998 Microsoft cho ra một chương trình miễn phí tên MSXSL để generate một trang HTML từ một cặp trang XML và XSL Sau này thì Internet Explorer 5.0 có thể hiển thị trực tiếp một trang XML (bên trong
có ghi phải tìm trang XSL ở đâu), không cần cho thấy kết quả trang HTML.Vào tháng 2 năm 1998 Tổ hợp Web toàn cầu W3C phê chuẩn cho chính thức thi hành Version 1.0 của XML Specification
4.2 XML là gì?
XML viết tắt của chữ eXtensible Markup Language (ngôn ngữ nâng cấp có thể
mở rộng) là một bộ qui luật về cách chia một tài liệu ra làm nhiều phần, rồi đánh dấu và ráp các phần khác nhau lại để dễ nhận diện chúng Ðược chỉ đạo bởi Tổ hợp Web toàn cầu (W3C), XML trở thành một đặc điểm kỹ thuật chính thức
Trang 35Tổ hợp Web toàn cầu W3C gọi XML là "một cú pháp thông dụng cho việc biểu thị cấu trúc trong dữ liệu" Dữ liệu có cấu trúc tham chiếu đến dữ liệu được gán nhãn cho nội dung, ý nghĩa, hoặc công dụng
Ví dụ : Trong một trang Web ta dùng những Tag Pairs (cặp nhãn hiệu mở đóng)
để đánh dấu như <BODY> và </BODY> Hãy quan sát một trang Web dưới đây:
A: "Sao anh lại cắt dây điện ở phòng họp?"<BR>
B: "Vì dây điện nhà tôi thiếu mất một khúc".<BR>
A: "Như vậy là lấy công làm tư!" <BR>
B: "Không, như vậy là lấy dài nuôi ngắn!" <BR>
</BODY>
</Html>
Trong HTML Web page các Tag Pair đều được định nghĩa trước và không chứa đựng ý nghĩa gì về dữ kiện mà chúng kẹp bên trong, trừ trường hợp cho TITLE Thí dụ H1 có nghĩa display hàng chữ bên trong (Ðịnh Nghĩa) theo cở lớn nhất, nhưng hàng chữ ấy có thể là bất cứ thứ gì, không nhất thiết phải là từ (Ðịnh Nghĩa) ở đây Còn XML thì cho phép ta tự do đặt tên các Tag Pair để dùng khi
Trang 36cần Nếu tính ra, Dynamic HTML có đến khoảng 400 Tags mà nếu muốn dùng
ta phải nhớ hết Trong khi đó, XML không có giới hạn về con số Tags và ta không cần phải nhớ Tag nào cả Ý nghĩa của các Tag rất linh động và ta có thể sắp xếp các tags của XML theo loại cho hợp lý Thí dụ muốn làm một trang XML về môn Văn học ta cần những Tag diễn tả nhân vật, ngày sanh, ngày tử,
4.3 Vì sao XML quan trọng?
Những tay thiết kế Web cho rằng nội dung là trên hết Chẳng may, thông thường thì nội dung có liên quan chặt chẽ đến cách thức nó được hiển thị Từ trước đến nay đã có bao nhiêu lần bạn nhìn thấy câu "Best viewed at 800-by-600-pixel resolution" (hiển thị tốt nhất ở độ phân giải 800x600) khi duyệt qua một trang Web?
Thay vì phải chỉ rõ phương thức hiển thị, XML sẽ giúp giải quyết vấn đề đó bởi
vì những người xây dựng Web sẽ có khả năng chỉ định cấu trúc của tài liệu Ví
dụ, bạn có thể chỉ định tựa đề của tài liệu, tác giả, một danh sách các liên kết có liên quan, Khi đó bất kỳ một thiết bị nào với một trình duyệt XML đều có thể thể hiện một phiên bản của tài liệu được tạo đặc trưng cho thiết bị đó
Tuy nhiên, có lẽ tính năng ưu việt nhất của XML đó là khả năng mở rộng kế thừa Các tổ chức và công ty sẽ có khả năng mở rộng XML để đáp ứng những thử thách và các ứng dụng mới Một ngôn ngữ dựa trên XML hiện đang được sử dụng - CDF của Microsoft - và còn nhiều ngôn ngữ khác đang trong quá trình hoàn thiện sắp được đưa ra, bao gồm Resourse Definition Format (RDF) và Open Software Description (OSD)
Vì cả tài liệu XML đều nằm dưới dạng Text String nên nếu gởi đi xa có hư mất chút đỉnh, đầu kia cũng đoán ra được Giả dụ vào thế kỷ 23 sau nầy có ai bắt được một tài liệu XML của năm 2000, nhưng trong đó có vài chữ bị mờ, họ cũng đoán <FA ILY>Lê Quang Anh Hưng <FAM LY> có nghĩa
Trang 37là <FAMILY>Lê Quang Anh Hưng <FAMILY> Mặc dầu ta nói ai muốn đặt ra TAG nào trong XML cũng được, nhưng thí dụ mỗi nghề nghiệp như cơ khí, y học, Tin học, ấn định một số TAGs, mỗi TAG có ý nghĩa theo sự đồng ý trước trong nghề của mình, người ta có thể dùng XML và Style Sheet để quy định cách chứa dữ kiện và ngay cả cách trình bày cho riêng nghề của mình.Một công ty cơ khí có thể dùng một chương trình chạy tự động (Robot) để dọ giá những vật liệu tư từ các công ty cung cấp qua cách dùng XML Đây là khởi đầu cho việc giao dịch kinh doanh tự động (Business-To-Business hay B2B) Có một quy ước về cách dùng XML để trao đổi dữ kiện đã được triển khai gọi là
"Open Financial Exchange Format (OFX)" Người ta thiết kế OFX để cho các chương trình tài chánh như Microsoft Money và Quicken trao đổi dữ kiện hay gởi các dữ kiện tài chánh đến nhà băng,
Vì XML là một chuẩn công cộng, không thuộc về một công ty nào, nên người dùng không sợ phải đụng chạm ai về copyright, hay bị giới hạn cách sử dụng, Thí dụ như với XML ta có thể tránh phải lệ thuộc hoàn toàn vào Microsoft Word khi gởi một tài liệu vì sợ đầu kia người ta không có Microsoft Word Miễn
là tất cả các Word Processors đều đọc, viết XML được, ta có thể dùng XML làm phương tiện trao đổi các tài liệu Người dùng ở mỗi nơi có thể tự do chọn một Word Processor theo sở thích
XML không những cho bạn định nghĩa các phần của tài liệu mà còn đặt qui ước
về sự liên hệ của các phần ấy
Vào năm 1998 hoặc 1999 thì còn quá sớm để xác định được XML sẽ đi đến đâu Nhưng đến thời điểm hiện tại thì XML được thừa nhận là một chuẩn giao dịch thông tin, một lý do chính để hiểu tại sao có quá nhiều sự xôn xao tập trung quanh XML Tổ hợp Web toàn cầu W3C đã chính thức đưa ra chuẩn XML ver1.0
Trang 384.4 SGML, HTML, và XML có quan hệ với nhau như thế nào?
Ngôn ngữ đánh dấu tiêu chuẩn tổng quát (SGML - Standard Generalized Markup Language) là một phương pháp biểu thị dữ liệu trong những ứng dụng
xử lý văn bản Nó đã tồn tại hơn một thập kỷ nay; cả XML lẫn HTML đều là những định dạng tài liệu có nguồn gốc từ SGML Vì vậy, tất cả chúng đều cùng chia sẻ một số đặc tính chẳng hạn như một cú pháp tương tự và cách dùng các nhãn trong dấu ngoặc nhọn Nhưng HTML là một ứng dụng của SGML, trong khi XML là một bộ trình con của SGML
Sự phân biệt là rất quan trọng Cơ bản, HTML không thể dùng để định nghĩa nên các ứng dụng mới trong khi XML có thể thực hiện được việc này Ví dụ, cả RDF lẫn CDF đều là những ứng dụng được định nghĩa bằng XML XML và HTML thực sự giống như hai anh em họ hơn là hai anh em ruột:-) Tổ hợp Web toàn cầu W3C đã phát triển một biểu đồ lớn để làm sáng tỏ mối quan hệ này.XML thực sự tương thích với SGML - bất cứ một công cụ tạo hoặc duyệt SGML nào cũng có thể đọc được những tài liệu XML Tuy nhiên, XML đỡ phức tạp hơn SGML, và nó được thiết kế để chạy trên một mạng băng tầng hữu hạn ví
dụ như Internet Theo Tim Bray - đồng biên tập viên XML - thì ý tưởng đằng sau XML là tận dụng lợi ích của SGML, loại bỏ những phần phức tạp, duy trì tính nhẹ nhàng, và làm cho nó hoạt động được trên Web
4.5 XML được thực hiện như thế nào?
XML được sử dụng trong hai cách khác nhau Một cho sự trao đổi lẫn nhau giữa người và máy, ví dụ như từ một máy chủ Web đến trình duyệt của một người sử dụng Một cách khác cho sự trao đổi dữ liệu giữa các ứng dụng hoặc giữa máy với máy Trong hai trường hợp, dường như bạn sẽ cần đến một cơ cấu ba tầng: một căn cứ cơ sở dữ liệu; một máy chủ tầng giữa, nơi logic công việc hoạt động theo dữ liệu; và máy khách hàng, nơi dữ liệu được trình bày và xử lý sâu hơn
Trang 39Cơ sở dữ liệu có thể nhận thông tin từ nhiều nguồn dữ liệu khác nhau, có lẽ đã được định dạng XML Tầng giữa khi đó có thể kéo dữ liệu lại với nhau và đưa
nó sang tầng trình bày cuối cùng Ngày nay, các trang Web đôi khi được phân phối theo cách này - NEWS.COM của CNET phát hành từ một cơ sở dữ liệu Nhưng để vào một khung duyệt mới của một trang, chẳng hạn như tùy chọn mới
về máy in thân thiện của NEWS.COM, thì máy chủ phải phát sinh một trang mới Một tài liệu XML được định dạng hoàn hảo sẽ cho phép ứng dụng máy khách hàng hiệu chỉnh lại diện mạo tài liệu cho nhiều phương tiện khác nhau, ví
dụ như một máy in
4.6 Một định nghĩa kiểu tài liệu (DTD) là gì?
Một định nghĩa kiểu tài liệu (DTD - Document Type Definition) là một bộ những qui tắc cú pháp cho các nhãn Nó cho bạn biết những nhãn nào bạn có thể
sử dụng trong một tài liệu, chúng nên được xếp theo thứ tự nào, những nhãn nào
có thể xuất hiện bên trong các nhãn khác, những nhãn nào có các thuộc tính, Nguồn gốc được phát triển cho việc sử dụng với SGML, một DTD có thể là một
bộ phận của một lài liệu XML, nhưng thường nó là một tài liệu riêng biệt hoặc một loạt các tài liệu
4.7 Thử viết một trang XML đơn giản.
Một trang XML đơn giản nhất:
<?xml version="1.0" standalone="yes"?>
<gicungduoc>
Chào XML! Mạnh giỏi?
</gicungduoc>
Trang 40Mỗi trang XML đều bắt đầu bằng một "XML processing instruction" (lệnh xử lý XML) Processing instruction bắt đầu với <? và chấm dứt với ?> Chữ đầu tiên ngay sau <? là lệnh xử lý, trong trường hợp nầy là "xml".
Trong câu processing instruction nói trên cũng có hai Attributes (phụ từ), đó là
"version" (ấn bản) và "standalone" (đứng một mình) Giá trị của chúng là "1.0"
và "yes" Ở đây muốn nói rằng trang XML nầy được viết theo đúng XML 1.0 Specification và nó có thể làm việc một mình, không cần phải import (kéo thêm vào) file nào khác
<gicungduoc> và </gicungduoc> là một Tag Pair Nó kẹp một dữ kiện bên trong Thật ra ta có thể đặt tên cho Tag nầy thứ gì cũng được Tức là cùng một trang XML nói trên, ta đã có thể viết theo một trong ba cách sau đây: