I'm trying to create a website, and I'm trying to figure out how to load a page.
For example:
You click on the navigator "Home" then a the bottom of the screen It loads a page witch text saying for example "Hello Word!".
Does anybody know what to do? I'm pretty sure It involves JavaScript.
To dynamically load content, you could make an AJAX call using XMLHttpRequest().
In this example a url is passed to the loadPage() function, in which the loaded content is returned.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loadPage(href)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
}
</script>
</head>
<body>
<div onClick="document.getElementById('bottom').innerHTML =
loadPage('hello-world.html');">Home</div>
<div id="bottom"></div>
</body>
</html>
When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.
hello-world.html
<p>hello, world</p>
false defines whether request is going to be async or not. :Dopen(method,url,async)Ok, what you are looking for is a single page application.
There are plenty of technologies implementing it, but not that easy.
Here is a tutorial I followed for doing it : http://andru.co/building-a-simple-single-page-application-using-angularjs
If you want to go further with SPAs, you will certainly need angular templates.
It's not necessary to use Ajax calls to load html. Use them when need the server to process data successfully before loading the page, if processing was successful.
If you don't have this concern, and you just want to load the html without data processing, a simple anchor tag will suffice:
<a href="path/to/hello.html">click</a>
