-3

Как организовать блок вывода результатов в режиме online из БД без перезагрузки страницы?

Как на http://www.championat.com/. Необходимо, чтобы когда я поменял бы результат матча в админке, изменения произошли сразу в блоке на главной странице без её перезагрузки.

1
  • 2
    Готового кода вам никто не напишет, делается это с использованием ajax'a...
    – user3545
    Commented 26 сент. 2011 в 13:12

3 ответа 3

1

Я бы порекомендовал использовать COMET, Websockets. Дело в том, что если вы хотите, чтобы информация обновлялась автоматически после изменения данных с помощью обычного подхода ajax - вам придётся делать каждую секунду запрос к базе данных (а не завезли ли новые данные?).
Поэтому необходимо реализовать с помощью io.sockets, websockets. Чтобы при изменении в админке шёл запрос ко всем подключённым клиентам вебсокета о необходимости обновить информацию.

Если же есть неприязнь к сокетам (тобишь постоянное подключение клиента к серверу, где клиент и сервер слушают друг друга), то можно использовать как в вконтакте COMET long polling, но в таком случае следует хранить в оперативной памяти (например Redis) информацию о том, не появилась ли новые данные в БД, чтобы не дёргать базу данных чаще, чем нужно.

1

Логика следующая (примерно, используется библиотека jquery):

HTML элемент с каким то классом <a class="click">Кликни</a>

JavaScript код

$(".click").click(function(){

$.ajax({
    url: '/ajax/example.html',             // указываем URL и
    dataType : "json",                     // тип загружаемых данных
    success: function (data, textStatus) { // вешаем свой обработчик на функцию success
        $.each(data, function(i, val) {    // обрабатываем полученные данные
            /* ... */
        });
    }
});

});

А потом на сервере уже обрабатываешь запрос как простое обращение.

Про ajax можешь почитать тут: Ajax

0
0

Очень много однотипных вопросов. Читайте хотя бы, как другие люди решали подобные проблемы. Для этого надо использовать AJAX - запросы.

Код, который я использую для этих целей:

function send_request(r_method, r_path, r_args, r_handler)
{
    var Request = false;
    if(window.XMLHttpRequest)
    {
        Request=new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        try
        {
            Request = new ActiveXObject("Microsoft.XMLHTTP")
        };
        catch(CatchException)
        {
            Request=new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    if(!Request)
    {
        return;
    }
    Request.onreadystatechange=function()
    {
        if(Request.readyState==4)
            if(Request.status==200)
                r_handler(Request.responseText);
        if(r_method.toLowerCase() =="get"&&r_args.length>0)
            r_path+="?"+r_args;
        Request.open(r_method,r_path,true);
        if(r_method.toLowerCase()=="post")
        {
            Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
            Request.send(r_args)
        }
        else
        {
            Request.send(null)
        }
    }
}

Коротко об аргументах:

send_request("Тип запроса. get либо post","Путь/к/файлу.php","Аргументы. Например: topic=46764&page=4",function(response){
    //Код, который будет исполняться при успешном окончании запроса
    //response - переменная, содержащая ответ      
})

Небольшой пример:

test.html

<html>

<head>
  <script>
    function send_request(r_method, r_path, r_args, r_handler)
    {
        var Request = false;
        if(window.XMLHttpRequest)
        {
            Request=new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        {
            try
            {
                Request = new ActiveXObject("Microsoft.XMLHTTP")
            }catch(CatchException)
            {
                Request=new ActiveXObject("Msxml2.XMLHTTP");
            }
        }
        if(!Request)
        {
            return;
        }
        Request.onreadystatechange=function()
        {
            if(Request.readyState==4)
                if(Request.status==200)
                    r_handler(Request.responseText);
            if(r_method.toLowerCase() =="get"&&r_args.length>0)
                r_path+="?"+r_args;
            Request.open(r_method,r_path,true);
            if(r_method.toLowerCase()=="post")
            {
                Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
                Request.send(r_args)
            }
            else
            {
                Request.send(null)
            }
        }
    }
    function request() {
      send_request("GET", "test.php", "testval=test", function(response) {
          document.body.innerHTML+=response
      })
    }
  </script>
</head>

<body>
  <button onclick="request()">Загрузить!</button>
</body>

</html>

test.php

<?PHP
print_r(mysql_query("SELECT * FROM USERS")) //Например
?>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.