Перезагрузка отдельного элемента на странице

@MirDj · Регистрация: 16.01.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Вопрос такого плана.
Есть допустим содержимое помещенное в

HTML5
1
<div id="content"> Содержимое </div>

Есть ли какая-то функция, которая обновила бы содержимое именно этого блока?
Смысл такой:
В данном диве есть данные, пользователь их редактирует.
Дальше нажимает на кнопку, на которой срабатывает функция подключения к php файлу, без перезагрузки страницы и обрабатывает данные возвращая результат типа: Данные успешно обновлены.
Данные действительно обновляются, но это не увидишь пока не перезагрузишь страницу.
Вот и подумал, что наверняка реально, при получении положительного ответа от XMLHttpRequest(); обновлять нужный div блок.
Так ли это? Если да, то если можно пример покажите.

@skaa · 18.03.2013, 18:10

Вот файл в котором обновляем НЕ всю страницу:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
  <head>
    <title>expXMLHttpRequest.html</title>
    <script>
    function fnOC()
    {
      var surl='u1.php';
      var xmlhttp=new XMLHttpRequest();
      xmlhttp.onreadystatechange=function()
      {
        if(xmlhttp.readyState==4&&xmlhttp.status==200)
          document.getElementById('idAcc').innerHTML=xmlhttp.responseText;
      }
      xmlhttp.open('GET',surl,true);
      xmlhttp.send();
    }
    </script>
  </head>
  <body>
    <input type='button' value='Run' onClick='fnOC();'/><br/>
    Result:[<span id='idAcc'></span>]
  </body>
</html>

. Файл u1.php (к которому обращаемся через XMLHttpRequest) должен находиться в той же директории. Вот он:

PHP
1
2
3
<?
echo("From PHP");
?>

.

@MirDj · 18.03.2013, 19:25 **[ТС]**

У меня на исходной странице идет так:

PHP
1
2
3
4
5
6
7
  <script type="text/javascript" src="js/request.js"></script> // Подключаем js файл, его выложу ниже
 
       <div id="content_div">
 
<img src="https://www.cyberforum.ru/images/first.png" title="Нажмите, чтобы сделать разделом по умолчанию"  onClick="return getData('first_razdel','2','del_res','dy4y6ag4d3yhgcuqa9hk','<?echo $row['id'];?>','','')">
 
   </div>

При клике на картинку срабатывает функция getData и начинает обрабатываться запрос:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// функция запроса данных с сервера
function getXMLDocument(data,sess) {
    var xml1;
    data = encodeURIComponent(data);
    var fullurl = "http://domen.ru/include/request.php";
    var fullurl2 = "http://domen.ru/include/request.php?data="+ data+"&ses="+sess;
    if(window.XMLHttpRequest) {
        xml1=new XMLHttpRequest();
        xml1.onreadystatechange=function()
      {
      if(xml1.readyState==4&&xml1.status==200)
          document.getElementById('content_div').innerHTML=xml1.responseText;
      }
xml1.open("POST", fullurl, true);
xml1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var ParamStr = "data="+ data+"&ses="+sess;
xml1.setRequestHeader("Content-Length", ParamStr.length);
xml1.send(ParamStr);
 
 
 
        // если надо получать именно XML, то включается это:
        //return xml1.responseXML;
        // иначе будет только текст
        return xml1.responseText;
    } else if(window.ActiveXObject) {
            xml1=new ActiveXObject("Microsoft.XMLDOM");
            xml1.async=false;
            xml1.load(fullurl2);
            return xml1;
    } else {
        alert("Загрузка XML не поддерживается браузером");
        return null;
    }
}
// функция, срабатываемая на основном интервале
function getData(curvar,data,obj,sess,idf,username,user_id) {
    var senddata = curvar+"|"+data+"|"+idf+"|"+username+"|"+user_id;
    // запросим сервер
    if(curvar=="var") {
        return(getXMLDocument(senddata,sess));
    } else {
        if(obj!="") {
            document.getElementById(obj).innerHTML = "<img src='images/ajax.gif' />";
 
 
        }
        var newData=getXMLDocument(senddata,sess);
        // проверим - если равна null
        if(newData!="null" || newData!="") {
            if(obj=="") {
                return(newData);
            } else {
                document.getElementById(obj).innerHTML = newData;
                
            }
        }
    }
}

