<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

Morterset Morterset 04.02.2014 14:57:53

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

Ответить

tikkiwiki tikkiwiki 12.02.2014 11:47:54

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

Ответить

ido1 ido1 08.12.2016 18:02:25

А как можно реализовать в функции "checkLogin()" return true или return false?

Ответить

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