Documentation
T2A API Documentation
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 = "https://api.t2a.io/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 = "https://api.t2a.io/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( "https://api.t2a.io/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:-
- Create a .php file to process an Ajax request; we'll call it
iploc.php
- Your Ajax request will use
iploc.php
on your domain (and thus avoiding cross-domain security issues). - 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.