jQuery и AJAX — мощная сила

С развитием веба появляются новые технологии, объединяются с другими, позволяют делать привычные вещи эффективнее, проще. Совместное испольхование jQuery и AJAX тому подтверждение. В этой статье мы поговорим о совместном использовании этих двух неотъемлемых составляющих современного веба.

Что такое AJAX?

С момента своего «рождения» в 2005 году AJAX (Asynchronous JavaScript and XML — асинхронный JavaScript и XML) значительно изменил веб. Он позволил разрабатывать сайты с отправкой запросов на сервер без перезагрузки страницы. Эта возможность теперь является жизненно важной для многих веб-приложений.
Предположим, что у нас есть форма входа на сайте. Чтобы войти в свой аккаунт пользователь должен указать логин и пароль. Если мы не используем AJAX, по нажатию кнопки отправить страница перезагрузится полностью и, если данные, введенные пользователем неверны, будет показано соответствующее сообщение, иначе будет показано приветствие. Но это уже устаревший подход.
Удобнее для пользователя будет не перезагружать всю страницу целиком, а с помощью AJAX запроса проверить, корректно ли введены данные.
Вот как должно быть: пользователь вводит свой логин и пароль и нажимает кнопку Войти, которая не перезагружает страницу, а вызывает JavaScript функцию, которая отправляет AJAX запрос на сервер с двумя параметрами — логином и паролем.
Веб сервер обрабатывает этот запрос, делает запрос к базе данных и проверяет соответствие введенных данных уже находящимся в ней.
Если соответствие найдено, веб сервер возвращает информацию об успешном входе, иначе — информацию об ошибке.
После этого JavaScript функция обрабатывает ответ от сервера и если авторизация прошла успешно — отправляет пользователя в его профиль, иначе выводит сообщение о некорректных данных не перезагружая страницы.
Такой подход сэкономит трафик и время.

Что такое jQuery?

jQuery был выпущен в январе 2006 года. Это кроссбраузерная JavaScript библиотека (фремворк), разработанный для упрощения работы с HTML на стороне клиента. В настоящее время используется миллионами веб сайтов, являясь самой популярной JavaScript библиотекой.
jQuery упрощает работу с DOM, событиями, эффектами и.. AJAX. Также библиотека имеет множество самых разнообразных плагинов.

Проблема с AJAX

AJAX может быть сложен в использовании даже для разработчиков со стажем. Обычно те, кто с ним работают, пишут свои собственные функции, позволяющие сделать применение AJAX проще и без дублирования кода. Ко всему прочему бывают проблемы с разными режимами вызовов — например, синхронные запросы и асинхронные, данные могут обрабатываться в разных форматах — HTML, CSV, XML, JSON, просто строка.

Один из вариантов функции работы с AJAX выглядит следующим образом:

function httpRequest(id) {
  if (window.XMLHttpRequest) { // для IE7+, FF, Chrome, Opera, Safari
    http=new XMLHttpRequest();
  }
  else { // а это для IE6, IE5
    http=new ActiveXObject("Microsoft.XMLHTTP”);
  }
  http.onreadystatechange=function() {
    if (http.readyState==4 && http.status==200) {
      response = http.responseText;
      // тут что-нибудь делаем с полученным ответом
    }
  }
 // отправляем запрос
  dest="ajax.php?id=" + id;
  http.open("GET", dest);
  http.send();
}

Если веб приложение использует однотипные или вовсе один AJAX запрос, проблем не возникает. Они появляются когда много разнородных запросов.
Идея AJAX состоит в отправке запроса к веб серверу, ожидании ответа и обновлении HTML кода страницы. Это можно использовать для создания более менее универсальной функции httpRequest() с двумя параметрами — адресом запроса и функцией, обрабатывающей этот запрос.

Использование AJAX в jQuery

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

$.ajax({
  type: "POST",
  url: "ajax.php",
  data: "login=user&password=123456",
  success: function(data){
    alert( "Такой логин и пароль " + data ); // в data - "существуют" или "не существуют"
  }
});

Если Вы до сих пор используете в своих приложениях чистый AJAX, рекомендую Вам более пристально посмотреть в сторону jQuery. Он действительно облегчает работу.

Запись опубликована в рубрике JS & jQuery. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">