2

What is the best way of loading the content of a html page into another webpage? Lets say i have a front page (index.php) where i can choose between PHP and javascript and i dont have to care about compatibiliy, mobile users etc.

In the past, i used the include()/include_once() function in php to do something like this to load the content of my content, which i have put in the content.html, into the div-container on my index.php:

<div id="content">
    <?php include("content.html"); ?>
</div>

But i could do pretty much the same thing using javascript/jquery:

$("#content").load("content.html");

But what is the best way to do it? I know that you cant really compare PHP to javascript. Normally i would only use javascript for user interface stuff. Especially with jquery's load() function its very easy to load content from a file into a div and replace PHP's include(). But just because it can be done, doesnt mean in should be done.

Is there any kind of best practice? What are the pros/cons on using javascript for this?

Timo
  • 105
  • 1
  • 7
  • 5
    It’s not about languages, it’s about server-side include (PHP) or client-side (JavaScript). – David Hellsing Dec 19 '13 at 08:32
  • Jquery's approach will cause extra request to your server... – Cthulhu Dec 19 '13 at 08:33
  • if you are preparing you content server side then include is used, if client side load is used, but it is not a good practice to use load.. – Raunak Kathuria Dec 19 '13 at 08:33
  • If someone has JS disabled the content wont load at all – Class Dec 19 '13 at 08:34
  • 2
    @Class I think we're past that now. If they have JS disabled they should just receive a message saying "Please power down device" – CodingIntrigue Dec 19 '13 at 08:35
  • Effectively both of them would be making server side calls as PHP would render the same on the server and then send the page accross while jquery would only refresh a prt of the page (which seems to be a good idea as my whole page refresh does not happen here). – Akshay Khandelwal Dec 19 '13 at 08:38
  • @Class you are right, but lets assume you dont have to bother about that. – Timo Dec 19 '13 at 08:40
  • What i get from your answers so far is that there is no harm in doing it in either javascript or php? For my latest projects, i only used php in the backend to manage the connection to databases and providing json data which i then work with in jquery. In this case, using "load()" would be my personal choice because i would handle all the frontend/user presentation stuff in javascript and only use php in the backend. – Timo Dec 19 '13 at 08:45
  • It all depends on what you pretend to show, I prefer doing the php include, the reason is with include you are showing the content always, with the load you can find the scenario of page loaded but when the browser requests the content.html your server is busy and don't shows the content... Other reason is web-crawlers, the google bot executes a little javascript (http://webmasters.stackexchange.com/questions/5653/does-the-google-spider-render-javascript) but I think it will give more relevance to a text in the document when it's requested than a text processed later. – Pablo Martinez Dec 19 '13 at 10:08
  • @PabloMartinez thats something i didnt have in mind. I guess for SEO critical websites, its always better to include through php. I will keep that in mind! – Timo Dec 19 '13 at 10:56

1 Answers1

3

Assuming that the HTML file you are including is not dynamic (not created in PHP, just static markup) then the PHP include is the preferred approach.

By using PHP include() the content will be on the page when it is first loaded in the browser, whereas a $.load() call will load after the page data is read by the browse, then javascript begins to render, then jQuery is loaded, THEN the $.load() is triggered asynchronously.

Also, $.load() requires jQuery, where as PHP include() is a built in function that is much faster than loading jQuery and firing of an asynchronous request via $.load();

If you need content to be loaded after the page first renders (i.e. as the result of user interaction) then $.load() is needed.

I would recommend that you read about the difference between synchronous (i.e. PHP include(), $.ajax({ asynch: false })) and asynchronous (i.e. $.load(), $.ajax()) resource loading, or network requests.

Here's one place you could look: http://www.w3schools.com/ajax/ajax_intro.asp

dtrenz
  • 599
  • 6
  • 14