У меня есть json документ, в отдельном файле я его подгружаю с помощью ajax, потом вношу в него изменения и сохраняю повторно. Смысл работы скрипта заключается в следующем. Есть “посты” в них вложены картинки, у каждого поста существует статус который принимает три значение “ok”, “wait” и “current”. У картинок тоже есть эти статусы. В каждом посте может быть несколько картинок.
В итоге скрипт каждую секунду открывает ветку поста проходит по картинкам и всем присваивает статус ok, дальше когда все картинки у поста закончились и они получили свой статус ok, главному посту также присваивается status ok и так до конца json документа.
Вот пример на картинке, как это работает.
example1.jpg
Проблема заключается в следующем скрипт плохо работает в режиме реального времени. Т.е. при первом запуске ничего не происходит. Я достаточно долго пыталась разобраться в чем ошибка. Пока не связалась с json документом, указав в браузере прямой путь, и не обновила этот документ. Пример на картинки.
example2.jpg
После обновления в открытом окне скрипт сразу стал работать в реальном времени.
В чем здесь может быть проблема? Я забыла указать в php заголовок или что-то другое?
Мой код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Json</title>
<style>
body {
font-family: sans-serif;
}
#output{background-color:rgba(194,194,194,0.6);position:fixed;top:15px;right:115px;z-index:2;}
</style>
</head>
<body>
<div id="output">
<strong>true</strong>
</div>
<div id="tree"></div>
<script>
var bool = false;
var Index1 = 0;
var jsontent;
var bool = false;
var posts;
const recursiveList = ((ul, li, data, color = {"current" : "#767474", "wait" : "#E51012", "ok" : "#1DDD32"}) => {
const html = Object.entries(data).map(([key, value]) => {
const item = li.cloneNode();
item.textContent = `[${key}]`;
if(key === "status") item.style.backgroundColor = color[value];
if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
item.append(value);
return item;
});
const list = ul.cloneNode();
list.append(...html);
return list;
}).bind(null, document.createElement("UL"), document.createElement("li"));
function init()
{
Index1 = -1;
bool = true;
setInterval(test,1000);
}
init();
var output = document.getElementById('output');
var i = 0;
function test()
{
ajaxQuery();
}
function ajaxQuery()
{
var ajaxhttp = new XMLHttpRequest();
var url = "./data.json";
ajaxhttp.open("GET",url,true);
ajaxhttp.setRequestHeader("content-type","application/json");
ajaxhttp.onreadystatechange = function(){
if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200){
//console.log(ajaxhttp.responseText);
jsontent = JSON.parse(ajaxhttp.responseText);
tree.innerHTML = "";
const html = recursiveList(jsontent);
tree.append(html);
output.innerHTML = "<strong>"+bool+"</strong> " + i +" == "+Index1;
posts = jsontent["response"];
if(bool)
{
switch(Index1) {
case -1: // if (x === 'value1')
posts[i].status = "current";
break;
default:
if(posts.length-1<i)
{
i = 0;
}
if(Index1 >= posts[i].photo.length)
{
posts[i].status = "ok";
i++;
Index1 = -2;
}
else
{
posts[i].photo[Index1].big.status = "ok";
}
if(posts[i]==undefined)
{
bool = false;
}
break;
}
jsontent["response"] = posts;
const jsonString = JSON.stringify(jsontent);
const xhr = new XMLHttpRequest();
xhr.open("POST",'receive.php');
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(jsonString);
Index1++;
}
}
}
ajaxhttp.send();
}
</script>
</body>
</html>
Код php:
<?php
$requestPayload = file_get_contents("php://input");
$object = json_decode($requestPayload,true);
$myFile = "data.json";
file_put_contents($myFile,$requestPayload);
?>
Прикладываю также исходники:
ex1.zip