title: How to use AJAX call to refresh img src
body: <p>I have a PHP script <em>picQuery.php</em> which returns the path to a picture.  I have another script which calls the picQuery.php and should then display the picture, but I cannot figure out how to do it.</p>
  
  <p>The code I have displays the file path in picFrame. What I want is something like the following line which I have commented out as it doesn't work.  How should it be written?</p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;form action=""&gt; 
  &lt;button type="button" onclick="getPic(this.value)"&gt;Click Me!&lt;/button&gt;
  &lt;/form&gt;
  &lt;p id="picFrame"&lt;/p&gt;
  
  &lt;!--&lt;img src=&lt;p id="picFrame"&lt;/p&gt;  alt="text"  style="width:304px;height:228px;"&gt;--&gt;
  
  &lt;script&gt;
  function getPic() {
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        document.getElementById("picFrame").innerHTML = this.responseText;
        alert('response = '.this.responseText);
      }
    };
    xhttp.open("GET", "picQuery.php?q=4", true);
    xhttp.send();   
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>picQuery.php</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;?php echo "PIC1.jpg" ?&gt; &lt;/body&gt; &lt;/html&gt;
  </code></pre>