Member Avatar for rayidi

Hi Friends,

Please check this code where i was did wrong ? thanks in advance.

<button type="button" onclick='showData()'>Edit</button>
<script type="text/javascript">
			function showData()
			{
			if (window.XMLHttpRequest)
			  {// code for IE7+, Firefox, Chrome, Opera, Safari
			  xmlhttp=new XMLHttpRequest();
			  }
			else
			  {// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			xmlhttp.onreadystatechange=function()
			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
				document.getElementById("emp_body").innerHTML=xmlhttp.responseText;
				}
			  }
			xmlhttp.open("GET","../xmlData/sample.php",true);
			xmlhttp.send();
			alert("Its Working");
			}
			</script>

The Alert code at the end of the code is displaying but the xmlhttp.open is not working.. please help

  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by rayidi

Dani AI

Generated

A quick note up front: that final alert only proves the click handler ran, not that the request succeeded. Put your verification inside the response handler. Also, +1 to on variable scope: always declare your request object so you do not create an accidental global.

Here is a small, defensive pattern you can drop in. It guards against missing targets (the kind of selector mismatch that tripped ), surfaces HTTP errors, and avoids cached GETs.

function showData() {
  var el = document.getElementById('emp_body');
  if (!el) { console.error('Missing #emp_body element'); return; }

  var xhr = new XMLHttpRequest();
  xhr.open('GET', '../xmlData/sample.php?ts=' + Date.now(), true); // cache-buster
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        el.innerHTML = xhr.responseText;
      } else {
        console.error('Request failed:', xhr.status, xhr.statusText);
      }
    }
  };
  xhr.onerror = function () { console.error('Network error or CORS issue'); };
  xhr.send(null);
}

If it still does not work, check these quickly:

  • Open the URL in a new tab to confirm it returns 200 and the expected markup.
  • Verify the selector before sending: if (!document.getElementById('emp_body')) { /* fix DOM or selector */ }.
  • Watch the Network tab for 404/500 or CORS errors (especially if you later move sample.php to another host/port).
  • Ensure the DOM is loaded before calling showData() (e.g., bind the click after DOMContentLoaded).
  • Bust caches on GETs (as shown) or set no-cache headers on the response.

Recommended Answers

All 3 Replies

Member Avatar for Taywin

The alert() function does nothing to check whether your xmlhttp is working. Is your xmlhttp variable global? In other words, do you declare it somewhere and is being used somewhere else too? The reason is that I do not see you declare the object inside your function at all. In JavaScript, simply use a variable name in a function results in creating/assuming the variable is global - dangerous.

Let see if you actually get xmlhttp object created by inserting alert(xmlhttp) right before line 12.

commented: Reasoning +1
Member Avatar for rayidi

I had used so many xmlHttp finctions. when i was wrote alert(xmlHttp) its printing

[object XMLHttpRequest]

.

Please help me. Thanks in advance.

Member Avatar for rayidi 
<div class='emp_body' id='fields'>

Got it. I didn't mention the id. i thought the class is the id. now its working fine.

Thanks All

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.