PDF:

Làm việc với jQuery, Phần 3: Các ứng dụng của Rich
Internet với jQuery và Ajax : JQuery: Xây dựng các ứng
dụng Web của tương lai ngay bây giờ
Hiệu ứng và Ajax
Michael Abernethy
Giám đốc phát triển sản phẩm
EMC
20 11 2010
JQuery đang nổi lên như thư viện JavaScript được lựa chọn của các nhà phát triển web đang
tìm cách dễ dàng tạo các ứng dụng Internet động của họ. Vì rằng các ứng dụng dựa trên trình
duyệt tiếp tục thay thế các ứng dụng máy tính để bàn, nên việc sử dụng các thư viện này sẽ chỉ
tiếp tục phát triển. Hãy tìm hiểu jQuery trong loạt bài này về JQuery và cách bạn có thể thực
hiện trong các dự án ứng dụng Web của riêng bạn.
Xem thêm bài trong loạt bài này
Giới thiệu
JQuery đã phát triển nhanh chóng và phổ biến trong vài tháng qua, trở thành thư viện JavaScript
được lựa chọn cho các nhà phát triển Web. Điều này trùng hợp với sự tăng trưởng nhanh chóng
trong việc sử dụng và cần thiết đối với Ứng dụng Internet phong phú - RIAs, sẽ thay thế các ứng
dụng của máy tính để bàn với các ứng dụng dựa trên trình duyệt. Mọi thứ, từ các bảng tính đến
bảng lương và ứng dụng thư điện tử, đang lặp lại kinh nghiệm với máy tính để bàn trong trình duyệt.
Vì các ứng dụng này trở nên nhiều và phức tạp hơn, nên thư viện JavaScript sẽ trở nên quan trọng
hơn bao giờ hết với vai trò là nền tảng vững chắc để xây dựng trên đó. JQuery là nền tảng lựa chọn
đó của người phát triển web. Loạt bài này khám phá jQuery sâu hơn và cung cấp một nền tảng
vững chắc để bất kỳ người phát triển nào cũng có thể xây dựng một RIA một cách nhanh chóng và
dễ dàng.
Trong bài trước, bạn đã học ba thành phần cơ bản để xây dựng một RIA và cách để thêm tương
tác vào trang bất kì. Mô-đun đầu tiên là mô-đun Event, cho phép bạn thu thập bất kỳ sự tương tác
nào trên trang từ người sử dụng và đáp ứng tương tác đó về mặt lập trình. Điều này cho phép bạn
gắn mã vào việc nhấn nút bàn phím, chuyển động của chuột, vv... Mô-đun tiếp theo mà bạn nghiên
cứu là mô-đun Attribute, giải thích cách để lấy/thiết lập các giá trị trên các phần tử, và cách bạn có
thể sử dụng chúng như đối tượng dữ liệu với các biến. Các biến này chứa nhiều thông tin mà bạn
© Copyright IBM Corporation 2010
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Nhẫn hiệu đăng ký
Trang 1 của 13
developerWorks®
ibm.com/developerWorks/vn/
sẽ sử dụng để quyết định loại đáp ứng mà bạn sẽ cung cấp cho người dùng. Cuối cùng, bạn xem xét
thao tác CSS và cách thay đổi bố cục, màu sắc, phông chữ, vv.. của bất kỳ phần tử nào trên trang
mà không cần tải lại trang. Với ba mô-đun này, bạn đã học về ba phần tử cơ bản của các trang Web
tương tác — thu thập tương tác người dùng (Sự kiện), thu thập thông tin (Thuộc tính) và cung cấp
phản hồi dựa trên sự kết hợp các sự kiện và thông tin (CSS).
Trong bài này, bạn sẽ có ba phần tử cơ bản của tương tác trang web với mức cao hơn, cung cấp các
hiệu ứng "tuyệt vời" và các tính năng, mà là phần của các ứng dụng web nâng cao mà bạn nhìn
thấy hôm nay. Các mô-đun phụ này không là sống còn để cung cấp RIA, nhưng chúng là những
tính năng thêm vào mà người dùng sẽ nhớ, và những người khác sẽ mở rộng rất nhiều khả năng và
tính năng có sẵn trong RIA của bạn. Mô-đun đầu tiên bạn sẽ nghiên cứu là mô-đun Effects, bao gồm
các tính năng chẳng hạn ẩn các phần tử, chuyển chúng, làm mờ và làm rõ chúng, vv… Nói cách
khác, chính "sự lấp lánh" làm cho các trang web trở nên tuyệt. Mô-đun cuối cùng được bàn đến
là mô-đun JavaScript + XML (Ajax) không đồng bộ. Đây là cái mà hầu hết mọi người xem tương
đương với RIA. Ajax cho các ứng dụng web khả năng giao tiếp với máy chủ, đưa các thông tin vào
máy chủ và lấy thông tin từ nó mà không cần tải lại trang. (Trái với một số ý kiến trên trang Web,
Ajax không đơn giản chỉ là các hình ảnh động JavaScript tuyệt vời). Bạn sẽ thấy rằng jQuery cung
cấp các công cụ Ajax cực kì dễ sử dụng, và thực tế nó làm cho việc sử dụng Ajax trở nên đơn giản
như gọi một phương thức JavaScript khác.
Ứng dụng mẫu trong bài viết này bao bọc mọi thứ bằng cách cho bạn biết cách mô-đun Hiệu ứng
và Ajax có thể phù hợp với ứng dụng Web quảng cáo, với ứng dụng thư điện tử web. Tôi sẽ thêm
một số hiệu ứng vào bản trình diễn để cung cấp một vài chi tiết thú vị, và quan trọng hơn, thêm một
số mã Ajax để các ứng dụng thư điện tử sẽ hiển thị các tin nhắn mà không cần tải lại trang.
Mô-đun Hiệu ứng
Mô-đun Hiệu ứng, như tên gọi của nó, có thể được giả định chỉ chứa các hình động và hiệu ứng mà
các trang web "nghiêm túc hơn" có thể tránh. Nhưng không hoàn toàn là như vậy. Hầu như mọi ứng
dụng sẽ có trường hợp khi một phần tử trang nhất định cần được ẩn đi, hoặc khung nhìn bật/tắt của
nó phụ thuộc vào tình trạng của một phần tử trang khác. Những kiểu thay đổi này là sống còn đối
với RIA, bởi vì chúng cho phép bạn có được tất cả các phần tử của trang trong một lần tải trang,
và sau đó chỉ hiển thị các thông tin cần thiết bằng cách ẩn/hiển thị các phần tử nhất định. Sự lựa
chọn thay thế tải lại trang không là giải pháp tốt. Xét hộp kết hợp, có hai sự lựa chọn: một là ẩn đi
các phần tử trang và một là hiển thị chúng. Rõ ràng là sẽ dễ dàng hơn và hiệu quả khi chỉ ẩn/hiện
các phần tử bằng các đoạn mã ở phía khách, chứ không tải lại trang để ẩn/hiện các phần tử với mọi
thay đổi của hộp kết hợp. Điều bạn muốn đơn giản ẩn/hiển thị phần tử trang hoặc làm cho nó mờ đi/
làm rõ lên là tùy thuộc vào bạn.
Các hiệu ứng cơ bản nhất, như đã nói ở trên, là các hàm show() và hide(). Chúng khá đơn giản;
chúng hiển thị và làm ẩn một cách rõ ràng các phần tử nhất định trên một trang.
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 2 của 13
ibm.com/developerWorks/vn/
developerWorks®
Liệt kê 1. Các hàm ẩn và hiển thị
// shows every <p> on the page
$("p").show();
// hides every <p> on the page
$("p").hide();
// hides every other <p> on the page
$("p:odd").hide();
Ngoài các hoạt động cơ bản đó, cả hai hàm show() và hide() cung cấp các thay thế, cho bạn thêm
một chút khả năng điều khiển đối với cách mà hai tính năng hiển thị và ẩn làm việc. Tài liệu này
mô tả nó như một khả năng hiển thị/ẩn "mềm mại", mà nó biên dịch, đối với hàm show(), thành kết
hợp của khả năng làm mờ đi và hiện rõ.
Trước khi xem xét vài ví dụ, chúng ta hãy quay lại và nói về những đối số mà bạn có thể chuyển vào
các hàm này của mô-đun Effects. Mỗi hàm (trừ các hàm show() và hide() dùng chung) đều cho
phép bạn chuyển thông số về tốc độ của hiệu ứng và một hàm cho phép bạn gọi ra khi hiệu ứng đã
hoàn tất. Tốc độ này cho phép bạn điều khiển hiệu ứng xuất hiện nhanh hay chậm. Đối số này có
thể là chuỗi "chậm", "nhanh", hoặc "bình thậậng". Ngoài ra, nếu bạn cần điều khiển thời gian chính
xác mà hình động xuất hiện, bạn cũng có thể đặt khoảng thời gian là phần nghìn giây làm đối số.
Đối số thứ hai cho các hàm hiệu ứng là một hàm, được gọi khi hiệu ứng kết thúc. Đây là điều quan
trọng khi ta kết hợp một vài hiệu ứng với nhau thành một hiệu ứng lớn hơn, vì nó cho phép bạn
điều khiển tin cậy khi một hiệu ứng kết thúc và khi có hiệu ứng kế tiếp có thể bắt đầu.
Liệt kê 2. Các hiệu ứng phức tạp
//
//
//
//
//
the img with an ID of "picture" should start hidden
when the "showPicture" button is pressed, show the img with an ID of "picture"
and animate it, so it appears quickly in a fade In and slide out, and when
it's done being shown, show the caption of the picture, which is
always in the span right after the <img> tag
<input type="button" id="showPicture">
<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>
// jQuery code inside the document.ready() function
$("ậpicture").hide().next().hide();
$("ậshowPicture").click(function(){
$("ậpicture").show("fast", function(){
$("ậpicture").next().show();
});
});
// notice how it took more text to describe what you want to happen than it took
// to actually code it!
Mô-đun Hiệu ứng có các hàm khác rất giống hàm show() và hide(), và các hàm về sau thực hiện
các hoạt động tương tự, chúng thực hiện đúng các hoạt động theo một cách rất cụ thể. Cả hai hàm
slideDown() và slideUp() là các hàm để hiển thị và ẩn phần tử của trang. Tuy nhiên, chúng làm
được như vậy bằng cách làm động phần tử nhờ trượt nó xuống hoặc lên (bạn có thể gặp phải một
phương pháp tiếp cận rất khó đối với quy ước đặt tên!). Cũng giống như các hàm hide() và show()
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 3 của 13
developerWorks®
ibm.com/developerWorks/vn/
mà tôi vừa nói đến, bạn có thể điều khiển tốc độ của các hàm trượt, hàm này được gọi khi chúng
được hoàn tất. Ngoài ra, có một lựa chọn khác để hiển thị/ẩn các phần tử trang, và đó là hàm
fadeIn() và fadeOut() làm như tên gọi của chúng, sẽ làm mờ phần tử trang cho đến khi nó trở nên
trong suốt và sau đó biến mất. Các tùy chọn này cũng cho phép tùy chỉnh tốc độ và các hàm được
gọi khi hoàn tất.
Có một hàm thú vị, không hoàn toàn làm ẩn hoặc hiện một phần tử trang, đó là hàm fadeTo() cho
phép một phần tử trang trở nên trong suốt một phần. Tôi nghĩ rằng đây là một hàm rất quan trọng
trong RIA, bởi vì sự trong suốt là một cách tuyệt để nhấn mạnh một vài phần tử nhất định trên
trang, và có thể được sử dụng để hiển thị các khu vực bị vô hiệu hóa của trang. Ví dụ bạn có thể có
một vài thẻ trên trang, và tất cả các thẻ không được chọn phải là trong suốt để đảm bảo rằng chúng
không được chọn. Hoặc trên một trang mẫu, bạn có thể có tất cả các phần tử không cần làm rõ nét
phải được làm cho trong suốt để thông báo cho người sử dụng biết phần tử Form nào đang được
làm rõ nét. Tóm lại, làm cho các phần tử trở nên trong suốt là điều tuyệt vời. Bạn có thể tin vào câu
thần chú phổ biến sau: "Nếu Apple đã làm ra nó, thì chắc hẳn nó tuyệt vời" khi thiết kế bất cứ cái
gì.
Liệt kê 3. Sử dụng hàm fadeTo() để bổ sung những điều tuyệt vời
// make all the Form elements on the page show transparency at 60%, except
// the one that currently has focus, which will not have any transparancy.
// This is Apple cool!
$(":input").fadeTo("fast", .60);
$(":input").focus(function(){
$(this).fadeTo("fast", 1);
});
$(":input").blur(function(){
$(this).fadeTo("fast, .60);
});
Hàm cuối cùng tôi muốn đề cập trong mô-đun Hiệu ứng là hàm tuyệt với nhất và dễ gây lỗi nhất.
Đó là một phương thức hình động tùy chỉnh cho phép bạn định nghĩa tất cả các thông số trong hình
động và jQuery sẽ giải quyết phần còn lại. Bạn cung cấp một mảng các thông số với các giá trị cuối
cùng của chúng, và jQuery xác định giá trị hiện tại của chúng, và bằng cách sử dụng tốc độ hình
động đã được xác định mà bạn đã nhập vào, sẽ làm phần tử trang trở nên sống động cho đến khi
nó đạt đến các giá trị cuối cùng mà bạn cung cấp. Liệt kê 4 là một ví dụ về phương thức hình động
tùy chỉnh. Rõ ràng là có vô số khả năng về hàm này, vì vậy tôi khuyên bạn nên chỉ sử dụng chúng
nếu bạn cảm thấy bạn cần tạo hình động của riêng bạn.
Liệt kê 4. Phương thức hình động tuỳ chỉnh
// when the button is clicked, make the div with an ID of "movingDiv"
// have the custom animation provided.
$("ậmyButton").click(function(){
$("ậmovingDiv").animate({
// will increase the width, opacity, and fontSize of "movingDiv"
// and do it in 5 seconds
width: 700;
opacity: 0.5;
fontSize: "18px";
}, 5000);
});
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 4 của 13
ibm.com/developerWorks/vn/
developerWorks®
Ajax
Hiện nay có nhiều bàn cãi về các trang Web là "có sử dụng Ajax không?", nhưng liệu tất cả mọi
người có thực hiểu Ajax là gì? Nếu bạn gõ chữ "Ajax" trên trang tìm kiếm Google, thì hàng triệu kết
quả được trả về (như hầu hết các máy tìm kiếm), nhưng hình như có một số nhầm lẫn về những gì
mà thuật ngữ Ajax bao hàm một cách chính xác. Ajax không thực là hình động tuyệt vời trên trang,
hoặc là một cửa sổ bật ra với một hình bóng đẹp ở bên dưới. Chỉ vì Ajax là tuyệt vời, nó không có
nghĩa là mọi điều thú vị trên một trang web là Ajax. Điều cốt lõi là Ajax chỉ đơn giản là một cách để
một trang web phía khách truyền thông tin qua lại với máy chủ mà không cần tải lại trang. Vậy, khi
Ajax không thể cung cấp cho bạn các hiệu ứng tuyệt vời trên một trang, nó thực sự cung cấp các
phương tiện cho một ứng dụng Web để bắt chước các ứng dụng của máy tính để bàn. Vì vậy, các
bàn cãi xung quanh Ajax được biện hộ, việc sử dụng rộng rãi nó trực tiếp đảm bảo cho sự phát triển
nhanh chóng trong các RIA mà bạn đang thấy hôm nay.
jQuery khiến làm việc với Ajax trở nên vô cùng dễ dàng! Tôi cũng không phóng đại tuyên bố
này. Đối với bất cứ ai đã từng làm việc với Ajax mà không có thư viện JavaScript, cần làm
việc với XMLHttpRequests, cần làm với sự khác biệt giữa Microsoft® và phiên bản Firefox của
XMLHttpRequest, cần phân tích cú pháp thông qua các mã trả về, vv…, tôi có thể nói rằng jQuery
đã làm cho Ajax trở nên đơn giản như gọi hàm đơn. Nghiêm túc đấy! Điều gì đã biến thực hiện 100
dòng mã trước đây thành thực hiện với 3 hoặc 4 dòng mã bây giờ. Thật là tiết kiệm thời gian một
cách đáng kinh ngạc. Về cá nhân, tôi biết được điều này trước khi có jQuery, đâu đâu cũng nghĩ
rằng việc thêm các hàm của Ajax cần rất nhiều công việc. Bây giờ thì cực kỳ đơn giản, và đã làm
các ứng dụng của tôi có tất cả ưu điểm mà Ajax có thể cung cấp. Nếu nó đơn giản như việc gọi hàm
bình thường, thì tại sao bạn lại không muốn sử dụng nó ?
Hãy xem các hàm mà bạn sẽ nhiều khả năng sử dụng cho các nhu cầu về Ajax của riêng bạn: đó là
các phương thức post() và get(). Các hàm này hoạt động đúng như những gì mà bạn mong chờ
từ bất kỳ hàm jQuery nào vào thời điểm mà bạn đang đọc bài này, nó cho phép bạn định rõ URL
để gọi và các thông số để chuyển vào, và sau đó cho phép bạn xác định các hàm mà phương thức
Ajax trả về. Với ý nghĩa này, do cách mà hai phương thức này được thiết lập, chúng thực sự làm
cho việc gọi một phương thức Ajax trong jQuery hoàn toàn giống như gọi bất kỳ phương thức nào
khác trong jQuery. Ta hãy xem Liệt kê 5.
Liệt kê 5. Phương thức Ajax của post và get
// this code would be in a php file named myTest.php
// why did I switch to PHP for the Ajax examples? Java/JSP gets tough because
// you need to show the code in the Servlet, which isn't necessary with PHP. The
// functions work equally well in both PHP and Java/JSP though.
<?php
echo "This is my return String";
?>
// here's how simple the Ajax calls are in jQuery
// This is a post function
$.post("myTest.php", {}, function(data){
$("p").text(data);
});
$.get("myTest.php", {}, function(data){
$("p").text(data);
});
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 5 của 13
developerWorks®
ibm.com/developerWorks/vn/
Như bạn có thể thấy từ hai ví dụ này, các hàm này gần giống với các hàm jQuery khác, và dễ sử
dụng hơn là không có thư viện JavaScript. Có một số đối số mà bạn có thể sử dụng để mở rộng
chức năng của các lệnh gọi của Ajax. Đối số đầu tiên rõ ràng là URL để gọi. Đối số có thể là một
tệp PHP, một tệp JSP, một Servlet — về cơ bản là bất cứ thứ gì sẽ xử lý yêu cầu này. Thậm chí nó
không cần đáp ứng yêu cầu (như bạn sẽ thấy trong ví dụ ứng dụng ở phần sau). Đối số thứ hai, là
một đối số tùy chọn, là để chuyển dữ liệu với chức năng chuyển đi/nhận. Nó ở dưới hình thức là một
mảng. Thông thường, bạn sẽ chuyển vào các thông tin chứa trong các phần tử Form, userIDs từ
trang vv…. Bất cứ điều gì mà tệp máy chủ sẽ cần để xử lý yêu cầu. Đối số thứ ba, cũng là đối số tùy
chọn, là một hàm thực thi nếu hàm Ajax trả về thành công. Đối số này thường sẽ chứa mã để xử lý
các kết quả của bất kỳ thông tin quay lại từ máy chủ . Liệt kê 6 là một số ví dụ của ba đối số đầu
tiên, trước khi tôi nói về đối số thứ tư.
Liệt kê 6. Chuyển tin với các đối số tùy chọn
// place a username and password input field on the page
<input type=text id="username">
<input type=password id="pass">
// call a server-based PHP file that will process the information passed to it
$.post("myFormProcessor.php", {username: $("ậusername").val(),
password: $("ậpass").val()});
// conversely, this PHP file could also return information to the function, from which
// you could process the results
$.post("myFormProcessor.php", {username: $("ậusername").val(),
password: $("ậpass").val()},
function(data){
// the data variable contains the text returned from the server, you don't
// have to set anything up ahead of time, jQuery will do it all for you
if (data != "ERROR")
$("ậresponseDiv").text(data);
}
);
Bạn có thể nhanh chóng thấy rằng làm việc với Ajax trong jQuery là rất đơn giản và dễ. Tuy nhiên
các hàm có thể trở nên phức tạp hơn, khi bạn bắt đầu làm việc với các thông tin phức tạp hơn từ
máy chủ, thay vì các chuỗi văn bản đơn giản. Trong các trang web phức tạp hơn với nhiều cuộc
gọi liên quan đến Ajax, dữ liệu trả về có thể theo định dạng XML. Các dữ liệu trả về cũng có thể
ở dạng các đối tượng JSON (Về cơ bản JSON là một giao thức để xác định các đối tượng mã
JavaScript). jQuery cho phép đối số tùy chọn thứ tư cho các phương thức get/post, để bạn xác định
lúc và kiểu của giá trị mà bạn đang mong đợi từ máy chủ. Bạn có thể chuyển chuỗi "xml" cho chuỗi
XML, "html" cho chuỗi HTML (hoặc văn bản thuần túy), "script" cho mã JavaScript, hoặc "json"
cho các đối tượng JSON. Vậy, ví dụ nhờ định nghĩa đối tượng trả về là "json", jQuery sẽ tự động
chuyển đổi các chuỗi trả lời từ máy chủ vào đối tượng json, cho phép bạn tham chiếu nó ngay lập
tức.
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 6 của 13
ibm.com/developerWorks/vn/
developerWorks®
Liệt kê 7. Xác định kiểu trả về trong Ajax
// specify the return object to be a type JSON object, and process the
// return object as a JSON object, referencing fields in it without
// casting it to any object or evaluating it
$.post("myFormProcessor.php", {username: $("ậusername").val(),
password: $("ậpass").val()},
function(data){
// jQuery has already converted the data response into a JSON object, so
// you can immediately reference its fields, providing cleaner-looking code
// and allowing future changes, and in my opinion, making it easier to work
// with than XML responses
$("ậusername").text(data.username);
$("ậaddress").text(data.address);
$("ậphone").text(data.phone);
},
"json" // here you specify that the return type is JSON
);
Một hàm Ajax khác mà tôi muốn dành một chút thời gian để bàn đến là hàm load() cho phép
người dùng nạp một trang được chỉ định và nhận lại kết quả là HTML. Theo những lời mô tả đó,
bạn cảm thấy không thú vị mấy. Tuy nhiên, bạn cũng có khả năng phân tích cú pháp thông tin trả
về bằng cách sử dụng mã jQuery cũng giống như bạn phân tích cú pháp các web của riêng bạn khi
khởi động. Điều này có nghĩa là gì? Vâng, dựa trên khả năng tải bất kỳ trang Web nào, và sau đó
phân tích cú pháp trang web đó bằng jQuery, bạn sử dụng được các mẩu đã có của trang hữu hiệu
và rất dễ lập trình, từ đó bạn có thể thu thập bất kỳ kiểu thông tin từ bất kỳ trang nào. Ta hãy xem
liệt kê sau.
Liệt kê 8. Ví dụ về ứng dụng của hàm load().
// create a very primitive stock price quote by calling Yahoo's stock quote, and then
// scraping the information from their pages.
// in this case, look up IBM's stock price, and place it in the text field with an ID of
// "stockPrice"
// the span with the ID of "yfs_l90_ibm" contains the stock price
$("ậstockPrice").load("http://finance.yahoo.com/q?s=ibm ậyfs_l90_ibm").text();
Hai hàm mới nhất trong mô-đun Ajax mà tôi muốn chỉ ra thực sự là các hàm tiện ích hỗ trợ rất
nhiều khi làm việc với Ajax. Như tôi đã chỉ ra nhiều lần, nhiều tương tác giữa máy chủ và máy khách
xoay quanh mô-đun Form, và các phần tử của mô-đun đó. Bởi vì loại hình giao tiếp này rất thông
dụng, nên có hai hàm tiện ích trong jQuery để trợ giúp kiến thiết các tham số chuyển đến máy chủ,
hoặc trong các mẫu của một chuỗi truy vấn HTTP hoặc trong chuỗi json. Bạn có thể sử dụng cả hai
hàm tiện ích này để hỗ trợ các nhu cầu về Ajax của bạn. Chúng rất tiện dụng bởi vì cả hai hàm đó
đều có thể gói gọn toàn bộ một mẫu, dù có bao nhiêu phần tử được thêm vào/gỡ bỏ/thay đổi trong
quá trình phát triển. Liệt kê 9 là một ví dụ về điều này.
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 7 của 13
developerWorks®
ibm.com/developerWorks/vn/
Liệt kê 9. Các hàm serialize() và serializeArray()
// the serialize function will look at every Form element inside the specified element
// and automatically construct an HTTP String that contains all the information
// of the elements, in the form of <element name>=<element value>&
// for example, "firstname=Michael&lastname=Abernethy"
// this can then be attached to the URL to pass the information via an Ajax call
$.post("myFormProcessor.php?" + $("ậmyForm").serialize());
// further, a similar thing could be done with the serializeArray function
// which will convert a Form into its JSON equivalent
$.post("myFormProcessor.php", {json: $("ậmyForm").serializeArray()});
Kết hợp tất cả các bài học với nhau
Để kết hợp tất cả các bài học với nhau, bạn sẽ xem lại lần cuối ứng dụng Web trình diễn, ứng dụng
thư điện tử Web mà bạn đã trở nên quen thuộc trong một số bài học vừa qua. Tôi sẽ thêm nhiều
cuộc gọi Ajax từ máy khách sang máy chủ để thu thập thông tin. Tôi sẽ sử dụng Ajax để có thông
tin về tin nhắn khi bạn đọc một tin nhắn và cũng sử dụng các phương thức Ajax để cẩn thận xóa
tin nhắn. Sau đó, tôi sẽ kết hợp các thao tác này với một số hiệu ứng, để khi người dùng xóa một
tin nhắn, nó sẽ ngay lập tức loại bỏ các tin nhắn khỏi màn hình, ngay cả khi người dùng không tải
lại trang, và thao tác xóa thực diễn ra một cách không đồng bộ khi gọi Ajax. Khi kết thúc bài học
này, bạn sẽ thấy rằng cách dễ dàng sử dụng các thao tác gọi Ajax trong ứng dụng web của riêng
bạn, cách mà bạn có thể sử dụng chúng để thực sự bắt chước một ứng dụng của máy tính để bàn,
và cuối cùng cách để các hiệu ứng có thể được sử dụng để tăng cường khả năng sử dụng của ứng
dụng.
Liệt kê 10. Ứng dụng Web ví dụ - xóa các tin nhắn
// First, let's look at how you handle deleting a message.
// The first step is to create a button that will actually delete messages
<input type=button id="delete" value="Delete">
//
//
//
//
//
next, you'll add a checkbox in each row of the table, so that users can select
which messages they want to delete. You'll use these checkboxes later, and
the information contained in them is equally important (that's called
foreshadowing!)
Notice how the value of each checkbox is the message.id!
<tr class="messageRow" id="<%=message.id %>">
<input type=checkbox name="delId" value="<%=message.id%>" class=selectable>
// Now that the HTML is complete, look at the jQuery code to execute these deletes
// First, attach an event to the delete button, so when it's pressed, it will
// start deleting the checked messages
$("ậdelete").click(function() {
deleteMessages();
});
//
//
//
//
//
//
Finally, let's define the deleteMessage() function, because that contains the meat of
today's lessons.
Because this is the culmination of every lesson, let's look at everything I did to
get this working!
Note 1 - I loop through each of the checkboxes that are checked by passing in a very
specific search parameter, to find only the members of the "selectable" class that
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 8 của 13
ibm.com/developerWorks/vn/
//
//
//
//
//
//
//
//
//
//
developerWorks®
are checked.
Note 2 - because the value of the checkbox is the same as the ID of the table row in
which it is contained, you can use the Effects module to hide the entire table row,
by passing in the value of the checkbox, and getting the table row back, and then
hiding it.
Note 3 - I make an Ajax call to actually delete the message from the DB. I have
to pass the messageID to the server so that it knows which one to delete. That
information is contained in the checkboxes value, which I pass with the Ajax call.
Because I don't really care if it's successful or not, I ignore any reply from
the server.
function deleteMessages()
{
$(".selectable:checked").each(function() {
$("ậ"+$(this).val()).remove();
$.post("<%=HtmlServlet.DELETE_MESSAGES%>.do", {delId: $(this).val()});
});
}
Đối với ví dụ thứ hai, bạn hãy xem tôi đọc các tin nhắn như thế nào, ví dụ cho thấy cách Ajax cũng
có thể được sử dụng trong jQuery:
Liệt kê 11. Ứng dụng Web ví dụ - đọc các tin nhắn
// You've seen most of this code previously in the example from last article, so let's
// focus on the Ajax portion of the code.
// Note 1 - I make an Ajax call with all 4 arguments defined. I have to pass two
// variables to the server in order to read the message. The first is the message
// ID number, because I need to know which message I want to read. The second is
// the current view...for reasons I can't recall (not important really).
// Note 2 - The fourth argument into the Ajax function is "json", indicating that
// I expect a JSON object back from the Ajax call. jQuery will automatically
// convert the response String into a JSON object.
// Note 3 - Notice that I handle the JSON object directly, without using an
// eval() function, because jQuery has already created the object. I can
// reference its fields directly.
$(".messageRow").dblclick(function() {
if ($(this).hasClass("mail_unread"))
{
$(this).removeClass("mail_unread");
}
$.post("<%=HtmlServlet.READ_MESSAGE%>.do", {messageId: $(this).attr("id"),
view: "<%=view %>"},
function(data){
if (data != "ERROR")
{
// using JSON objects
$("ậsubject").val(data.subject);
$("ậmessage").val(data.message);
$("ậfrom").val(data.from);
}
}, "json");
$.blockUI(readMess, {width:'540px', height:'300px'});
});
Kết luận
Tầm quan trọng của thư viện JavaScript như jQuery sẽ tiếp tục phát triển vì các ứng dụng đang
chuyển từ máy tính để bàn sang trình duyệt. Các ứng dụng này sẽ tiếp tục càng ngày càng phức
tạp, làm nền tảng vững chắc thông qua trình duyệt như jQuery trở thành một điều cần thiết trong
bất kỳ dự án ứng dụng Web nào. JQuery bản thân nó đã bắt đầu vượt xa các thư viện khác của
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 9 của 13
developerWorks®
ibm.com/developerWorks/vn/
JavaScript và đang trở thành thư viện được lựa chọn của nhiều người phát triển do tính dễ sử dụng
và khả năng của để làm tất cả mọi thứ mà họ cần nó làm.
Trong bài thứ ba của loạt bài này, bạn đã học về hai mô-đun thực sự có thể tăng thêm sự phong
phú cho ứng dụng của bạn và khiến cho ứng dụng của bạn làm mờ đi ranh giới giữa một ứng dụng
máy tính để bàn và một ứng dụng Web. Phần bổ sung lớn nhất cho bài học này là mô-đun Ajax,
cho phép bạn đơn giản hóa rất nhiều việc sử dụng Ajax, bằng cách làm cho nó trở nên đơn giản và
dễ thực hiện như bất kỳ cuộc gọi phương thức jQuery nào khác. Thông qua một số ví dụ bạn cũng
đã thấy được sức mạnh của Ajax, và thấy rằng nó là một công cụ sử dụng tuyệt vời để tăng tính đáp
ứng của các ứng dụng mà không gặp các điều phiền toái khi tải lại trang hoặc bị chậm trễ. Bạn cũng
đã học về gói Effect, và thấy rằng, khi được sử dụng đúng cách, thì các hình động, việc ẩn/hiển thị
các phần tử trang là những sự hỗ trợ mạnh mẽ cho việc thiết kế giao diện người dùng đúng cách.
Khi được kết hợp sử dụng một cách có hiệu quả, thì Ajax và hiệu ứng có thể làm tăng thêm tính
động của một trang web rất nhiều.
Cuối cùng, bạn đã xem lại một ứng dụng Web mẫu, và thấy rằng với việc bổ sung các mô-đun Ajax,
bạn có thể đọc và xóa các tin nhắn mà không cần tải lại trang. Sau đó, bạn thấy rằng bạn có thể
xóa các tin nhắn trong ứng dụng Web, và với sự kết hợp giữa Ajax và Effects, bạn có thể loại bỏ các
tin nhắn từ trang của người dùng và cơ sở dữ liệu, tất cả mà không cần tải lại trang. Đối với người
dùng, việc xóa tin nhắn là một quy trình trong suốt, và về mặt lập trình bạn cũng có thể khiến nó
hoạt động theo cách đó.
Đây cũng là phần kết của các bài JQuery về các thư viện lõi có trong mọi phiên bản JQuery. Ba
bài này đã giới thiệu cho bạn tất cả các mô-đun có trong jQuery, và điều lý tưởng là đã cho thấy
bạn rằng làm việc với jQuery rất dễ dàng và đơn giản. Ngoài ra, bạn đã thấy rằng dù bạn đang làm
việc với ứng dụng Web nào, thì bạn cũng nên sử dụng jQuery cho bất kỳ kiểu RIA nào, vì nó cung
cấp nền tảng vững chắc cho tất cả các nhu cầu về JavaScript của bạn. Các bài trong loạt bài này
đưa bạn đi cùng jQuery đến điểm mà bạn nên cảm thấy vô cùng thoải mái sử dụng nó trong mã của
riêng bạn. Bài đầu tiên cho bạn thấy cách jQuery làm việc về mặt chức năng, và cách mà bạn có thể
sử dụng nó để tìm kiếm các phần tử trang, liên kết chúng lại với nhau và truy cập chúng giống như
truy cập bất kỳ đối tượng Array nào. Bài thứ hai giới thiệu bạn ba mô-đun cơ bản để cung cấp sự
phong phú cho trang web. Cuối cùng, bài này đã cung cấp những phần cuối cùng cho khung công
tác để tạo một ứng dụng web hoàn chỉnh và phức tạp.
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 10 của 13
ibm.com/developerWorks/vn/
developerWorks®
Các tải về
Mô tả
Tên
Kích thước
Zip file containing the sample application
jquery.zip
69KB
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 11 của 13
developerWorks®
ibm.com/developerWorks/vn/
Tài nguyên
• Tải về jQuery phiên bản 1.2.6 lược giản, đây là phiên bản ổn định mới nhất tại thời điểm của
bài viết này, và thả nó và trong mã của riêng bạn.
• Đọc trang API đầy đủ về jQuery để xem tất cả các hàm có sẵn trong thư viện.
• Bạn lo lắng về khả năng tương thích của jQuery qua trình duyệt? Hãy xem danh sách các hỗ
trợ qua trình duyệt tại đây.
• Xem các hiệu ứng cao cấp thực sự tuyệt vời mà bạn có thể tạo bằng jQuery.
• Tải về một nền tảng toàn diện và đầy đủ về CSS, JavaScript, và về bất kỳ ngôn ngữ web nào
khác tại trang W3Schools.
• Đọc tổng quan chung về jQuery trong bài giới thiệu "Đơn giản hóa sự phát triển Ajax với
jQuery ", (developerWorks, tháng 4/2007).
• Bài viết "Xem xét toàn bộ Ajax, phần 2: Tân trang các trang web hiện có với jQuery, Ajax, các
mẹo công cụ và ứng dụng lightbox" (Brian Dillard, developerWorks, tháng 5/2008) là một cái
bài nghiên cứu một số các trình cắm thêm sẵn có cho jQuery và nói về cách chúng mở rộng
tính hữu dụng của thư viện.
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 12 của 13
ibm.com/developerWorks/vn/
developerWorks®
Đôi nét về tác giả
Michael Abernethy
Trong 10 năm làm việc về công nghệ của mình, Michael Abernethy đã làm việc với rất
nhiều công nghệ và với rất nhiều khách hàng. Ông hiện đang làm việc trong vai trò
Giám đốc phát triển sản phẩm cho Optimal Auctions, một công ty phần mềm về bán
đấu giá. Hiện nay ông tập trung vào các ứng dụng RIA và làm cho chúng trở nên phức
tạp hơn và đơn giản hơn cùng một lúc. Khi ông không làm việc tại máy tính của mình,
bạn có thể tìm thấy ông trên bãi biển ở Mê-hi-cô với một cuốn sách hay.
© Copyright IBM Corporation 2010
(www.ibm.com/legal/copytrade.shtml)
Nhẫn hiệu đăng ký
(www.ibm.com/developerworks/vn/ibm/trademarks/)
Làm việc với jQuery, Phần 3: Các ứng dụng của Rich Internet với
jQuery và Ajax: JQuery: Xây dựng các ứng dụng Web của tương
lai ngay bây giờ
Trang 13 của 13