СтатьиПрограммированиеВеб - программирование

Регистрация на сайте с помощью Ajax и JavaScript

Автор: Pascal

В данной статье мы поговорим о том, как сделать на сайте регистрацию пользователя без перезагрузки страницы. В этом нам поможет Ajax и JavaScript.
И так приступим. Для начала создадим файл «index.php», собственно в этом файле мы не будем использовать язык php, а обойдемся лишь возможностями JavaScript. Содержимое этого файла:

В заголовке подключаем файл стиля Style.css в этом файле нас интересует только один стиль для div’а. Рассмотрим его:

div.content { display:block; width: 300px; overflow: hidden; height: 1px; border: 1px solid #7F7F9D; padding: 0px; margin: 0px; font-family: Verdana; font-size:12px; }

Здесь нас интересуют следующие свойства:
- display – устанавливаем ему значение block что значит что div выводится на экран.
- overflow – устанавливаем в hidden что значит что в случае когда содержимое div’а невлезает в него оно просто не показывается.
- height – высота div’а, устанавливаем в 1px (форма регистрации первоначально свернута).

В заголовке так же подключаем файл JavaScript js.js, его мы рассмотрим чуть ниже.
При открытии в браузере файла index.php мы увидим одну строчку с текстом «+ Регистрация»

При нажатии на «+» снизу плавно появляется форма регистрации.

В коде страницы это:

<a href='#' onClick='resize("reg", 100, "reg_p"); return false;'> <span ID='reg_p'>+</span> </a>

Здесь «+» завернут в тег «а» и при нажатии на плюс вызывается подпрограмма на JavaScript с именем «resize» с параметрами: 1 – это ID div’а содержащего форму регистрации, 2 – это высота div’а на которую следует распахнуть div. 3 – это ID тега «span» содержащего «+» для того что бы его сменить на «-» при завершении распахивания.
Код подпрограммы «resize»:

function resize(dID, dHeight, dp) { if (dID!=undefined) lID = dID; if (dHeight!=undefined) lHeight = dHeight; if (dp!=undefined) lp = dp; var elem = document.getElementById(lID) if( elem ) { i+= fl ? 2 : -2; if ((i<=0) || (i>=lHeight)) { clearTimeout(timerID); var elem2 = document.getElementById(lp); elem2.innerHTML = elem2.innerHTML=='+' ? '-': '+'; fl=!fl; } else { elem.style.height = i; timerID = setTimeout("resize()",5); } } }

В первых 3х условиях проверяем пришли ли нам в функцию входные параметры, если да то присваиваем их глобальным переменным. Затем захватываем в переменную «elem» элемент div, затем проверяем успешность операции. Затем проверяем «fl» который первоначально содержит true, что означает что сначала будем разворачивать div, проверяем, если fl=true то к i прибавляем 2 иначе -2 (первоначально i=1). Следующим условием проверяем достижение граничного состояния (полностью свернуто/полностью развернуто). Рассмотрим сначала ветку else. Тут мы задаем высоте div’а значение i. А затем запускаем таймер который будет вызывать функцию «resize». А если же условие истинно выключаем таймер (он больше не нужен, ибо процесс ресайза завершен), далее получаем «span» содержащий «+/-» и меняем его (если стоит + то ставим – и наоборот) меняю свойство innerHTML, и наконец меняем флаг fl (если разворачивали то при следующем нажатии будем сворачивать).
Теперь рассмотрим саму форму регистрации, тут мы расположим два поля для логина и пароля, и кнопку для отправки данных на сервер.
По нажатию кнопки вызываем функцию «registr» с параметрами 1 – url php скрипта регистрации (Ajax не допускает посылку запроса на другой сервер, поэтому будьте внимательны если будете прописывать имя сервера), 2 – ID div’а для того что бы отобразить в нем результаты регистрации.
Код функции «registr»:

function registr(url, _resultId) { var cont; cont='login='+document.getElementById("login").value; cont+="&password="+document.getElementById("password").value; sendRequest(url, _resultId, cont); } Здесь мы объявляем переменную «cont» куда складываем параметры и вызываем функцию «sendRequest» с теми же параметрами что пришли и еще параметры. Код функции «sendRequest»: function sendRequest(url, _resultId, cont) { resultId = _resultId; document.getElementById(resultId).innerHTML = 'Обработка запроса, ждите...'; httpRequest.open('POST', url); httpRequest.onreadystatechange = getRequest; httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); httpRequest.send(cont); }

