<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Проверка занятости логина на Ajax

Проверка занятости логина на Ajax

Уже достаточно давно стала очень популярна технология Ajax, позволяющая общаться с сервером без перезагрузки страницы. И одним из примеров её использования является динамическая проверка занятости логина на Ajax, о которой я и напишу в этой статье.

Сразу перейдём к выводу формы:

<form name="my_form" method="post" action="#">
  <p>
    Логин: <input type="text" name="login" onblur="checkLogin(this.value)" /><span id="check_login"></span>
  </p>
  <p>
    <input type="submit" name="check" value="Отправить" />
  </p>
</form>

При потере фокуса с поля, отвечающего за логин, сразу вызывается функция checkLogin(), куда так же передаётся сам логин. Теперь разберём код JavaScript:

<form name="my_form" method="post" action="#">
  <p>
    Логин: <input type="text" name="login" onblur="checkLogin(this.value)" /><span id="check_login"></span>
  </p>
  <p>
    <input type="submit" name="check" value="Отправить" />
  </p>
</form> <script type="text/javascript">
  /* Функция, создающая экземпляр XMLHTTP */
  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;
  }
  function checkLogin(login) {
    var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
    xmlhttp.open('POST', 'check_login.php', true); // Открываем асинхронное соединение
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем тип содержимого
    xmlhttp.send("login=" + encodeURIComponent(login)); // Отправляем POST-запрос
    xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
      if (xmlhttp.readyState == 4) { // Ответ пришёл
        if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
          if (xmlhttp.responseText) document.getElementById("check_login").innerHTML = "Логин занят!";
          else document.getElementById("check_login").innerHTML = "Логин свободен!";
        }
      }
    };
  }
</script>

В функции checkLogin() мы отправляем запрос к файлу check_login.php с логином. Далее ждём ответа от этого PHP-файла и после получения анализируем его. Если возвращено true, значит, логин занят, что мы и выводим в соответствующий span-элемент. А если возвращено false, то выводим уже другую надпись в тот же элемент.

И, наконец, файл check_login.php:

<?php
  $login = strtolower(htmlspecialchars($_POST["login"])); // Получаем логин, преобразуем ряд спецсимволов и приводим строку к нижнему регистру
  $logins = array("admin", "user", "nik", "abc"); // Занятые логины
  echo in_array($login, $logins); // Проверяем наличие переданного логина в массиве с уже занятыми
?>

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

<?php
  $login = strtolower(htmlspecialchars($_POST["login"])); // Получаем логин, преобразуем ряд спецсимволов и приводим строку к нижнему регистру
  $mysqli = new mysqli("localhost", "root", "", "mydb"); // Подключаемся к базе данных
  $query = "SELECT `id` FROM `users` WHERE `login`='".$mysqli->real_escape_string($login)."'"; // Формируем запрос на поиск пользователя с полученным логином
  $result_set = $mysqli->query($query); // Отправляем запрос
  echo $result_set->num_rows != 0; // Если ничего не найдено, то выводим false, иначе true
?>

Надеюсь, Вы поняли механизм динамической проверки занятости логина на Ajax. Аналогично, проверяется и занятость e-mail, и других данных, которые можно проверить лишь на сервере. Как видите, JavaScript - очень полезный и важный язык, поэтому его необходимо знать любому профессиональному Web-разработчику, а поможет Вам изучить его курс: JavaScript, jQuery и Ajax с Нуля до Гуру.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

Morterset Morterset 04.02.2014 14:57:53

Насколько безопасно такое соединение с бд? Может ли злоумышленник посмотрев код страницы, каким либо образом взломать БД. Путь к файлу со скриптом он будет знать а вот послать POST запрос нужного содержания, не должно составить труда. Хотелось бы полностью перевести сайт на динамичное обновление (статей, инфы пользователя и т.д). Как вы смотрите на такой переход. Может ли большое обращение к БД загрузить сервер?

Ответить

tikkiwiki tikkiwiki 12.02.2014 11:47:54

Здравствуйте, Андрей. Взломать БД, просмотрев исходный код страницы, не реально. Путь к файлу со скриптом, тоже можно закрыть. Крупные запросы да, могут нагрузить сервер, но это тоже решается.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.