Простой пример принципа работы и применения AJAX — проверка логина

Логотип AJAXЗаметка, описывающая принцип работы AJAX, основанная на олдскульном переводе статьи «Сверхдинамичные вэбинтерфейсы».
В той самой статье давался пример работы технологии AJAX (но он в представленном виде не работал) на примере проверки занятости логина.

Так что исправим пример и добавим функциональность работы с БД (MySQL).
Краткое содержание предыдущей серии версии статьи:
Цель: с помощью AJAX-запросов проверять занятость логина.
Решение: на клиенте используем объект XMLHttpRequest и пачку JavaScript-функций.

Для начала исходный пример использования AJAX (с комментариями на русском :) ).

HTML-файл

PHP-файл

При таком запуске возникает ошибка:
В Internet Explorer: 'response' — есть null или не является объектом
В FireFox-s FireBug: response.getElementsByTagName(«method»)[0] is undefined

Причина которой становится понятной при заглядывании на вкладку Net аддона FireFox — FireBug:

Ошибка синтаксического анализа XML: объявление XML или текста не в начале сущности Адрес: moz-nullprincipal:{bca5a75b-786f-4e12-86bf-f684185dc71c} Строка 2, символ 1:
<?xml version="1.0" encoding="UTF-8"
^

Вносим исправление в серверный скрипт, а именно, перенесем строку объявления XML-документа под header.

Доработка примера для работы AJAX с БД MySQL:

Доработка необходима только серверному скрипту checkUserName.php, если точнее только функции nameInUse():

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
function nameInUse($q)
{  
//соединение с базой данных 
$conn = mysql_connect('localhost','root','password');
//выбор базы данных MySQL 
$db = mysql_select_db('wwwdb', $conn);
//оператор SQL 
$sql = "SELECT COUNT(*) FROM `USERS` WHERE `USERNAME` = '$q'";
$result = mysql_query($sql,$conn);
//результат запроса
$row = mysql_fetch_array($result);
switch($row[0])
{
	case  '1' :
		return '1';
		break;
	default:
		return '0';
}	
mysql_close($conn);
}
?>
<response>
  <method>checkName</method>
  <result><?php echo nameInUse($_GET['q']) ?></result>
</response>

У меня в общем-то тоже могут быть небольшие ошибки (как выдастся время и настроение все проверю), а так добро пожаловать в комменты с вопросами.

Вариант на эту же тему от Константина Крылова: http://krylov.org.ua/?p=763.

Комментариев: 17

  • 24.09.2010 chepmaster:

    пример работы скрипта !

  • 05.10.2010 .2058:

    И это тоже не работает...

    Толи я дурак толи лыжи не едут!

    • 05.10.2010 Кирилл:

      Может нечто среднее? :)

      Пока нет времени выложить пример в статью, хотя он врятли бы прояснил ситуацию на вашей стороне.

      Может скажете на каком шаге не работает?

  • 15.11.2010 MAYERS:

    У меня дак заработало!

    Причём сразу, в отличие от других примеров! =)

    Наверное потому что здесь не подключается jquery, а все функции написаны руками)))

  • 04.12.2010 denver:

    спасибо за урок.

    У меня только пришлось править в HTML-файле :if (response == '1') на if (response == 1).

    Иначе ни в какую...

  • 12.05.2011 KIRALEX:

    Удивительно что никто незаметил в этом коде SQL уязвимость. $_GET['q'] никаким образом не проверяется

    После

    $conn = mysql_connect('localhost','root','password');

    и до

    $sql = "SELECT COUNT(*) FROM `USERS` WHERE `USERNAME` = '$q'";

    нужно вписать

    $q = mysql_real_escape_string( $q, $conn );

    Будте внимательны

  • 09.08.2011 Ъь:

    Случайно наткнулся на эту статью, сразу возникает вопрос:

    На какой в javascript парсить xml? если можно просто вернуть одну циферку или JSON

    1
    
     

    на выходе мы имеем такую конструкцию

    {username:true} или {username: false }

    что позволятяет нам обращатся не как к xml, а как к объекту javascript

    дальше в функции processReqChange() убираем все велосипеды и пишем простой код

    function processReqChange() { // если запрос показывает "готово" if (req.readyState == 4) { // если статус ответа сервера "OK" if (req.status == 200) { eval('a = ' + xmlhttp.responseText); message = document.getElementById('nameCheckFailed'); if (a.username){ message.className = 'error'; }else{ message.className = 'hidden'; } } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } }

  • 09.08.2011 Ъь:

    у вас тут баг небольшой, код пых не вылез с символами <? ?>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
     
     
     
    header('Content-Type: text/javascript');
    ...
    	case  '1' :
    		return 'true';
    		break;
    	default:
    		return 'false';
    }	
    mysql_close($conn);
    }
    echo "{username: " . nameInUse($_GET['q']) . " }"}
    • 11.08.2011 Кирилл:

      Парсер комментов ворпресса похоже живет по своим правилам :)

  • 23.11.2011 Макс:

    Здравствуйте!

    На своем сайте stepanova4.ru (wordpress 3.2.1–ru_RU) я установил плагин Login With Ajax (версия 3.0.4).

    Некоторое время все работало нормально, но недавно, при клике в блоке «Войти» на ссылке «Регистрация» окно регистрации перестало появляться.

    Точнее не появляется полностью: страница сайта бледнеет, и на ее фоне проявляется бледное окно регистрации к которому нет доступа.

    Можете помочь определить и победить проблему?

    В крайнем случае скажите, как изменить адрес ссылки? Чтоб открывалось стандартное окно регистрации.

    P.S. Я дилетант.

    Готов финансово отблагодарить.

  • 12.04.2012 Krylov:

    Привет. Поставил твою ссылку в статье.

  • 07.06.2012 VIT:

    Кто подскажет самый наипростейший пример AJAX, чтобы разжевано было от и до?????


Добавление комментария:

 css.php