Signup Login

Using T2A from JavaScript

Introduction

Developers experienced in using external web services from JavaScript may wish to skip this section.

Cross-Domain Ajax

For reasons of web browser security, it is not normally possible to load scripts from one domain into another. For example, the following are prohibited:

  • Issuing an XMLHttpRequest() to another domain (a core component of Ajax).
  • Accessing or modifying the DOM of a <frame> or <iframe> which has a src attribute with another domain.
  • Accessing or modifying another window (or tab) which has a different location.

Therefore, it is not possible to use T2A directly from Ajax on your web pages, because your Ajax request will be to a domain other than your own.

We now demonstrate three solutions to this problem.

Solution 1 - Raw JavaScript

This section demonstrates how to securely use T2A from client-side JavaScript, without using a JavaScript Library such as jQuery.

We will use a technique known as on-demand JavaScript, to force the web browser to load an external Javascript source, which in this case, is a T2A JSON response.

These examples use PHP.

Obtain a Temporary JavaScript Key

In your server-side scripting, obtain a JavaScript key. This example uses PHP:-

<?php
$js_key = ""; //the temp key
$api_key = ""; //set your API key here
$url = "http://t2a.co/rest?"
. "method=javascript_key"
. "&api_key=" . $api_key
. "&lifetime_minutes=" . (2 * 60) // Life time in minutes (max 24 hours)
. "&domain=t2a.co"; // Replace with your website's domain
// Fetch XML from T2A API
$result = simplexml_load_file($url);
if ($result && $result->javascript_key)
{
  $js_key = (string)$result->javascript_key;
}
?>
	

The temporary key is stored in the server-side variable $js_key in the example above.

Action a Client-Side Request to T2A

Using the temporary key, we may now send a request from the browser, to T2A.

This is done by inserting a <script> tag into the DOM, where the external JavaScript is actually a request to T2A (JSON). This does not violate browser security.

The resulting JavaScript object returned from T2A can easily be accessed.

The JavaScript is part of a server-side script, in this case PHP. This allows the temporary key to be written into the HTML:-

// generic function to insert a script tag to execute the url
// which is an external JavaScript (JSON)
function get_json(url)
{
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  head.appendChild(script);
}

// set a javascript variable, note that this is actually written by the
// PHP to set the temp key
var javascript_key = "<?php echo $js_key; ?>";

// Fetch JSON from T2A API
// this is using the method ip_country
// note that we use the callback function to make the resulting
// JSON be sent to our parse_json function
window.onload = function()
{
  var url = "http://t2a.co/rest?"
  + "method=ip_country"
  + "&javascript_key=" + javscript_key
  + "&output=json"
  + "&callback=parse_json";
  get_json(url);
}	
	

The function we use to parse the JSON is shown below. Here, we use simple JavaScript alert boxes to show the result or error:-

function parse_json(result)
{
  if(result.status == "ok")
  {
    alert('Your IP address is ' + result.ip_address + ' and your country code is ' + result.country_code);
  }
  else
  {
    // report error
    alert(result.error_code);
  }
}	
	

Solution 2 - jQuery

Using jQuery simplifies the process of sending the client-side request to T2A.

The example below is in PHP. As with the raw JavaScript example above, we have obtained a temporary key (see above), stored in the server-side variable $js_key.

This is written into the HTML markup by PHP, so that it can become a client-side variable called javascript_key.

The jQuery functions are then used to send and process the JSON request to T2A:-

// set a javascript variable, note that this is actually written by the
// PHP to set the temp key
var javascript_key="<?php echo $js_key; ?>";
$(document).ready(function(){
  // Fetch JSON from T2A API
  $.getJSON(
    "http://t2a.co/rest?callback=?",
    {
      'method' : 'ip_country',
      'javascript_key' : javascript_key,
      'output' : 'json'
    },
    // Function to parse resulting JSON
    function(result) {
      // Check for errors
      if(result.status == "ok") {
        alert('Your IP address is ' + result.ip_address + ' and your country code is ' + result.country_code);
      } else {
        // report error
        alert(result.error_code);
      }
	}
  });
});
	

Solution 3 - Use Ajax

You could use Ajax to access T2A by creating a server-side component on your own web server which receives the Ajax request, and then communicates with T2A.

For example, if you were using the ip_location method on a PHP website:-

  1. Create a .php file to process an Ajax request; we'll call it iploc.php
  2. Your Ajax request will use iploc.php on your domain (and thus avoiding cross-domain security issues).
  3. The php will send a request directly to T2A from the server, and will echo the response back, to the client-side Ajax component.

In effect, iploc.php is a proxy, allowing you to use Ajax.

Next: .NET Developers and the SOAP API