Асинхронный вывод данных из базы MySQL
Приветствую!
Уже пару дней бьюсь с этим вопросом, поэтому буду рад любой помощи (и да.. Гугл уже спрашивал). Делаю простой счётчик кликов по ссылкам, который сохраняет данные в БД и выводит их при перезагрузке страницы (для каждой страницы - свой результат). С сохранением - проблем никаких нет, всё асинхронно. Но когда я пытаюсь так же асинхронно вывести значение - вместо цифр пустота. Причём без ошибок в консоли :blink: 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);
то всё выводится нормально, но боюсь при увеличении БД будет наблюдаться "подвисание" страницы, как написано тут.. |
Цитата:
|
Цитата:
|
Vikky, на то она и асинхронность, что твой код не останавливается, дожидаясь ответа, а продолжает выполняться дальше. А это значит что return responseText выполнится тутже, когда запрос даже еще не дошел до сервера!
Решение - используй callback-функции. Схожая тема: http://javascript.ru/forum/jquery/44...osle-post.html |
Цитата:
Просто не понимаю: как может быть, что
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState !== 4) return;
if (xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
}
выводит значение из БД во всплывающем окошке, а просто на страницу - нет.. :blink: |
Цитата:
|
Цитата:
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 вместо пустой строки. |
Цитата:
Чтоб ты понимал пример по-проще:
var fn = function() {
return 'abc';
};
var result = fn(); // тут вызов функции, return вернет значение вот прям в эту строчку, в место вызова функции.
|
Упростил твой код:
function myFunction() {
// тут создаются какие-то объекты, не важно...
}
document.getElementById("myID").innerHTML = myFunction();
Раз функция ничего не возвращает, то откуда чему-то взяться, кроме как undefined? |
Цитата:
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) {
document.getElementById("myID").innerHTML = xmlHttp.responseText;
}
}
}
HTML:
<script>
window.onload = function() {
myFunction(); // типа того.. не суть, просто с загрузкой страницы запускать функцию
}
</script>
<div id="myID"></div>
При этом всё равно на доли секунды показывается undefined, а уже потом данные из БД.. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
...
function myFunction() {
...
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState !== 4) return;
if (xmlHttp.status == 200) {
document.getElementById("myID").innerHTML = xmlHttp.responseText;
}
}
return 0;
}
Цитата:
var xmlHttp = new XMLHttpRequest(); |
Цитата:
Зачем ты пустоту (результат вызова myFunction() присваиваешь в innerHTML ?) Отсюда и undefined был. |
Цитата:
p.s. карму, как я понимаю здешние законы, только те кто был уже с рождения JS-профи за подобный топик минусуют? ОК. |
| Часовой пояс GMT +3, время: 02:28. |