AJAX технология

Асинхронный обмен данными

AJAX технология

AJAX (Asynchronous javascript And Xml) - технология, которая позволяет обмениваться данными с сервером без перезагрузки страниц. Если при обычной отправке запроса, страница перезагружается, чтобы обработать пользовательские данные, то применяя данную технологию, запрос будет обрабатываться в асинхронном режиме. Во всех своих проектах я постоянно использую эту технологию, уже можно сказать - по умолчанию. Согласитесь, что это гораздо удобнее и полезнее как для пользователя, так и для сервера. В данном случае экономится трафик, уменьшается время отклика. Ваши сайты и приложения становится по-настоящему интерактивными, быстрыми и удобными.


Давайте рассмотрим пример функции отправки сообщения пользователю без перезагрузки страницы:

1) Используем обычный JS:

function send_letter( ) {  //Создаём функцию с именем 'send_letter' 
 
   var form = document.forms.form_letter; //Получаем форму с названием 'form_letter' 
   var formData = new FormData(form); //Создаём набор пар ключ/значение из данных формы 'form_letter' 
   var xhr = getXmlHttp(); //Используем специальный объект 'XMLHttpRequest' для простой передачи данных через HTTP. Функция его создания представлена ниже. 
             
   xhr.open("POST", "/post_letter/"); //Инициализируем POST-запрос на URL '/post_letter/' 
   xhr.onreadystatechange = function() {//Проверяем ответ сервера на наш запрос 
             
      if (this.readyState != 4) { //Если запрос не удался, то выдаём ошибку 
         alert('Сервер недоступен'); 
      } 
      if (this.status != 200) { //Если код ответа сервера не 200(не успешный), то это ошибка 
         alert('Ошибка запроса'); 
      }        
      var success = JSON.parse(xhr.responseText); //Используем JSON для разбора xhr.responseText            
      if ( success.error == 0 ) { //Если нет ошибок при проверке данных из формы, то сообщаем, что письмо успешно отправлено 
         alert('Ваше письмо отправлено'); 
      } else { //Иначе - выводим ошибку 
         alert(success.error); 
      } 
   } 
   xhr.send(formData); //Отсылаем запрос 
} 

В зависимости от браузера, код для создания объекта 'XMLHttpRequest' может быть разный.

Пример кроссбраузерной функции создания XMLHttpRequest

function getXmlHttp(){ 
  var xmlhttp; 
  try { 
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  } catch (e) { 
    try { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch (E) { 
      xmlhttp = false; 
    } 
  } 
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
    xmlhttp = new XMLHttpRequest(); 
  } 
  return xmlhttp; 
}

Таким образом, был представлен один из вариантов листинга кода, он может быть короче и проще, если подключить библиотеку jQuery.


2) Используем js-библиотеку jQuery:

function send_letter( ) { // Создаём функцию с именем 'send_letter' 
   var form = document.forms.form_letter; // Получаем форму с названием 'form_letter' 
   var formData = new FormData(form); // Создаём набор пар ключ/значение из данных формы 'form_letter' 
 
   $.ajax({ // Дальше в дело идёт функция jQuery.ajax() 
      url: "/post_letter/", // Говорим функции, что запрос будем отправлять на URL '/post_letter/' 
      data: formData, // Данные, которые будут отправлены на сервер 
      cache: false, // Не кэшировать запрос 
      processdata: false, // Отключаем опцию processData 
      contentType: false, // contentType нам не нужен 
      method: 'POST', // Выбираем метод POST 
      type: 'POST', // Выбираем тип POST 
      success: function(data) { // В случае удачного завершения запроса 
         var response = jQuery.parseJSON(data); // Разбираем полученные данные 
         if ( response.error == 0 ) { //Если нет ошибок при проверке данных из формы, то сообщаем, что письмо успешно отправлено 
            alert('Ваше письмо отправлено'); 
         } else {  //Иначе - выводим ошибку 
            alert(response.error); 
         } 
      } 
   }); 
}


В данных примерах я использовал объект formData, формат обмена данными JSON и библиотеку jQuery. О них мы поговорим с Вами с следующих статьях.

Просмотров

52 просмотра

Подписывайтесь
Дата

12 декабря 2017