Здесь сохраняем ID div’а в глобальной переменной «resultId», записываем в div текст для пользователя, информируя о том, что его запрос выполняется. Затем вызываем метод «open» объекта httpRequest (о создании которого чуть ниже) с параметрами 1 – POST информируем о том что это будет запрос POST, 2 – url по которому будет происходить запрос.
Далее заполняем свойство «onreadystatechange», записываем в него имя функции которая будет вызываться при каждом изменении статуса запроса.
Строка httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); очень важна, тут мы добавляем заголовок для запроса по методу POST, без этой строки запрос не выполнится.
Ну и наконец вызываем метод «send» с параметрами которые мы заполнили выше, этот метод отправляет запрос по указанному url.
Рассмотрим функцию «getRequest»:

function getRequest() { if (httpRequest.readyState == 4) document.getElementById(resultId).innerHTML = httpRequest.responseText; }

Она очень простая, тут мы проверяем свойство «readyState» на равенство 4 что означает что данные загружены. И если это условие истинно то загружаем в div, ID которого мы предусмотрительно запомнили, текст пришедший к нам из скрипта.

Теперь рассмотрим создание объекта «httpRequest»:

var httpRequest = createHttpRequest(); function createHttpRequest() { var httpRequest; var browser = navigator.appName; if (browser == "Microsoft Internet Explorer") httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); else httpRequest = new XMLHttpRequest(); return httpRequest; }

Здесь мы объявляем переменную «httpRequest», которой присваиваем результат работы функции «createHttpRequest». Эта функция очень проста, единственный нюанс это то, что браузер IE поддерживает XMLHttpRequest в виде ActiveX-объекта Microsoft.XMLHTTP, а остальные браузеры считают его нативным.
Ну вот клиентская часть и готова, осталось написать файл «action.php» который у нас будет записывать данные в БД MySQL и отсылать клиенту результат регистрации.
Код файла «action.php»:

<?php header('Content-type: text/html; charset=windows-1251'); $server = 'localhost'; $user = 'u1'; $password = 'u1'; $base_name = 'b1'; $my_link = mysql_connect($server, $user, $password); mysql_select_db($base_name, $my_link); if (isset($_POST['login']) and isset($_POST['password'])) { $login = htmlspecialchars(iconv("UTF-8", "WINDOWS-1251", $_POST['login'])); $pass = htmlspecialchars(iconv("UTF-8", "WINDOWS-1251", $_POST['password'])); if (mysql_query("insert into users (login, password) values('$login', '".md5($pass)."')")) print "Успешная регистрация!<br>Вы зарегистрированы как: $login"; else print "Произошла не предвиденная ситуация"; } else print "Не корректный запрос"; ?>

Здесь все должно быть понятно, но тоже есть нюансы. Дело в том, что Ajax посылает запросы только в кодировке UTF-8, поэтому то что пришло от клиента необходимо обработать функцией «iconv». И перед тем как послать ответ клиенту нужно отослать заголовок, четко определяющий кодировку, в нашем случае это «Windows-1251».
Это все что я хотел осветить в этой статье, надеюсь она поможет разобраться в замечательной связке JavaScript&Ajax, и будет создаваться все больше реально динамических страниц в Интернете, это для меня, человека сидящего на GPRS очень важно :).

Рабочий исходник можно скачать тут.