1

This is a question based purely on my own curiosity. I don't have a problem that needs answering, nor do I have any idea myself how this would be done.

I was wondering if it would be possible using PHP to get the contents from another page and display it in place of the current content on the page you're on. In a way, to try and avoid refreshing the page.

For example:

Say I have my "homepage", with a slider and some main information but nothing much more.

I then click on "About" and rather than it moving to another page and refreshing, it simply grabs the elements inside the main containing div on "About" and replaces the existing contents on the "homepage", keeping everything intact and it appears you've moved page even with the URL, but you've actually not moved.

Would this be possible, and if so would anyone be able to give a small explanation/a link to somewhere that I would be able to learn this side of Web Development (My next goal to learn). And more importantly, is it a good thing to do or are there some limitations/issues with doing this?

Natan Streppel
  • 5,759
  • 6
  • 35
  • 43
Mallander
  • 336
  • 3
  • 16
  • 2
    You would need a javascript call to a PHP (or any other backend language) and replace a certain element with the result of the PHP script. Ajax would be a good search term for you :) – jvv May 07 '14 at 13:45
  • You might find a lead here : http://stackoverflow.com/questions/16601139/loading-content-via-ajax – OpenStark May 07 '14 at 13:46
  • This is the basic principle of AJAX. – WillardSolutions May 07 '14 at 13:46
  • Thanks for all the responses! I wasn't sure whether it was AJAX or PHP that would be used for something like this, so I took a gamble with the title (And inevitably got it wrong). – Mallander May 07 '14 at 13:53

3 Answers3

2

Yes, but not with PHP.

Let's suppose you have <div id="content"> wrapping your page's content.

You can use AJAX to load about.php, then parse the response to find <div id="content">, get its contents, and drop that in the current document's content area.

However, keep in mind that there are problems with this approach. For instance, what should happen if you click more than once before the new page has loaded? What happens to the URL, should a user reload the page?

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Thanks for the fast response! I had a feeling it was possible. So It's not really best practice to do this unless there are a lot of counter-measures in place to make sure that users can't "bug" it up? – Mallander May 07 '14 at 13:48
  • Just addition to the problem with changing urls without reshreshing page: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – MSadura May 07 '14 at 13:51
  • Ahh, interesting. It doesn't seem anywhere near as complicated as I though it was going to be, reading that makes it seem simple. However I'm going to look into it much more considering what you've all said in regards to it being a bit risky. – Mallander May 07 '14 at 14:10
  • I actually use a technique similar to this on my newest secret project, however because it is essentially the browser-based equivalent of a text-based RPG, the player's state is always known and therefore URLs are unnecessary. However, in most cases, you should ensure that normal URLs work as expected. – Niet the Dark Absol May 07 '14 at 14:14
1

A lot of sites do that these days: Medium, Twitter, Youtube etc. Mostly big boys, because it's hard to get right.

Tech:

  • AJAX to get the contents of the next page
  • history.pushState() to change the URL

The back-end language (eg PHP) doesn't matter.

I don't know a tutorial on the whole, but finding ajax or pushState explanations is easy.

It's not a good practice though. Page loads exist for a reason. Browsers like explicit page loads.

Rudie
  • 52,220
  • 42
  • 131
  • 173
  • You mention that not refreshing your page isn't a good practice. This is not true. I develop all the time SPA. It's ideal for administration software. The only thing you have to be aware of is that you do not have memory leaks and you have to be on a decent Javascript level. – GuyT May 07 '14 at 13:53
  • For an app, loading in data only, it might be very useful. For a normal website with a lot of context changing, it's silly. And it's very hard to do right. Even YT and Twitter's implementations blow. No loading indication etc. – Rudie May 07 '14 at 13:55
  • The app where I'm talking about is a normal website. The only difference is that people only use it for administration and therefore is a refresh annoying(and way to slow). IMHO I prefer SPA rather then normal websites. The only hard part is SEO, but Google tries to minimize this problem by using a hashtag in the URL. The problem that the 'big boys' are facing is that they do not use an enterprise JS toolkit(like Dojo). FB has a nice SPA! – GuyT May 07 '14 at 13:59
  • If speed is the reason, every website should do it. Slow websites are annoying for everyone, not just for continuous users. If a page load is slow, you should fix that IMO, not hack around it. – Rudie May 07 '14 at 14:01
  • When you have a SPA you've no flickering(reload), only has to load when you open the page(longer as normal, but everything will be loaded at once). Much more user friendly, .. – GuyT May 07 '14 at 14:03
1

PHP is Server side, so no manipulation of the page can be done after it has been loaded by the browser. You have to use JavaScript (AJAX) to load parts of the page on user action.

Take a look at jQuery

Jonas Köritz
  • 2,606
  • 21
  • 33