Асинхронный вывод данных из базы MySQL

[Vikky]

Приветствую!

Уже пару дней бьюсь с этим вопросом, поэтому буду рад любой помощи (и да.. Гугл уже спрашивал).

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

JS код вывода следующий:

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;
}

var xmlHttp = getXmlHttp();
var params = "count=" + document.location.href; // берём URL документа для определения кол-ва кликов на данной странице
xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "counter.php", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(params);
xmlHttp.onreadystatechange = function() {
	if (this.readyState !== 4) return;
	if (this.status !== 200) return;
}
return xmlHttp.responseText;

PHP код вывода следующий:

$showQuery = $db->query("SELECT `counter` FROM `table` WHERE `url`='{$_POST['count']}' LIMIT 1");

if (!empty($_POST['count'])) 
{

	if ($showQuery->num_rows === 0) 
	{
		echo '0';
	} 
	else 
	{
		$counter = $showQuery->fetch_array();		
		echo $counter['counter'];
	}

}

Подскажите, пожалуйста, почему не работает при таком раскладе? При этом, если поменять значение:

xmlHttp.open("POST", "counter.php", false);

то всё выводится нормально, но боюсь при увеличении БД будет наблюдаться "подвисание" страницы, как написано тут..

[Rise]

Строка 28, детка

[Vikky]

Строка 28, детка

А что не так-то с ней? Почему точно такой же код, но с другим POST-параметром отправляет "+1" в БД при клике "на ура", а выводить не хочет?

[Rise]

Очевидно потому что этот параметр не для красоты там есть...

[Vikky]

Очевидно потому что этот параметр не для красоты там есть...

Решительно не понимаю о чём идёт речь.. или зайти с этим вопросом позже, когда адекватные жители форума с праздников выйдут? ОК.

[danik.js]

Vikky, на то она и асинхронность, что твой код не останавливается, дожидаясь ответа, а продолжает выполняться дальше. А это значит что return responseText выполнится тутже, когда запрос даже еще не дошел до сервера!
Решение - используй callback-функции. Схожая тема: Как получить переменную после пост.

[Vikky]

Vikky, на то она и асинхронность, что твой код не останавливается, дожидаясь ответа, а продолжает выполняться дальше. А это значит что return responseText выполнится тутже, когда запрос даже еще не дошел до сервера!
Решение - используй callback-функции. Схожая тема: Как получить переменную после пост.

Именно не поняв ничего в том топике - я этот и создал..

Просто не понимаю: как может быть, что

xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState !== 4) return;
	
	if (xmlHttp.status === 200) {
		alert(xmlHttp.responseText);
	}
}

выводит значение из БД во всплывающем окошке, а просто на страницу - нет..

[danik.js]

а просто на страницу

просто - это как? Ну напиши document.write(xmlHttp.responseText) - выведет просто на страницу.

[Vikky]

просто - это как? Ну напиши document.write(xmlHttp.responseText) - выведет просто на страницу.

Просто так, это если всё обёрнуто в функцию и нужно выводить в совершенно другом месте.

JS:

...
function myFunction() {
	var xmlHttp = getXmlHttp();
	var params = "count=" + document.location.href;
	xmlHttp = new XMLHttpRequest();
	xmlHttp.open("POST", "counter.php", true);
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send(params);
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState !== 4) return;
		if (xmlHttp.status == 200) {
			return xmlHttp.responseText;
		}
	}
}
...
...
...
document.getElementById("myID").innerHTML = myFunction();
...
...

В таком варианте даёт undefined вместо пустой строки.

[danik.js]

return xmlHttp.responseText;

Эта конструкция вернет результат в то место, откуда была вызвана функция (это основы программирования). Внимание, вопрос: где происходит вызов этой функции? И соответственно куда улетит возвращаемое значение?

Чтоб ты понимал пример по-проще:

var fn = function() {
    return 'abc';
};


var result = fn(); // тут вызов функции, return вернет значение вот прям в эту строчку, в место вызова функции.