title: Javascript updates content asynchronously
body: <p>I wonder how it is possible that using javascript, images can be loaded asynchronously by changing the src of the <code>img</code> element after the page has been loaded. I thought that AJAX is for things like that(getting data from server without refreshing the page). Please clarify why it is working that way. The images are on server side, so I thought that i should refresh the page before the result will be visible.</p>
  
  <p>Here is a sample code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script&gt;
  var photos = ["baloon", "game", "cliff"];
  function changePhoto() {
      var input=document.getElementById("ph1");
      var iValue=input.value.trim();
      for(var tmp in photos) {
          if(photos[tmp] === iValue){
              var img=document.getElementById("photo");
              img.setAttribute("src", "img/"+iValue+".jpg");
          }
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;input class="form-control" id="ph1" type="text" onkeyup=""&gt;
    &lt;p&gt;Photo: &lt;span id="txtHint" onclick="changePhoto()"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="container" id="photocontainer"&gt;
      &lt;img id="photo"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>