Đồng bộ và bất đồng bộ trong ajax

Bài đăng này đã không được cập nhật trong 7 năm

$.ajax({
            url: 'link.php',
            type: 'POST/GET',
            data:"....",
            dataType: 'json',
            async: false/true,
            success: function(response) {
                            ..................
            }
});

Đồng bộ và bất đồng bộ nằm ở khái niệm async async: true là bất đồng bộ (không đồng bộ), các hàm xữ lí sẽ không đợi nhau

ví dụ minh có file xuli.php

<?php
       $temp=$_POST["temp"];
       echo $temp+1;
?>

và file html có chứa ajax

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            $(document).ready(function() {
                $("#ok").click(function(){
                  a = 5; //hành dong 1
                 $.ajax({ //hành dong 2
                            url: 'link.php',
                            type: 'POST',
                            data: "temp="+a,
                            async: true, //không đợi 
                            success: function(kq) { // xử lí và gán lại kết quả
                                           a = kq;
                            }
                    });
                alert(a); //hanh dong 3
                });
            });
        </script>
    </head>
    <body>
    <button id="ok">xu li</button>
    </body>
</html>

khi mình bấm ok hành động 1 chạy với giá trị a = 5 sau đó khi chạy hành động 2 ta có async: true tức là không đợi việc xử lí và gán lại kết quả mà sẽ chạy luôn hành động 3 ->vì vậy thì màn hình sẽ alert ra số 5 như giá trị a ban đầu đã gán

Nhưng nếu ta sửa lại là async: false thì khi ta nhấp nút ok thì nó sẽ chạy hành động 2 là truyền biến a sang file xuli.php và cộng lên 1 với hàm ta đã viết như vậy là a + 1 kết quả là 6 trả về lại cho ajax rồi khi chạy hành động động 3 nó sẽ alert ra số 6

async: false là đồng bộ tức là các hành động sẽ chạy đồng bộ, các hành động sẽ chạy đợi nhau và sẽ đưa ra kết quả khi đã chạy qua tất cả các hàm

Các bạn nhớ lưu ý khi gữi việc sử dụng async: true hay async: false khi có thêm hành động 3

Mục lục