Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Yes you do need Ajax, because by definition, that is what Ajax is. ESPECIALLY if you want to grab content from <em>another</em> website.</p> <p>I know you said you want to use plain javascript, but check this out, maybe you'll like this. Take a look at this awesome jQuery plugin. <a href="https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/" rel="noreferrer">https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/</a></p> <p>It <strong><em>VERY SIMPLE TO USE</em></strong> it let's you perform Ajax sing jQuery with one VERY BIG DIFFERENCE: you can grab content from <strong><em>ANYWHERE</em></strong> (e.g. another website where your content comes from). You just use the same jQuery.load() method or .ajax() method just like you would on your own server, except you can grab content from anywhere!</p> <p>Just add the plugin script to the page (after jQuery), then use the .load() method as described <a href="http://api.jquery.com/load/" rel="noreferrer">here</a>. </p> <p>So in your case, you can do something like this:</p> <pre><code>$('div#target').load('http://somewhere.com #newContent'); </code></pre> <p>That will get #newContent from somewhere.com and place it inside #target on your site.</p> <p>You could do something like this using javascript's <a href="http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/" rel="noreferrer">setInterval</a>:</p> <pre><code>setInterval( function() { $('div#target').load('http://somewhere.com #newContent'); }, 5000); //repeat function every 5000 milliseconds </code></pre> <p>That will repeat whatever is inside the function(){} every 5000 milliseconds (aka 5 seconds).</p> <p>You can also get content from your own site:</p> <pre><code>$('div#target').load('http://yoursite.com/some-page #someContent'); </code></pre> <p>That will put #someContent and whatever is inside of it from <a href="http://yoursite.com/some-page" rel="noreferrer">http://yoursite.com/some-page</a> into #target on <a href="http://yoursite.com/whatever-the-current-page-is" rel="noreferrer">http://yoursite.com/whatever-the-current-page-is</a></p> <p>All in all, this is a super simple way to load content. jQuery is only 31kb in size (minified), and I believe it's worth it. There's no need to reinvent the wheel when jQuery can do what you want, and efficiently at that, unless you are trying to learn javascript in and out. If you just want your site to work (the end result is what matters), then give the <em>super simple</em> method i just explained a try.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload