Kiến trúc WEB 2.0 docx

Luận văn
Kiến trúc WEB 2.0
1
MỤ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ó.
2
Mụ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.
3
Tuy 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
4

International 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ú.
5
Thoạ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.
6
1.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ả
7
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ệ
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:
8
Cô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.
9
Dĩ 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.
10
Chươ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.
11
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.
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
12
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.
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ử
13
đượ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).
14
 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.
15
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.
Để 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>
</head>
<body>
<p id=’hello’>hello</p>
<div id=’empty’></div>
</body>
Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style
Sheet) và một file chứa mã nguồnJavaScript là hello.js. Ở đây cũng đồng thời
khai báo một thẻ <div> với một ID.
Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file
HTML:
.declared{
color: red;
font-family: arial;

font-weight: normal;
font-size: 16px;
}
16
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}
Chú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.
window.onload=function(){
var hello=document.getElementById(’hello’);
hello.className=’declared’;
var empty=document.getElementById(’empty’);
addNode(empty,”reader of”);
addNode(empty,”Ajax in Action!”);
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
children[i].className=’programmed’;
}
empty.style.border=’solid green 2px’;
empty.style.width=”200px”;
}
function addNode(el,text){
var childEl=document.createElement(”div”);
el.appendChild(childEl);
var txtNode=document.createTextNode(text);

childEl.appendChild(txtNode);
}
Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này,
cấu trúc cây DOM sẽ được thiết lập.
Tìm kiếm một DOM Node
17
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,
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ư:
<p id=’hello’>
Hay
<div id=’empty’></div>
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’);
Trong một số trường hợp, cần duyệt qua cấu trúc cây từng bước một, mỗi nút
DOM có một nút cha và nhiều nút con. Chúng có thể được truy cập bởi các
thuộc tính parentNode và childNodes, thuộc tính parentNode trả về một đối
tượng DOM node khác, trong khi childNodes trả về một mảng javascript:
var hello=document.getElementById(’hello’);
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
…
}
18

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(). 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.
19
jQuery 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=”
</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 : />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:
20
window.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=””>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.
21
Thê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();});
22
2.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:
<html>
<head>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript”>
// Your code goes here
</script>
</head>
<body>

23
<a href=”
</body>
</html>
Sửa thuộc tính src trong thẻ script để trỏ tới jquery.js Ví dụ, nếu jquery.js ở cùng
thư mục với tệp HTML, bạn có thể dùng:
<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(){
// Mã của bạn
});
Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý
bạn muốn. Hãy lấy đoạn mã mẫu ở trên và cho vào tài liệu HTML của bạn. Các
ví dụ còn lại của jQuery sẽ được đặt bên trong phần callback của hàm này,
chúng sẽ được thực thi khi tài liệu sẵn sàng.
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:
24
$(”a”).click(function(){
alert(”Cảm ơn đã ghé thăm!”);
});

Lưu tệp HTML và tải lại trang thử nghiệm trên trình duyệt (Ctrl+F5). Bấm vào
link nào đó trên trang và trình duyệt sẽ hiện ra một thông báo pop-up.
Đối với sự kiện click và hầu hết các sự kiện khác events, bạn có thể can thiệp
vào hành động mặc định - ở đây, sau đây là link dẫn tới jquery.com - bằng cách
trả về giá trị false từ điều khiển sự kiện:
$(”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ã
tự động sinh ra sẽ là:
<style type=”text/css”>a.test { font-weight: bold; }
</style>
và sau đó addClass được gọi - tất cả những phần từ A sẽ được làm đậm. Để bỏ
class, bạn có thể sử dụng removeClass
25