Plain Javascript (no JQuery) to load a php file into a div

Question

Hi I don't know javascript but I am required to use it in one of my templates. I was googling around and found a solution whic is like this:

My Index.php file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("aside").innerHTML="<img src='loadingImage.gif'>";
if(XMLHttpRequest) var x = new XMLHttpRequest();
else var x = new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET", "other_content_1.php", true);
x.send("");
x.onreadystatechange = function(){
    if(x.readyState == 4){
        if(x.status==200) document.getElementById("aside").innerHTML = x.responseText;
        else document.getElementById("aside").innerHTML = "Error loading document";
        }
    }
} 
</script>
</head>

<body>

<div id="aside">This is aside</div>
</body>
</html>

My other_content_1.php file

<div id='other-content-1'>
<?php echo 'This text is loading via php command'; ?>
</div>

As this is the only Javascript function in my site I see no reason to load additional JQuery for it. I am sure there must be a way to do this with plain JavaScript / ajax without the need to load JQuery. Can anybody suggest the correct syntax to do so?

I want to happen asynchronously while the page continues to load.

That jQuery is probably cached in your browser anyway, so..why bother? Just google pure javascript AJAX tutorial — Itay Moav -Malimovka
– Itay Moav -Malimovka, Commented Jun 30, 2013 at 14:47
Really, why would you NOT want to use jQuery? The (great) answer below works but compared it to the jquery implementation. — frenchie
– frenchie, Commented Jun 30, 2013 at 14:53
I fully agree the rationale not to use jQuery, rock on! What browsers do you have to support? Some of these answers are great but in practice treat a lot of IE5 and IE6 edge cases where most sites only support IE8+ today. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jun 30, 2013 at 15:17
Hi guys! As mentioned by @heytools very correctly. Performance is the key to this template that is why I want to keep the size to minimal. Thanks for going through my question. — Vikram Rao
– Vikram Rao, Commented Jun 30, 2013 at 15:54

Patrick Evans · Accepted Answer · 2013-06-30 15:26:23Z

7

from http://www.tutorialspoint.com/ajax/ , using plain XHR (XmlHttpRequest)

function loadPage() {    
    var ajaxRequest;  

    try{
       // Opera 8.0+, Firefox, Safari
       ajaxRequest = new XMLHttpRequest();
     }catch (e){
       // Internet Explorer Browsers
       try{
          ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
       }catch (e) {
          try{
              ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
          }catch (e){
              // Something went wrong
              alert("Your browser broke!");
              return false;
          }
       }
     }

     ajaxRequest.onreadystatechange = function(){
       if(ajaxRequest.readyState == 4){
          var ajaxDisplay = document.getElementById('ajaxDiv');
          ajaxDisplay.innerHTML = ajaxRequest.responseText;
       }
     }


     ajaxRequest.open("GET", "ajax-example.php", true);
     ajaxRequest.send(null); 
}

loadPage();

edited Jun 30, 2013 at 15:26

answered Jun 30, 2013 at 14:49

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Patrick Evans Over a year ago

syntax errors mean that you have some character where isnt supposed to be. the above code doesnt have any syntax errors ( i just pasted in my javascript console and it ran without error) so you must have copied it or typed it wrong. Make sure it looks like this without any extra characters near the return false line.

Patrick Evans Over a year ago

make sure to change ajax-example.php to the page you are trying to get, and change document.getElementById('ajaxDiv'); to have the id of the element you are trying to put the html in.

Patrick Evans Over a year ago

this code is meant to be run in a function ill edit my answer to reflect

heytools Over a year ago

Sorry but this is a copy/paste from Internet, a general AJAX case that doesn't include many of the features required by the OP (waiting for the document to get ready, the loading image, the real tags IDs..), my answer was written especially for this question, and it's not getting any attention?

Patrick Evans Over a year ago

All he asked was for the correct syntax, and the code he showed implied it was just an example of what he seen on whatever page he was looking at, and not the code he was working with. @VikramRao, if you are using new code edit your answer to reflect the code you are currently using, as i have no idea what you are doing with loading.gif.

|

heytools · Accepted Answer · 2013-06-30 15:12:42Z

3

Try this:

window.onload = function(){
aside = document.getElementById("aside");
aside.innerHTML="<img src='loadingImage.gif'>";
if(XMLHttpRequest) var x = new XMLHttpRequest();
else var x = new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET", "other_content_1.php", true);
x.send();
x.onreadystatechange = function(){
    if(x.readyState == 4){
        if(x.status == 200) aside.innerHTML = x.responseText;
        else aside.innerHTML = "Error loading document";
        }
    }
}

And it is cross browser compatible, you never need the extra 32KB just to make a simple function supported cross browser.

edited Jun 30, 2013 at 15:12

answered Jun 30, 2013 at 14:56

heytools

7824 silver badges16 bronze badges

5 Comments

heytools Over a year ago

Not sure why it wouldn't work in there, maybe try x.send(""); instead of x.send(); ?

heytools Over a year ago

Try replacing the 3 "aside.innerHTML =" with "aside.firstChild.data ="

heytools Over a year ago

So put back to innerHTML... and try x.open("GET", "other_content_1.php", 1); OR x.open("GET", "other_content_1.php"); instead of x.open("GET", "other_content_1.php", true);

heytools Over a year ago

I guess that would perfectly make the subject of a new question in SO, something like: "Which part of my code isn't supported by IE 6&7?"

Vikram Rao Over a year ago

Ok here you go. Except IE6 it works in all browsers. As suggested by you, I will open a new question right away for IE6 issue.

Collectives™ on Stack Overflow

Plain Javascript (no JQuery) to load a php file into a div

2 Answers 2

8 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related