Question

First off, this site has helped me immensely through some school projects, and I hope my question is specific enough for some answers.

What I’d like to do is change the content of a div on my page (lets call it ‘#content’), while also somehow allowing for direct access to the various “pages” that would be created by changing the div’s content.

For example, lets say that “foo.com/home” is to be the home page. The ‘#content’ div would need to get filled with the code for the home page, while the other elements around it remain static (such as the header, footer, and navigation divs). Likewise, “foo.com/forum” would fill ‘#content’ with the code for the forum, and other pages would do the same.

Currently, I’m simply checking the hash at the end of the URL, and then using jQuery’s load() method to load my various code into ‘#content.’ However, in addition to the fact that using the hash for navigation seems finicky on mobile browsers, it also just feels wrong to me.

I was thinking of using PHP, and then just using PHP includes to change what code is loaded into ‘#content’ based on the URL. For example, “foo.com/page=forum” would fetch a page that is the same (layout wise) as the home page (header/footer, navigation, etc.), but would just include a different file for ‘#content.’ However, this will reload the ENTIRE page, and not just ‘#content’ right?

Ideally, I’d like to use some sort of AJAX call to reload just the ‘#content’ div, but, other than editing the URL hash, I’m not sure how to do this while also allowing for bookmarks and such. I’d like users to just be able to go to “foo.com/home” or “foo.com/forum” and end up with the “template page” (header/footer, nav) filled in with the correct content.

Again, sorry if this is a poorly worded question. I’ve done some research, but can’t seem to work out the best way to get this done. Thanks in advance — any tips are appreciated.

Answer 1

Check this example code:

         var xmlhttp;
         if (window.XMLHttpRequest)
            {
           xmlhttp=new XMLHttpRequest();
            }
         else
            {
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
         xmlhttp.onreadystatechange=function()
            {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
             document.getElementById("content").innerHTML=xmlhttp.responseText;

          }
          } 
           var usernm = document.getElementById("username").value;
           var pwd = document.getElementById("password").value; 
           var params = "username=" + usernm + "&password=" + pwd; 
           xmlhttp.open("POST","phpfile.php",true);
           xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
           xmlhttp.send(params); 
          //xmlhttp.send(); without parameters