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

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.

Michael Abernethy, Giám đốc phát triển sản phẩm, EMC

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.



20 11 2010

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 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()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.

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()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()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()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()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()show() 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()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);
   });

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()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);
   });

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.

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.

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
// 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 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.


Tải về

Mô tảTênKích thước
Zip file containing the sample applicationjquery.zip69KB

Tài nguyên

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=580305
ArticleTitle=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ờ
publish-date=11202010