CODEWITHSUNDEEP
javascriptjqueryjsonasynchronousjsonp
user984621
user984621

Reputation: 48443

How to put into HTML code that will load data from another server?

I am interested in the functionality of Disqus - a user will put code from Disqus and this code will remotely fetch the data necessary. Here's an example of what Disqus provides the user:

<script type="text/javascript">
  var disqus_shortname = 'domainname';
  (function() {
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
     dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
</script>

I am unfortunately unfamiliar with this concept: I have read that this technique uses asynchronous javascript and JSONP, but could you give me a basic example of how can I make this work with something similar? For example, how can I load data this way from a remote database and display them into user's page?

Upvotes: 1

Views: 167

Answers (1)

Bjoern Rennhak
Bjoern Rennhak

Reputation: 6936

The technique as you correctly state is from the XHR family. Often people also use the terminology AJAX without realizing the real meaning behind it. People tend to utilize XHR without XML often relying on other data exchange formats (think container) such as JSON or JSONP. The container format is quite different from the technique used to actually callback to the server. Recently since HTML5 also the PushState method has become widely popular. For beginners I would suggest jumping into the cold water directly with PJAX as it is the most recent development and rather widely supported. Here is a working example for PJAX. Otherwise if you like to rely on full client side only via e.g. jQuery you can do that too.

These days more and more popular are client side MVC or templating engines which consume JSON and render directly on the client. One popular framework for this is e.g. EmberJS. A more rudimentary approach trying to separate logic and markup which consumes JSON is e.g. Mustache.

Here is a very basic example with pure JavaScript you can fiddle around.

Upvotes: 2

Related Questions