Javascript синхронный и асинхронный запрос

Материал из support.qbpro.ru
Версия для печати больше не поддерживается и может содержать ошибки обработки. Обновите закладки браузера и используйте вместо этого функцию печати браузера по умолчанию.
Синхронный запрос: работа со станицей не возможна до завершения запроса AJAX, при этом 
запрос, получение ответа и его обработка производится в одной функции JavaScript

Асинхронный запрос: делайте что хотите во время запроса, но когда придет ответ на AJAX запрос 
JavaScript должен его обработать использую CallBack функцию

Синхронный запрос - это запрос с ожиданием ответа. Т.е. скрипт создал объект, а объект послал запрос на сервер, это сразу, мгновенно не происходит. И пока этот запрос обрабатывается на сервере скрипт "висит", скрипт просто "висит", он ждет ответ с сервера. Дальше скрипт не выполняется, браузер ничего не делает, он ждет ответ с сервера. Если сервер работает долго или связь с сервером медленная, то это "зависание" может быть даже заметно на глаз. И только тогда, когда сервер все наконец-то пришлет, только тогда скрипт пойдет выполняться дальше. Т.е. скрипт в момент обмена данными с сервером он "висит".

Пример выполнения синхронного запроса: Код Javascript(jQuery)

   var request = getXmlHttpRequest(); // создание объекта XmlHttpRequest
   request.open('GET', url, false); // готовим сам запрос
   request.open(метод запроса, url запроса, состояние запроса);
       метод запроса может быть GET или POST - это просто строка
       url запроса - т.е. по какому адресу произвести запрос
       состояние запроса - если запрос синхронный, то он в состоянии false, если асинхронный, то он в состоянии true
   request.send(null); // посылаем запрос методом send. Т.к. при отправке запроса методом GET содержимого нет, то в этом
                       // методе мы указываем null. Если отправлять запрос на сервер методом POST, то в send 
                       // мы будем указывать то, что надо отправить.

Асинхронный запрос - это запрос без ожидания ответа от сервера. Т.е. скрипт создал объект, а объект послал запрос на сервер. При этом скрипт продолжает выполняться дальше и не ждет ответа от сервера. В какой-то момент данные вернуться. И тут вступает в действие событие onreadystatechenge. Сам объект меняет это событие, когда у него меняется свойство readyState. Для события создается собственная функция, в которой проверяется свойство readyState. И как только оно становится равным "4" - это значит, что данные с сервера пришли. Теперь можно полученные данные обрабатывать. При асинхронном запросе скрипт посылает данные на сервер и паралельно с этим объект возбуждает свойство onreadystatechenge и выполняет проверку свойства readyState.

Пример выполнения асинхронного запроса: Код Javascript(jQuery)

   var request = getXmlHttpRequest(); // создание объекта XmlHttpRequest
   request.onreadystatechenge = function(){ // установка обработчика
       if(request.readyState == 4)
       ...
   }
   request.open('GET', url, true); // готовим сам запрос
   request.send(null); // посылаем запрос методом send

Асинхронный запрос сложнее синхронного запроса в том, что надо сначала подготовить сам запрос, а потом ловить момент, когда данные придут с сервера. Но при этом асинхронный запрос намного удобнее для пользователя и не тормозят работу браузера.