Showing progress

Khi thực hiện AJAX request, bạn có thể muốn chỉ ra progress trong khi đợi yêu cầu kết thúc, đặc biệt khi nó mất chút thời gian. Rất đơn giản để làm với jQuery như trong ví dụ sau:

<input type="button" name="btnDoRequest" value="Perform calculation" onclick="PerformCalculation(this);" />
<script type="text/javascript">
function PerformCalculation(sender)
{
    $(sender).val("Working - please wait...");
    $.get("/tests/calc.php", function(data, textStatus)
    {
        $(sender).val("Perform calculation");
        alert(data);
    });
}
</script>

Ngay trước khi thực hiện AJAX request, chúng ta thay đổi chữ của đối tượng sender (ở đây là nút gọi hàm). Ngay khi thành công thì chúng ta đặt nó trở lại như cũ. Một cách khác là hiển thị một phần chữ một nơi nào đó trong trang nhưng cách thông dụng nhất là hiển thị phần đồ họa mô tả trình duyệt đang hoạt động. Bạn có thể tự làm hoặc thậm chí tốt hơn: ví dụ có thể lấy tại đây http://ajaxload.info/

<input type="button" name="btnDoRequest" value="Perform calculation" onclick="PerformCalculationWithImageProgress();" />
<img src="/images/ajax-loader.gif" style="display: none;" id="imgProgress" />
<script type="text/javascript">
function PerformCalculationWithImageProgress()
{
    $("#imgProgress").show();
    $.get("/tests/calc.php", function(data, textStatus)
    {
        $("#imgProgress").hide();
        alert(data);
    });
}
</script>

Quá trình tương tự nhưng thay vì hiển thị chữ thì ta hiển thị một hình ảnh. Bạn có thể đặt hình ảnh tại một điểm mà người dùng có thể nhìn dễ dàng hay đặt hình ảnh động cạnh nút/đường dẫn mà họ bấm vào.

Có một vấn đề với ví dụ trên: nếu yêu cầu không được thực hiện vì một vài lý do thì quá trình được hiển thị nhưng không thể kết thúc. Chúng ta có thể sửa bằng cách dùng fail và ta cũng có thể hiển thị thông báo lỗi.

<input type="button" name="btnDoRequest" value="Perform calculation" onclick="PerformCalculationWithErrorHandling(this);" />  
<script type="text/javascript">  
function PerformCalculationWithErrorHandling(sender)  
{  
    $(sender).val("Working - please wait...");  
    $.get("/tests/non-existing.php", function(data, textStatus)  
    {  
        $(sender).val("Perform calculation");  
        alert(data);  
    }).fail(function()  
    {  
        $(sender).val("Try again");  
        alert("An error occurred.")  
    });  
}  
</script>

It's pretty much identical to the first example, but here we call the fail function on the returned AJAX object and pass in a callback function which should be called if the request fails, which it will in this example, since I have changed the path for the requested file to something which doesn't exist.