Unable to load new HTML content on Ajax request

Question

I'm fairly new to the whole "backend" development.I set up a localhost wrote my html request with no visible syntax errors, but my new content still wont update the page.

<!DOCTYPE html>
<html>
<head>
    <title>Loading Html With AJAX</title>
</head>
<body>
<header><h1>Maker Bus</h1></header>
<section id="content"></section>
<script type="text/javascript" src="/Applications/MAMP/htdocs/loadingHtml.js"></script>
</body>
</html>




var xhr= new XMLHttpRequest();

xhr.onload=function(){
    //Server Check
    if(xhr.status==200){
        document.getElementById('content').innerHTML=xhr.responseText;

    }
};

xhr.open('GET' ,'http://localhost:8888/data.html',true);
xhr.send(null);

make sure your javascript is in script tag? and try changing url to relative url as 'data.html' — Shaminder Singh, Sep 02 '15 at 08:10

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

There are alot of things missing in this ajax request...including that you are using onload function which might be supported by your browser.Look at this link

1.You are not making a browser independent XMLHttpRequest like for IE we would need an ActiveXObject ...

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.You should use the onreadystatechange function(which gets called when the response is ready) what you used wont work as the response wont be ready at that time.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

3.The url to call to get the response from

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

For the full example read here

edited May 23 '17 at 12:04

Community

1
1

answered Sep 02 '15 at 08:15

cafebabe1991

4,928
2
34
42

this link: http://stackoverflow.com/questions/10642289/return-html-content-as-a-string-given-url-javascript-function – Shaminder Singh Sep 02 '15 at 08:17
OP uses `xhr.onload`, which fires when `readyState == 4` in xhr2 – Kaiido Sep 02 '15 at 08:23
Yes but as i said, in the updated answer it might not be supported in his browser, so i have put up a link there for him to go thru it. @Kaiido – cafebabe1991 Sep 02 '15 at 08:24
While it's good advices, it's really unlikely that OP used IE9 - or OperaMini for his tests, the problem comes from elsewhere. – Kaiido Sep 02 '15 at 08:29
I read that onload gets blocked by firefox as it needs XmlHttpRequest 2 – cafebabe1991 Sep 02 '15 at 08:30
where did you read that? It's part of xhr2 specs and firefox tries to comply the specs as much as it can. (xhr2 was implemented in 2012) – Kaiido Sep 02 '15 at 08:30
I misread it i guess..Firefox does support it version 4+. My bad. – cafebabe1991 Sep 02 '15 at 08:36

score 0 · Answer 2 · answered Sep 02 '15 at 09:21

simply type this function in your javacript files, am sure it will work for you.

function getContent(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var content = document.getElementById("content");
content.value  = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "data.html", true);
xmlhttp.send();
}

//ON YOUR BODY TAGS IN HTML PAGE 
<body onload="getContent()"></body>

This will absolutely work trust me i have been in the same situation for the whole week; please mark if you succeed.

You didn't insert it in script tags either... – Kaiido Sep 03 '15 at 00:04 — Kaiido, Sep 03 '15 at 00:04

Unable to load new HTML content on Ajax request

2 Answers2