Here I will share how we can get data from another domain. Normally this will return an error as it’s involving cross domain, requested by one domain to another domain. This tutorial will be using PHP 5 along with jQuery.
First, let’s look at the source of the PHP file, (file name: process.php):
<?php
/*
* @author Mohd Rashidi Bin Mohd Zin ([email protected])
*/
$text = $_GET['text'];
$callback = $_GET['callback'];
if (!empty($text))
{
switch($text)
{
case 'Google':
$return = 'The Oracle';
break;
case 'Yahoo!':
$return = 'Morpheus';
break;
case 'MSN':
$return = 'Mr Smith';
break;
default:
$return = 'Who the heck?';
break;
}
echo $callback.'('.json_encode(array("result" => $return)).')';
}
?>
This is the file which will store on a different domain. As you can see, the file accepts two inputs; user’s input and name of the callback function. It is important to mention name of the callback function, otherwise Firefox will return an error “invalid label”, while other browser will not display anything.
In the end, the file will return a string consists of name of the callback function and the encoded JSON.
Using jQuery.getJSON we will send the request and process the response. Example of the script, assuming that the PHP file is stored at http://blog.mohdrashidi.com/tutorials/jquery_json/:
$(function() {
$('input#submit-json').click(function() {
var text = $('input#input-json').val();
$.getJSON("http://blog.mohdrashidi.com/tutorials/jquery_json/process.php?text="+text+"&callback=?"
, function(data) {
$('div#result').html('Result: '+data.result);
});
});
});
As you can see, this script sends user’s input to the PHP file resides on a different domain, and at the end of the string, it uses =?, you may as well replace this with name of your callback function. Using ? is much simpler and easier.
Finally is the HTML file itself which contains the Javascript, the input field as well as portion to display the result, (file name: index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JSON With jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$('input#submit-json').click(function() {
var text = $('input#input-json').val();
$.getJSON("http://blog.mohdrashidi.com/tutorials/jquery_json/process.php?text="+text+"&callback=?"
, function(data) {
$('div#result').html('Result: '+data.result);
});
});
});
</script>
</head>
<body>
<div id="get-input">
Enter name of a search engine you may know:
<input type="text" id="input-json">
<input type="submit" id="submit-json" value="Get Result">
</div>
<div id="result">
</div>
</body>
</html>
Once done, upload your HTML file to your preffered domain, or you may even try to run it locally. You may use the PHP file mentioned in the script for your testing purpose. To make the layout looks nicer, you may add some CSS into it.
Happy coding 😎