Происходит что при клике на картинку :

Отображает просто надпись что раздел сделан разделом по умолчанию, а все что в диве находится - исчезает.

@skaa · 18.03.2013, 20:23

Всё что между <div id="content_div"> и </div> будет заменено на xml1.responseText согласно коду. А как должно быть?

@MirDj · 18.03.2013, 20:27 **[ТС]**

Сообщение от skaa

Всё что между <div id="content_div"> и </div> будет заменено на xml1.responseText согласно коду. А как должно быть?

<div id="content_div">
Здесь идет запрос к БД, и проверяется переменная, если она равна единице, то выводится кнопка для отключения раздела, а если нулю, то кнопка для включения раздела.
Таким образом получается что при обновлении данных через js кнопка остается та что и была и не меняется на другую
</div>

@skaa · 18.03.2013, 21:48

Вот так кнопки можно менять.
Вызывающий файл:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
  <head>
    <title>expXMLHttpRequest.html</title>
    <script>
    function fnOC(nb)
    {
      var surl='u1.php?nb='+nb;
      var xmlhttp=new XMLHttpRequest();
      xmlhttp.onreadystatechange=function()
      {
        if(xmlhttp.readyState==4&&xmlhttp.status==200)
        {
          if(xmlhttp.responseText=='b1')
            document.getElementById('idAcc').innerHTML="<input type='button' value='Button 1'/>";
          else
            document.getElementById('idAcc').innerHTML="<input type='button' value='Button 2'/>";
        }
      }
      xmlhttp.open('GET',surl,true);
      xmlhttp.send();
    }
    </script>
  </head>
  <body>
    <input type='button' value='Run 1' onClick='fnOC(1);'/><br/>
    <input type='button' value='Run 2' onClick='fnOC(2);'/><br/>
    Result:[<span id='idAcc'></span>]<br/>
    <input type='text'/>
  </body>
</html>

.

Вызываемый файл:

PHP
1
2
3
4
<?
$nb=@$_GET["nb"];
echo("b".$nb);
?>

.

@MirDj · 18.03.2013, 21:55 **[ТС]**

Нет, ну это пример всего лишь, чтобы смысл передать, так там большой код, который хотелось бы обновлять, после изменения данных средствами js:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript" src="js/request.js"></script>
  <? echo"<div id=\"del_res\">";
 
echo"</div><br />";
echo"<div id=\"content_div\">";
$q=@mysql_query("select * from `razdel_site` order by `id` desc");
if (mysql_affected_rows() == 0) {// Если данные в БД не обнаружены, выводим ошибку, в зависимости от условий
echo"Пока не создано ни одного раздела!";
}else{
echo"<br />Разделы: <br />";
 
while($row=@mysql_fetch_array($q)) { // Запускаем цикл
echo"<a href=\"index.php?cmd=1&amp;act=view_full&amp;idf=".$row['id']."\" title=\"Нажмите, чтобы просмотреть как выглядит раздел\">".$row['name_razdel']."</a> | <a href=\"index.php?cmd=1&amp;idf=".$row['id']."\" title=\"Нажмите, чтобы отредактировать раздел\"><img src=\"../forum/mchat/edit.gif\" title=\"Нажмите, чтобы отредактировать раздел\"></a> | ";?>
<img src="https://www.cyberforum.ru/forum/mchat/del.gif" title="Нажмите, чтобы удалить раздел"  onClick="return getData('del_razdel','<?echo $row['id'];?>','del_res','dy4y6ag4d3yhgcuqa9hk','<?echo $row['id'];?>','','')"> |
<?if($row['show_razdel']){?>
 <img src="https://www.cyberforum.ru/images/p-off.png" title="Нажмите, чтобы выключить раздел"  onClick="return getData('show_razdel','1','del_res','dy4y6ag4d3yhgcuqa9hk','<?echo $row['id'];?>','','')">
 <?}else{?>
 <img src="https://www.cyberforum.ru/images/p-on.png" title="Нажмите, чтобы включить раздел"  onClick="return getData('show_razdel','2','del_res','dy4y6ag4d3yhgcuqa9hk','<?echo $row['id'];?>','','')"><?}?>
<?if($row['osnovnoy']){?>
| Раздел является разделом по умолчанию
   <?}else{?>
 | <img src="https://www.cyberforum.ru/images/first.png" title="Нажмите, чтобы сделать разделом по умолчанию"  onClick="return getData('first_razdel','2','del_res','dy4y6ag4d3yhgcuqa9hk','<?echo $row['id'];?>','','')">
 <?}?>
 <? echo"<br />";
}
echo"</div>";
}

