Đỗ Nam Khánh weblog

Đã bao giờ bạn sử dụng AJAX (jQuery) để check username tồn tại như sau chưa?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function checkUser(u) {
    var isExist = false;
    $.post(
        'index.php',
        {'username': u},
        function(ret) {
            isExist = ret;
        }
    );
 
    return isExist;
}
 
if( checkUser('donamkhanh') ) {
    alert('donamkhanh already exist');
}
else {
    alert('donamkhanh does not exist');
}

Theo bạn, nếu chạy đoạn mã trên thì sẽ ra kết quả nào (giả sử rằng server script hoàn toàn chạy chính xác, trả về giá trị true/false hay 1/0 gì đó & username donamkhanh đã tồn tại)?

Do mặc định trong jQuery tất cả các request đều được sent asynchronous nên trong quá trình send request thì hàm checkUser đã return luôn giá trị lúc khởi tạo biến isExist = 0 rồi. Vậy nên kết quả luôn thông báo là username donamkhanh chưa tồn tại

Cách fix rất đơn giản, sử dụng thuộc tính async của $.ajax. Các hàm $.post hay $.get không có thuộc tính này vì

This is jQuery’s low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don’t offer as much functionality (such as error callbacks).

Code ở trên sẽ sửa lại như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function checkUser(u) {
    var isExist = false;
    $.ajax({
        async: false,
        type: "POST",
	url: "ajax.php",
	data: "username=" + u,
	success: function(msg){
	     isExist = msg;
	}
    });
 
    return isExist;
}

Nếu set async = false, jQuery sẽ sử dụng synchronous cho các request. Ở ví dụ này bạn có thể thấy nó chưa thực sự cần thiết (vì có thể nhét đoạn check vào luôn trong callback function của $.post, $.get hay bất cứ ajax method nào của jQuery), tuy nhiên nếu bạn phải viết nhiều hàm (ajax) và các hàm này lấy kết quả của nhau để tính toán thì việc set synchronous là bắt buộc. Nếu không thì sẽ xảy ra tình trạng nhiều biến nhiều hàm lon ton cầm đèn dầu chạy trước ô tô ^^