It's me ;-)

Use synchronous request in jQuery.ajax

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

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:

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ô ^^

5 thoughts on “Use synchronous request in jQuery.ajax

  1. Chào Khánh,
    Tớ đang làm cái trang web, có sử dụng tí ajax (ra vẻ pro :D) nhưng vấn đề là mấy hàm $.post hay #.ajax nó lộ hết các tham số truyền cho trang xử lý. Như thế thì dễ bị chơi đểu (ví dụ như dùng curl để post thông tin). Có cách nào để giải quyết không? Tớ đi kiếm tool để nén Javascript lại nhưng chưa thỏa mãn
    – Dùng thằng này: http://code.google.com/closure/compiler/ chưa thỏa mãn, tương tự với YUI Compressor….
    – Còn thằng này: http://www.javascript-source.com/ khá tốt nhưng lại làm bể tiếng Nhật.

    Quan trọng ở chỗ Tiếng Nhật ấy, pro chỉ giúp nhé 😀

  2. Mình cũng chưa dùng mấy cái Javascript Obfuscator này, nhưng vừa thấy ông anh bảo Javascript Obfuscator version 4 chạy ngon với tiếng Nhật, bạn thử tìm download or mua xem sao.

    Còn về vụ parameter thì tớ nghĩ ở bên server script mình chặn tất cả các request không phải từ server của mình + chỉ chấp nhận Ajax request + sử dụng thêm HMAC (http://en.wikipedia.org/wiki/HMAC) cho tham số truyền đi thì cũng giới hạn được phần nào các tay mơ rồi 🙂

  3. – Tớ download bản Javascript Obfuscator v4.3, chạy thì bể tiếng Nhật. Bạn hỏi ông anh dễ thương kia sử dụng như thế nào với tiếng Nhật được không?
    – Mới làm web nên mơ màng cái “chặn tất cả các request không phải từ server của mình + chỉ chấp nhận Ajax request” và “HMAC”. Mong chỉ thêm 😀

  4. – Sorry bạn về vụ soft obfuscator ở trên. Tớ check lại với anh ấy thì đúng là bản 4 vẫn chưa fix được lỗi với tiếng Nhật :”> Anh ấy bảo đang tìm cách có gì sẽ hú sau 🙂

    – Bạn có thể tham khảo bài viết này để biết cách nhận biết Ajax request (PHP) http://stackoverflow.com/questions/1953954/detecting-ajax-in-php-and-making-sure-request-was-from-my-own-website. Sau đó kiếm thêm cái thư viện về HMAC gắn vào website là xong, 1 dạng mã hóa với public key í mà.

    Trong PHP thì có:
    + $_SERVER[‘HTTP_REFERER’]: url referer từ domain nào sao domain của mình
    + $_SERVER[‘HTTP_HOST’]: host name của mình
    + $_SERVER[‘HTTP_X_REQUESTED_WITH’]: ajax request method (XML or JSON)

  5. – Tiếc thật, tool đó khá hay :p
    – OK, sẽ làm cho đường tới thiên đường thêm chông gai 😀

Leave a Reply

Your email address will not be published. Required fields are marked *