@skaa · 18.03.2013, 22:19

Так в чём проблема? Задаёшь в PHP код HTML который надо вставить в виде строки в div и делаешь её echo, а в javascript в вызывающей странице пишешь document.getElementById('idAcc').innerHT ML=xmlhttp.responseText;.

@MirDj · 19.03.2013, 09:24 **[ТС]**

Я сделал еще вчера методом вставки в php файл, в котором идет изменение данных через js, после выполнения операции, там где оповещение об успешном измененеии данных, тот же код что и на исходной странице.
Это немного сложнее, потому как один и тот же код размещается два раза в разных файлах, но работает это идеально.
Просто думал что в исходном документе прям можно обновлять, чтобы код не множить.

@misha_globus · 23.02.2019, 21:37

Всем желаю крепкого здоровья!
Что-то я не пойму по работе с функцией XMLHttpRequest().
Есть на jQuery то, что прекрасно у меня работает:
Файл index.php:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test-image-ajax</title>
    <link rel="stylesheet" type="text/css" href="article_first_style.css">
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
    <script type="text/javascript">
        
        $(document).ready(function(){
            var loadNewCenter = function(){
                $("#center").load('center.php');
            };
        setInterval(loadNewCenter, 3000);
        });
        
    </script>
</head>
<body>
    <div id="center">
        <?php
            require "center.php";
        ?>
    </div>
</body>
</html>

Файл style.css:

CSS
1
2
#center{ width: 250px; height: 190px; }
.image{ width: 244px; height: 183px; }

Файл center.php:

HTML5
1
<img class="image" src="<?php echo mt_rand(1, 10) ?>.jpg">

А также набор из 10 картинок.

Но именно сейчас возникла необходимость тоже самое организовать с помощью функции XMLHttpRequest().
Непосредственно XMLHttpRequest() я нашел:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}

А вот что дальше, я вообще не понимаю. Это должно выглядеть, как я понимаю, примерно так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myreload() {
    var xmlhttp = getXmlHttp();
    xmlhttp.open('POST', 'center.php', true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                
                   ?????????????????
                
            }
        }
    }
    setTimeout('myreload()', 1000);
}

Но ничего не получается.

@amr-now · 24.02.2019, 10:51

misha_globus, здравствуйте!
У Вас версия браузера какая? Времён раннего или позднего Палеозоя?

Если уж вообще для какого-нибудь IE8, то:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test-image-ajax</title>
    <link rel="stylesheet" type="text/css" href="article_first_style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
    <div id="center"></div>
    <script>
        $(document).ready(docReady);
 
        function docReady() {
            loadNewCenter();
            setInterval(loadNewCenter, 3000);
        }
 
        function loadNewCenter() {
            var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
            var xhr = new XHR();
            xhr.open("GET", "center.php");
            xhr.onload = function () {
                if (xhr.status === 200)
                    $("#center").html(xhr.response);
                // TODO: Обработка ошибок пока никак не настроена
            };
            xhr.send();
        }
    </script>
</body>
</html>

Добавлено через 12 минут
Пишут, что в IE8 было вообще всё плохо:

В IE8 и IE9 поддержка XMLHttpRequest ограничена, но имеют свой объект XDomainRequest, который реализовывал часть возможностей современного стандарта.

Кросс-браузерно:
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();

http://calendar.vpogiba.info/w... equest.htm

Добавлено через 11 минут
После подстановки XDomainRequest:

