weird ajax behavior-commented code breaks the request?

Question

I don't understand this. I have an innerHTML request.

<a href="javascript:void(0)" onclick="getData('/includes/hello.php', 'targetDiv')"></a>

<div id="targetDiv"></div>

One of the includes is:

<?php
echo ("Hello, world");
?>

and works fine, but if I do:

<?php
echo ("Hello, world");
?>
<!--
lots of code I'm trying to debug
-->

it doesn't work.

Why?

getData:

<script language = "javascript">
      var XMLHttpRequestObject = false;

      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);

          XMLHttpRequestObject.onreadystatechange = function()
          {
            if (XMLHttpRequestObject.readyState == 4 &&
              XMLHttpRequestObject.status == 200) {
                obj.innerHTML = XMLHttpRequestObject.responseText;
            }
          }

          XMLHttpRequestObject.send(null);
        }
      }
    </script>

Answer 1

It looks mostly likely to be a bug in your PHP code rather than your javascript code. I recommend that you type in the PHP script's URL into your browser and check if it produces the expected output. Better still I recommend that you install firebug. That will allow you to check each and every ajax request as it happens. Better still it will allow you to debug your javascript and inspect variables.