Главная > Javascript, PHP > Автоматическая проверка логина на занятость при регистрации без перезагрузки страницы — AJAX

Автоматическая проверка логина на занятость при регистрации без перезагрузки страницы — AJAX

9 декабря 2010 Написать комментарий К комментариям

Часть формы где у нас инпут для логина:

echo "<input type='text' id='login' name='login' onblur='checkName(this.value, \"\")'/>";
	echo "&nbsp;&mdash;&nbsp;<label for='login'>LOGIN</label><br/>";
	echo "<span class='hidden' id='nameCheckFailed'>NOT AVAILABLE</span>";
	echo "<span class='hidden' id='nameCheckOK'>AVAILABLE</span><br/>";

Яваскрипт, подключенный например где-то в head:

function checkName(input,response) {
	if (response != '') {
		failtext=document.getElementById('nameCheckFailed');
		oktext=document.getElementById('nameCheckOK');
		if (response == '1') {
			failtext.className='failtext';
			oktext.className='hidden';
		}
		else {
			failtext.className='hidden';
			oktext.className='oktext';
		}
	}
	else {
		if (input != '') {
			url='http://hostname/xml/checkUserName.php?q='+input;
			loadXMLDoc(url);
		}
		else {
			failtext.className='hidden';
			oktext.className='hidden';
		}
	}
}
var req;
function loadXMLDoc(url) {
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange=processReqChange;
		req.open("GET",url,true);
		req.send(null);
	}
	else if (window.ActiveXObject) {
		req = new ActiveXObject("Micrisoft.XMLHTTP");
		if (req) {
			req.onreadystatechange=processReqchange;
			req.open("GET",url,true);
			req.send();
		}
	}
}
function processReqChange() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			response=req.responseXML.documentElement;
			method=response.getElementsByTagName('method')[0].firstChild.data;
			result=response.getElementsByTagName('result')[0].firstChild.data;
			eval(method + '(\'\', result)');
		}
		else {
			alert("There was a problem retrieving the XML data:\n"+req.statusText);
		}
	}
}

Файл /xml/checkUserName.php (в первой строчке инклуд подключения к БД, если не знаем что там и как — гуглим, еще конечно должна существовать таблица users с полем username, в которое пишутся логины)

<?php
include ($_SERVER['DOCUMENT_ROOT']."/include/dbconfig.php");
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
function nameInUse($q) {
	$query=mysql_query("SELECT COUNT(*) FROM users WHERE username='".$q."'");
	$result=mysql_fetch_array($query);
	switch($result[0]) {
		case '1' :
			return '1';
			break;
		default:
			return '0';
	}
}
echo '<response>
	<method>checkName</method>
	<result>'.nameInUse($_GET['q']).'</result>
</response>';
?>

И CSS:

span.hidden {
	display:none;
}
span.failtext {
	display: inline;
	background: #ffebea;
}
span.oktext {
	display: inline;
	background-color: #efffea;;
}

На основе: http://wmdn.ru/javascript/example-of-check-login-using-ajax/
Вариант от WMDN: http://wmdn.ru/javascript/example-of-check-login-using-ajax/

Categories: Javascript, PHP Tags: , ,
  1. gggggg
    28 августа,2016 в 00:55 | #1
    Ответить | Цитата

    ghghghg

  2. 12
    22 февраля,2014 в 12:24 | #2
    Ответить | Цитата

    123

  3. Кирилл
    7 апреля,2012 в 23:27 | #3
    Ответить | Цитата

    Привет, Константин, давай поменяемся ссылками, ты поставишь белую ссылку на мою статью http://wmdn.ru/javascript/example-of-check-login-using-ajax/, а я, белую же из этой же статьи на твой вариант реализации (т.е. на страницу http://krylov.org.ua/?p=763)?

Похожие публикации