в IE8,9 поддерживаются события onload, onerror и onprogress. Это именно для IE8,9. Для IE10 обычный XMLHttpRequest уже является полноценным.

https://learn.javascript.ru/ajax-xmlhttprequest

@misha_globus · 24.02.2019, 13:54

Сообщение от amr-now

misha_globus, здравствуйте!
У Вас версия браузера какая? Времён раннего или позднего Палеозоя?

Здравствуйте, коллеги!
Дело не в браузере. Может быть я неправильно выразился.
Но мне необходимо организовать AJAX-слайдер случайных картинок исключительно без jQuery, на чистом JS.

@amr-now · 24.02.2019, 14:18

Сообщение от misha_globus

исключительно без jQuery, на чистом JS

Браузер имеет значение.
Для IE8:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test-image-ajax</title>
    <link rel="stylesheet" type="text/css" href="article_first_style.css">
</head>
<body>
    <div id="center"></div>
    <script>
        document.addEventListener("DOMContentLoaded", docReady);
 
        function docReady() {
            loadNewCenter();
            setInterval(loadNewCenter, 3000);
        }
 
        function loadNewCenter() {
            var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
            var xhr = new XHR();
            xhr.open("GET", "center.php");
            xhr.onload = function () {
                if (xhr.status === 200)
                    document.getElementById("center").innerHTML = xhr.response;
                // TODO: Обработка ошибок пока никак не настроена
            };
            xhr.send();
        }
    </script>
</body>
</html>

В современном браузере AJAX-запрос на нативном JavaScript:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test-image-ajax</title>
    <link rel="stylesheet" type="text/css" href="article_first_style.css">
</head>
 
<body>
    <div id="center"></div>
    <script type="module">
        loadNewCenter();
        setInterval(loadNewCenter, 3000);
 
        async function loadNewCenter() {
            try {
                let response = await fetch("center.php");
                if (response.ok)
                    document.getElementById("center").innerHTML = await response.text();
                else {
                    alert(`${response.status}: ${response.statusText}`);
                }
            }
            catch (e) {
                alert(e.message);
            }
        }
    </script>
</body>
</html>

----
Сейчас если есть желание программировать на нормальной версии языка, а не на устаревшем отстое,
и всё равно оставить совместимость со старым IE,
то надо научиться транспилить и полифиллить свои скрипты.

@misha_globus · 24.02.2019, 15:19

Отдельное спасибо, amr-now.
Посмотрел Ваш ответ, Случайно наткнулся на "https://www.youtube.com/watch?time_continue=8&v=x2DTiziYq7g" и тоже посмотрел. Оказалось все просто:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function myreload() {
    var xmlhttp = getXmlHttp();
    xmlhttp.open('GET', 'center.php', true);
    xmlhttp.send();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                document.getElementById('center').innerHTML = xmlhttp.responseText;
            }
        }
    }
    setTimeout('myreload()', 1000);
}

@amr-now · 24.02.2019, 15:28

misha_globus,

JavaScript
1
2
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200)

Данный код из сообщения №2 этой темы. Предназначен специально для совместимости с IE8.
Там не было событий onload и onerror.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@skaa Хочу в Исландию 1041 / 840 / 119 Регистрация: 10.11.2010 Сообщений: 1,630
	18.03.2013, 20:23
	Всё что между <div id="content_div"> и </div> будет заменено на xml1.responseText согласно коду. А как должно быть? 0

@skaa Хочу в Исландию 1041 / 840 / 119 Регистрация: 10.11.2010 Сообщений: 1,630
	18.03.2013, 22:19
	Так в чём проблема? Задаёшь в PHP код HTML который надо вставить в виде строки в div и делаешь её echo, а в javascript в вызывающей странице пишешь document.getElementById('idAcc').innerHT ML=xmlhttp.responseText;. 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	19.03.2013, 09:24 [ТС]
	Я сделал еще вчера методом вставки в php файл, в котором идет изменение данных через js, после выполнения операции, там где оповещение об успешном измененеии данных, тот же код что и на исходной странице. Это немного сложнее, потому как один и тот же код размещается два раза в разных файлах, но работает это идеально. Просто думал что в исходном документе прям можно обновлять, чтобы код не множить. 0