Блог

Я создаю систему чата и использую html / php / jquery.

Как я могу добавить дочерний элемент с данными из внешнего файла в div, используя функцию автоматического обновления javascript?

Код, который у меня есть:

 <script>
    var auto_refresh = setInterval(
    function()
    {
        $('#messages_box').load('refresh_messages.php');
    }, 1000);
</script>
 

Приведенный выше код обновляет весь DIV данными, полученными из упомянутого документа.

 <script>
    var auto_refresh = setInterval(
    function()
    {
        var textnode=document.createTextNode("Water");
        document.getElementById("messages_box").appendChild(textnode);
    }, 1000);
</script>
 

И приведенный выше код добавляет текст в нужный мне раздел.

Я хочу «объединить» эти два и получить следующий результат:

Автоматическое обновление внешнего php-файла каждую секунду, и если появляются новые результаты (сообщения в моем случае), DIV messages_box должен обновляться результатами с помощью метода appendchils JS.

Я хочу создать систему обмена сообщениями в чате, которая будет получать сообщения, если при загрузке внешнего php-файла будет получен новый результат. Я хочу использовать метод appendchild, потому что, делая это, я практически добавлю нового дочернего элемента в div, а не обновлю весь div. Мне абсолютно необходимо добавить материал, а не загружать весь DIV снова.

Мне кажется, что то, что вы ищете, — это запрос AJAX.

Вот как я бы это настроил:

1. Настройте базу данных для хранения сообщений
2. Имейте PHP-файл с различными функциями для извлечения и отправки сообщений в / из базы данных.
3. Есть другой PHP / HTML-файл с javascript, который регулярно создает AJAX-запрос к другому PHP-файлу.

Существует множество документации о том, как создавать ajax-запросы с помощью чистого javascript, но я лично предпочитаю использовать функцию jQuery .ajax() .