title: How to call multiple AJAX functions (to PHP) without repeating code
body: <p>I have a little script which uses AJAX and PHP to display an image. You can see below that if I call the function mom() it looks in the PHP file index.php?i=mom and displays the image I'm looking for.</p>
  
  <p>But I need the javascript to be lighter as I have 30 images and for each one I have to modify and copy the script below. Is there not a simpler way to have the functions be different and still call a different page?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function mom()
  {
      var xmlHttp = getXMLHttp();
      xmlHttp.onreadystatechange = function()
      {
          if(xmlHttp.readyState == 4)
          {
              HandleResponse(xmlHttp.responseText);
          }
      }
      xmlHttp.open("GET", "index.php?i=mom", true); 
      xmlHttp.send(null);
  }
  function HandleResponse(response)
  {
    document.getElementById('mom').innerHTML = response;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My Trigger is this</p>
  
  <pre><code>&lt;a href="#" onclick='mom();' /&gt;Mom&lt;/a&gt;
  &lt;div id='mom'&gt;&lt;/div&gt;
  </code></pre>