Pull Remote Content Into Web Page (Super Easy)

There are several ways to pull remote content into a web page. This article describes a super easy method using Ajax.

1. Put one copy-and-paste JavaScript function into your web page, or import it from an external file.

2. Make a div with an id value.

3. Call the JavaScript function with (i) the URL to retrieve and (ii) the id value of the div where the content will flow into.

All done.

In this article, "remote content" means content that can be obtained with a URL. Generally, this would be a URL for the same domain as the web page. Content from other domains would need to allow Ajax requests.

Why?

Here are some ways website owners can benefit when publishing content using this system. Let this list stimulate ideas about how you could benefit by using the system at your own sites.

• News or other frequently updated content duplicatedon several pages can be maintained at one central page.

• A subscription form to be published on more than one page from one central file. In fact, pretty much any form gets a bonus benefit, even when they aren't repeated on multiple pages — publishing forms with Ajax is a way to hide them from form-spamming robots.

• Terms of service to be published in more than one place. When updating is required, only one central file needs to be touched — no more comparing several files to ensure they all read the same.

Life Example

Here is a live example using the system. The ad in the scrolling div is pulled in from the https://www.willmaster.com/possibilities/52/GiftYourself.php URL.

Implementation

To implement, the first thing to do is to put this JavaScript function anywhere in the web page source code. It can be pasted into the page or brought in from an external file.

<script type="text/javascript">
function PutURLintoDiv(url,id)
{
   var notAvailable = function() { document.getElementById(id).innerHTML = 'Not available.'; }
   var http = new XMLHttpRequest();
   if(!http) { notAvailable(); return; }
   http.onreadystatechange = function()
   {
     if(http.readyState == 4)
     {
         if(http.status == 200) { document.getElementById(id).innerHTML = http.responseText; }
         else { notAvailable(); }
      }
      else { notAvailable(); }
   }
   http.open("GET",url,true);
   http.send();
}
</script>

No customization is required with the above JavaScript. Just copy it and paste it into place.

To hook up the system, you'll need a div to flow the external content into and a line of JavaScript to get the content.

The div to flow the content into —

The div can be any div with an id value. Here is an example. It's id value is my-id.

<div id="my-id" style="border:1px solid #ccc; padding:.5em;">
[content to come]
</div>

The my-id id value may be changed to any other valid id value. And the div itself may, of course, be styled as you prefer.

The line of JavaScript to get the content —

The line of JavaScript (one line between script tags) to get the content can be anywhere on the page so long as it is somewhere below the div where the content is to be flowed into. Here's the JavaScript (two places to customize).

<script type="text/javascript">
PutURLintoDiv("/subdirectory/page.php","my-id");
</script>

Customization:

1. Replace /subdirectory/page.php with the URL of the content to be pulled in. A relative URL (as in the example) is preferred when pulling in from the same domain as the location of the web page.

2. Replace my-id with the id value of the div where the content will flow into.

You're done.

Here's an implementation recapitulation.

1. Put the copy-and-paste JavaScript function somewhere into your web page.

2. Create a div to flow the content into.

3. Create the line of JavaScript to get the content and flow it into the div.

You see how super easy it really is.

(This article first appeared in Possibilities newsletter.)

Will Bontrager