Loading a page via Ajax into Div Best Practice?

By | January 12, 2018
Questions:

I’m using the method below to load a remote page into a div I have on the page.

$('#result').load('www.myurl.com/results.html');

I’m curious, is it a bad practice to load an entirely formatted HTML page within another page? My concern is more towards loading css or additional javascript includes that might overwrite other elements on the primary page.

I haven’t experienced any issues during my initial tests, I’m just not sure if this is the best practice.

To Clarify: If I have a primary page like so

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="mycss.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <div id="remoteContainer"></div>
       <script>
          $('#remoteContainer').load('www.myurl.com/results.html');
       </script>
    </body>

And results.html code that looks like this:

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="myResults.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <header>        
           <h1>My Results Page</h1>
       </header>
       ...
    </body>

Will the CSS and JS overwrite each other,or will the pages function as 2-separate entities?

Answers:

This will work fine and the browser will handle it properly. From the jQuery docs:

… browsers often filter elements from the document
such as <html>, <title>, or <head> elements. As a result, the elements
retrieved by .load() may not be exactly the same as if the document
were retrieved directly by the browser.

However, it’s probably better practice to specify the element in the returned HTML that you want to insert:

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');

Questions:
Answers:

Ok, so maybe I should have just taken a look at DevTools before I asked the question.

After reviewing the Element Inspector, I now see that (at least in Chrome) that the browser strips out the HTML, HEAD, and Body tags. It also removes the additional jquery include. However it does leave the

<script>my js functions here</script>

Although I understand that I can’t trust that all browsers will be as efficient, at least now I have seen the light.

Questions:
Answers:

I agree that it ‘should’ work ‘fine’. But consider the extra overhead you are creating that could be eliminated by returning only the content that you need from the server. You might be hitting the database to retrieve data that is rendered in the parts of the page that you are discarding. For example, you might have information about the user displayed at the top of every page. Or you might be looking up other information that goes into your page meta tags in the head. You probably have some type of server side templating going on to create these excess parts of the page. Then you are putting this excess content in a response, sending it over a wire, then asking the browser to parse it, create html elements out of it, then remove the parts that are not wanted for you.

This may not be a big deal. It depends on how much traffic you get, how much extra work the server is doing to render the full page, how much of a load the server is under, and how much time/money/man power you have versus how much it would take to be able to send a trimmed down response instead. If it’s a small project, with light traffic, it might not be worth changing. But it’s also probably an easy change to make. And since the question is about a best practice, I would say no, loading a full page to render just a portion of the page not a best practice. The best practice is to return just what you need from the server, and to use all of it to update the page. This could be pre-rendered HTML or it could be JSON, but that is another discussion altogether.

A trivial solution in PHP could be as simple as the following, using ?format=ajax in your query string:

<?php
$ajax = $_GET['format'] == 'ajax';

if (!$ajax) {
    render_head_and_stuff();
}

render_results();

if (!$ajax) {
    render_footer_and_stuff();
}

Leave a Reply

Your email address will not be published. Required fields are marked *