如何使用ajax自动重新加载图片

时间:2018-02-19 19:30:22

标签: javascript jquery ajax

我有一个XML保存为pictures.xml,文本为:

<?xml version="1.0" encoding="UTF-8"?>
 <IMAGES>
  <PICS>
    <RELOAD>0</RELOAD>
    <LOCATION>picture1.jpg</LOCATION>
  </PICS>
  <PICS>
    <RELOAD>1</RELOAD>
    <LOCATION>picture2.jpg</LOCATION>
  </PICS>
  <PICS>
    <RELOAD>1</RELOAD>
    <LOCATION>picture3.jpg</LOCATION>
  </PICS>
</IMAGES>

在服务器端,我有一个脚本可以更改0的“RELOAD”标记,如果我想保留相同的图片,或1,如果我想重新加载它。

我正在考虑使用AJAX或JQuery在我的服务器端脚本的XML文件中将“RELOAD”更改为1的同一时刻重新加载图像。

我的HTML是这样的:

<!DOCTYPE html>
<html>
<body>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      reloadFunction(this);
    }
  };
  xhttp.open("GET", "pictures.xml", true);
  xhttp.send();
}
function reloadFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var picture = 0;
  var x = xmlDoc.getElementsByTagName("PICS");
  for (i = 0; i <x.length; i++) { 
    table += "<img src=" +
    x[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeRELOAD + "><br>";
  }
  document.getElementById("photos").innerHTML = photos;
}
</script>


<div id="photos"></div>

</body>
</html>

它实际上显示了所有图片。我不知道我应该在我的脚本中添加什么来使AJAX重新加载图片,在XML文件中标签RELOAD是1

有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

如果重新加载值为1,则需要检查条件

function reloadFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var picture = 0;
  var x = xmlDoc.getElementsByTagName("PICS");
  for (i = 0; i <x.length; i++) { 
    if(x[i].getElementsByTagName("RELOAD")[0].node === 1) {
     table += "<img src=" +
     x[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeRELOAD + "><br>";
    }
  }
  document.getElementById("photos").innerHTML = photos;
}