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.

PHP, phân biệt Request và HttpObjectRequest

Đôi khi bạn cần phân biệt một Request bình thường của Browser và một Ajax Request. Với PHP rất đơn giản như sau:

$_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’

Rất đơn giản.

jQuery submit form với jQuery ajaxSubmit

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