Loading offsite content with AJAX

Question

I'm building a PHP page that will load some off site content into a DIV. There are other static elements on the page also. The problem I'm having is that the page takes too long to load because PHP loads the off site content before displaying the page.

I am considering loading the off site content in the DIV via AJAX. I'm assuming the rest of the page would load regardless of how long it takes the AJAX DIV to load.

The content will not need to update or change while the original page is loaded. It just needs to load the content once.

I have been searching for a while and have found a lot of different techniques for doing this. Such as jQuery.

Do you have any suggestions on how to do this?

Any links to tutorials would be great.

Thanks

Answer 1

I guess this can help you:

$('#result').load('ajax/test.html');

Reference: jquery

Answer 2

If you control the second (off-site) domain, you can get around the same-origin policy issues by loading a script on the secondary domain. That script should kick off the various AJAXish content updates you want.

on example1.com:

<div id="stuff-from-example2"></div>
<script src="http://www.example2.com/js/stuff.js"&gt;&lt;/script&gt;

in stuff.js:

$('#stuff-from-exampl2").load('http://www.example2.com/fragment.html');

Answer 3

You can get around the same-origin policy by loading the data using JSONP.

Here are the JQuery docs