Ma thuật với jQuery Deferred

Những ai đã từng làm việc với jQuery đặc biệt là với các hiệu ứng Animation hoặc Ajax với tính năng callback. Chắc hẳn bạn cũng đã từng điên cái đầu với những hiệu ứng kết hợp phức tạp, nối tiếp nhau… Nó làm cho mã nguồn trở nên rối như tơ vò. Mức độ phức tạp ngày một tăng khi bạn phải callback nhiều tầng nhiều lớp.

Ví dụ đơn giản là bạn muốn thực hiện 3 ajax call kế tiếp nhau, sử dụng kết quả của nhau. Bạn làm thế nào

$.ajax({…

success : function(){

$.ajax({…

success: function(){

$.ajax({…

success : function(){}

}

}

}

});

Bức tranh tương tự với các hiệu ứng animation của  jQuery.

Rất nhiều dư thừa trong đó. Và đặc biệt là rất khó phát triển, thay đổi … theo chiều sâu tính bằng số lượng của các ajax call bạn cần giải quyết.

Nhưng jQuery đã nhận ra điều đó và giải quyết nó từ jQuery 1.5

Với $.Deffered, bạn không phải lo lắng về những điều đó nữa.

function callAjax1(){

$.ajax({..});

}

function callAjax2(){

$.ajax({..});

}

function callAjax3(){

$.ajax({..});

}

$.when(callAjax1).then(callAjax2).then(callAjax3)

Bạn cũng có thể tự tạo defered cho các hiệu ứng như:

function getData(){

return $.get(‘/foo/’);

}

function showDiv(){

var dfd = $.Deferred();

$(‘#foo’).fadeIn( 1000, dfd.resolve );

return dfd.promise();

}

$.when( getData(), showDiv() )

.then(function( ajaxResult ){

console.log(‘The animation + AJAX request are both done!’);           // ‘ajaxResult’ is the server’s response

});

Có lẽ không cần phải nói thêm về tính hữu ích của nó. Tất cả đều có thể xem ở website của jQuery.

JSON là gì?

1. Tên gọi

Viết tắt của JavaScript Object Notation (dịch sơ sơ là đối tượng JavaScript). Thực ra chỉ là dịch chơi, còn không cứ gọi là JSON.

Xem thêm ở đây http://www.json.org/

2. Nó là gì?

Nó 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 thành chuỗi JSON chính là cách biểu diễn một đối tượng trong các Scripting Language này.

3. Lợi ích của JSON

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.

Ví dụ:

Bạn có một dữ liệu XML:

<data>
<x>2</x>
<y>3</y>
</data>

Sử dụng JavaScript để đọc dữ liệu này, bạn phải qua một bước phân tích, đưa văn bản XML thành một đối tượng dữ liệu và đọc dữ liệu theo nodes. Giả sử object của bạn là xmlObj, bạn muốn lấy dữ liệu x và y bạn sẽ gọi:

var x = xmlObj.childNodes[0].text;
var y = xmlObj.childNodes[1].text;

Trong trường hợp tương tự, bạn có một dữ liệu JSON:

var jsonStr = '{ data : { x : 2 , y : 3}}';

Sử dụng JavaScript bạn chỉ cần gọi:

eval( 'var jsonObj = ' + jsonStr + ';');
var x = jsonObj.x;
var y = jsonObj.y;

JSON là một chuẩn cực kỳ quan trọng trong lập trình web ở phía client.

Đố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 là sử  dụng XML.

4. Nên sử dụng JSON trong những tình huống nào

1. Lưu trữ dữ liệu đơn thuần. Đó là khi bạn muốn lưu trữ dữ liệu dưới dạng metadata ở phía server. Chuỗi JSON sẽ được lưu vào database và sau đó khi cần dữ liệu thì sẽ được giải mã. Ví dụ với PHP, cung cấp các hàm liên quan đến JSON để mã và giải mã là json_encode và json_decode.
• Chú ý: phương pháp này cũng tương tự như sử dụng tính năng serialize và unserialize của PHP. Nhưng trong khi serialize và unserialize sử dụng với cả dữ liệu và biến, tức là phụ thuộc vào ngôn ngữ lập trình là PHP và dĩ nhiên không thể transfer sang ngôn ngữ lập trình khác để unserialize được. Vì vậy, nếu dữ liệu của bạn chỉ đơn thuần là dữ liệu cơ bản (chuỗi kí tự, số…) thì bạn hoàn toàn không nên sử dụng serialize mà nên sử dụng JSON.
2. Sử dụng JavaScript, ActionScript để xử lý thông tin trả về từ phía server. Rất nhanh và rất dễ dàng.

Ads:

http://www.youbrainy.com cùng xem một dự án phát triển như thế nào với một team cỡ nhỏ!

jQuery submit form với jQuery ajaxSubmit

<script type=”text/javascript”>
         $(‘#ratingForm’).submit(function() {
               $(this).ajaxSubmit();
                       return false;
                });
   </script>

Getting start with jQuery – bắt đầu với jQuery

Ai thích đọc thì đọc, chứ em học được từ nguồn này nè, đó là một slide rất hay về jQuery

http://www.slideshare.net/manugoel2003/extending-jquery?src=related_normal&rel=282750 (nguồn)

Trong lời giới thiệu về jQuery trên http://jquery.com bạn có thể thấy ngay dòng chữ  jQuery is designed to change the way that you write JavaScript. jQuery, ra đời với mục đích chuẩn hóa cách viết javascript của người phát triển. Quan trọng hơn cả đó là jQuery tương thích với tất cả các trình duyệt được sử dụng phổ biến.

Với những người đã có kinh nghiệm với DOM (mà không sử dụng jQuery), thì document.getElementById(‘SomeID’), document.getElementsByTagName(‘TagName’) có lẽ là những phát biểu nhỏ mà chẳng nhẹ. Tức là, chúng cơ bản với DOM cũng như kiểu integer trong ngôn ngữ Pascal vậy, chẳng có ứng dụng nào mà không sử dụng. Với jQuery, câu lệnh xác định các đối tượng kiểu như trên chuyển về dạng sau:

$(‘#SomeID’) ;

$(document).find(‘TagName’) ;

Nhưng jQuery, chắc chắn không chỉ là giản đơn như vậy…

To be continue…

Trên đây, ta đã thấy một chút gì đó khác biệt của cách script jQuery so với viết script js. Với những người thường xuyên sử dụng DOM, viết theo cách js có lẽ là một việc nhàm chán lắm (kinh nghiệm của tôi là như vậy), hết document nọ lại document kia, rồi fix các bug interval… loạn xạ ngầu… với cách viết script js thông thường, để làm được một slider “đèm đẹp” một chút quả thực là tốn kém (thời gian, suy nghĩ). Cũng trong khi đó, nếu sử dụng jQuery, các kịch bản cơ bản (trước hết là cơ bản cái đã) được thực hiện một cách nhẹ nhàng, rất nhẹ nhàng.

Hãy bắt đầu xem, có thể làm được gì với jQuery, hãy bắt đầu. Hãy thử tiếp cận jQuery theo cách này

Đơn giản, tôi muốn ẩn đối tượng có id là main_img thì phải làm thế nào…

…quá đơn giản

$(“#main_img”).fadeOut();// main_img có thể là một div, hay một a, hay một tag HTML bất kì, tất cả đều sẽ mờ dần và mất hẳn

$(“#main_img”).hide();// main_img của bạn tịt luôn (mất dạng luôn)

$(“#main_img”).hide(‘slow’);//main_img của bạn “khuất” dần dần một cách từ từ (chú ý khuất có khác với mờ một chút, nhưng kết quả cuối cùng thì như nhau cả thôi)

…..

và hãy cùng tìm hiểu thêm về jQuery

JQuery, tại sao lại gọi là jQuery ? (từ query trong tiếng anh có nghĩa là “truy vấn” hoặc yêu cầu đòi hỏi), vậy jQuery truy vấn cái gì ???

Chính là việc jQuery truy vấn các đối tượng nằm trong document HTML!!! Theo cách viết DOM là document.getElementById đó thôi

Vậy jQuery hơn hẳn ở điểm nào, đó chính là ở chỗ jQuery có thể “truy vấn” từng phần của văn bản, với sự hơn hẳn trong cách viết mã, thêm vào đó là các cách “truy vấn” phức tạp ngoài tầm … tưởng tượng của người chỉ viết DOM.

$(document).ready(function(){

//truy vấn lấy tất cả các thẻ <p>

$(“p”);

//truy vấnlấy tất cả các thẻ có id là some_id

$(“#some_id”);

//truy vấn lấy tất cả các thẻ có class là .some_class

$(“.some_class”);

//truy vấn lấy tất cả các thẻ <li> nằm trong thẻ <ul> có id là some_ul

$(“#some_ul > li”);

//truy vấn lấy các thẻ a có thuộc tính title

$(“a[@title]“);

//truy vấn lấy các phần tử a có thuộc tính href bắt đầu bằng mailto:

$(“a[@href^=mailto:]“);

//truy vấn lấy các phần tử a có tận cùng là .pdf

$(“a[@href$=.pdf]“);

//truy vấn lấy các phần tử a có liên quan đến samplesite.com

$(“a[@href*=samplesite.com]“);

//truy vấn tất cả các thẻ div có chứa phần tử  ol

$(“div[ol]“);

//truy vấn lấy phần tử div thứ 2 có thuộc tính class là testclass

$(“div.testclass:eq(0)”);

//hoặc theo cách

$(“div.testclass:nth-child(1)”);

//truy vấn các phần tử tr chẵn hoặc lẻ trong table

$(“tr:odd”); // hoặc $(“tr”).filter(“:odd”);

$(“tr:even”); // hoặc $(“tr”).filter(“:even”);

//truy vấn phần tử tr chẵn hoặc lẻ mà không tính phần tử th

$(“tr:not([th]):even”);

//truy vấn theo nội dung của innerHTML trong thẻ (ví dụ lấy các thẻ div có chứa nội dung datgs

$(‘div:contains(“datgs”)’);

});

Và jQuery còn hỗ trợ rất nhiều các phương án truy vấn đối tượng khác nữa…

…

jQuery events in use

Click Event

$("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });