Dynamically updating content of web page without refreshing it?

Question

I have a multi page site that when I select any of the nav links to go to another page it reloads the whole page every time. I think I can use AJAX and jQuery to make an XMLHttpRequest and give the body tag of each page an ID to target.

However, is there a better way to accomplish this? I've been searching everywhere for help and get a lot of stuff from several years back using the above method.

Thanks in advance for any help.

Answer 1

I think you want to build a Single Page Application (SPA).

There are many frameworks out there that can help you build such apps, like Angular, React, etc.

Answer 2

well you can obviously achieve that by using js frameworks that enable you build what is called a single page application (SPA) like angular,react,vue....check out angulars documentation

https://angular.io/

Answer 3

Angular is far too big for what you probably need. You can go for React, and if you install and run create-react-app it sets up everything (or almost) for you.

https://www.npmjs.com/package/create-react-app

https://github.com/facebook/create-react-app

Answer 4

Back in the days before frameworks be a thing, we use to keep the content in a frame and use javascript that refresh the page every x seconds.

look at this answer:

An Iframe i need to refresh every 30 seconds (but not the whole page)

Answer 5

I think the best way to achieve it is by making asynchronous calls to deliver desired content without reloading the entire page.

This can be done with Javascript or JQuery. JSON will be the protocol you will use to send data back and forth, so you can pass on parameters and get results from your queries using a quite simple XML based format.

But there is a lot of different ways to accomplish this. To improve your question I'd suggest you to follow the link below:

[ https://stackoverflow.com/help/how-to-ask][1]

For now, just to show you a general approach, you can use JQuery to call a PHP page that will feed back any content you need. It goes like this:

var params = {
    "param1" : param1_value,
    "param2" : param2_value,
};

var url = "page_to_call.php";

$.ajax({
    context : this,
    type    : "POST", 
    url     : url, 
    data    : params, 
    dataType: "json", 
    encode  : true
})
.done(function(data){
    console.log(data);
})

.fail(function(data){   
    console.log(data);
});

Whatever you want to return after this call can be send back like this:

<?php

$return = array();

$return["SOME_DATA"] = "some content here";

echo json_encode($return);

?>

Answer 6

Looks like you want to create a SPA or single page application. This would not be possible with simple HTML, CSS and JS. With vanilla JavaScript you can change the page without refreshing it but it would be pretty simple without the a lot of inputs being tested.

The best way to do what you wish to do is using a framework. The best framework for this would either be Angular, React or Vue.

Angular is a JavaScript based web framework for creating single page applications. Although it was initially on JavaScript but now with the new versions they have shifted it to TypeScript(a language similar to JS, but with some differences).

React is JS library that does the same thing pretty much, except it is a library not a framework. Framework is a complete thing that you need for development but library is more like additional tools that you can use to develop some additional things rather than coding it all by yourself that would take hundreds of lines just for the simplest things. More information is available here if you want something on frameworks vs libraries: What is the difference between a framework and a library?

Vue is a JS framework for that is used for creating user interfaces. It is not really SPA but can do the same thing with some other things.

These three can also be used with a full stack as a backend and a database of your choice. Although MongoDB is a very popular with the web development frameworks with extensive support in a lot of languages on the backend. So now you can use the database on the backend to update your page without refreshing it.

All three frameworks are very popular with a very vibrant community to help you figure things out when you get stuck. You should do a little more research as to what you want to do and then look into these three frameworks/libraries to decide what fits your expectations and then move forward with that. Hope this helps.