Javascript: achieving the Google Ad AJAX effect

Question

I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).

I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.

Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?

Answer 1

Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.

Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).

Answer 2

They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).

Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.

Answer 3

jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.

http://api.jquery.com/

http://docs.jquery.com/Ajax

Answer 4

You don't need iFrames and you don't need AJAX. It's really, really simple!

You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.

We do this all the time with media stored on separate sites. Here's an example.

YOUR SERVER: file.php (which outputs js)

<script>
document.write("I'm on a remote server");
</script>

OTHER SITE:

<script src='http://www.yourserver.com/file.php'&gt;&lt;/script&gt;

And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.

Answer 5

I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:

$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');

The example uses jQuery, but you can use it standalone as well.