Cross domain JSON requests da server di terzi

http://www.violato.net/blog/javascript/73-cross-domain-json-request

http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29

Retreiving JSON From Third Party Servers

This section comes with a bunch of warnings. Up until this point, JSON and AJAX has been relatively secure since you are communicating with servers under your control, receiving data that is under your control. With third party services all of this changes.

As of Internet Explorer 7 and Firefox 2, use of third party JSON data exposes your web page to malicious attacks and great security risks. The moment you request third party data you have given up control of your web page and the third party can do whatever they want with it from scraping the data and sending back sensitive information to installing listeners to wait for sensitive data to be entered.

For most trusted sources the only thing an external JSON request will get you is a bunch of useful data. However if the page making the third party request contains form elements, requires a secure/encrypted connection, or contains ANY personal or confidential data you absolutely, positively should NOT use third-party JSON calls on that page.

Before you attempt to use third party JSON data take a good, hard look at the page you are creating and now imagine that the worst sort of person is looking at that page with you. If you are uncomfortable with what that other person can do with the information displayed on that page, you should not be using third-party JSON calls.

Quite a few services are starting to offer JSON in addition to RSS/XML as data formats. Yahoo, in particular, is quite progressive at implementing JSON. What’s very cool about JSON is that the web page can directly request and process that data, unlike XML which must be requested by the server and then passed along to the browser. Unfortunately there is no RSS/FEED standard for JSON, though most services try to emulate RSS XML in a JSON structure.

For the following example we’ll use this site’s JSON feed, a simple one-to-one conversion of XML to JSON. The feed is even generated by the exact same program which generates the XML version, only the arguments passed on the URL determine which format is sent. The URL for this site’s feed is:

http://www.hunlock.com/feed.php?format=JSON&callback=JSONFeed

All third party JSON requests use the callback method where, once the JSON file has been loaded it will call a specific function, passing the JSON data as the first argument. Most services have a default function name they will call, and some services will allow you to change the name of the function which is called. My JSON feed will call JSONFeed() by default but you can change this by changing the name in the URL. If you changed the URL to read…

http://www.hunlock.com/feed.php?format=JSON&callback=processJSON

…now when the feed has been loaded it will call the function named “processJSON” and pass the JSON data as the first argument. This is fairly important when you are handling multiple JSON requests on your page.

All third party JSON requests are loaded via the tag, just like you would use to load external javascript files. What’s a little different is that we create the script tag manually and attach it to the page manually as well. This is a fairly simple process however and the code to do it is quite simple and readable. Here’s a small function which will accept a url and load it.

function loadJSON(url) {
  var headID = document.getElementsByTagName("head")[0];
  var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      newScript.src = url;
  headID.appendChild(newScript);
}

This function gets the (first) element of our page, creates a new script element, gives it a type, sets the src attribute to the url which is passed and then appends the new script element to the page Once appended, the script will be loaded and then executed.

Here is a very simple little program to get this site’s JSON feed and display the items.

function loadJSON(url) {
  var headID = document.getElementsByTagName("head")[0];         
  var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      newScript.src = url;
  headID.appendChild(newScript);
}

function processJSON(feed){
  document.writeln(feed.title+'<BR>');
  for(i=0; i<feed.channel.items.length; i++) {
     document.write("<a href='"+feed.channel.items[i].link+"'>");
     document.writeln(feed.channel.items[i].title+"</a><BR>");
  }
}


loadJSON('http://www.hunlock.com/feed.php?format=JSON&callback=processJSON');

This code creates a function to load third party javascripts (loadJSON) and a function to process the data it receives (processJSON). The last line calls loadJSON and passes it the URL to use. Once the script has finished loading it’s executed automatically which will call processJSON (because that’s the name we specified in the callback), and processJSON will loop through all the items in the file showing the article title as a clickable link.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...