Display Cross Domain Data with Jquery JSON Callback.
Wall Script
Follow Me:
Tuesday, December 08, 2009

Display Cross Domain Data with Jquery JSON Callback.

Some days back I had posted a tutorial about parsing JSON data with jQuery .getJSON(). In this post I want to explain about 'How to use JSON callback and to display cross domain data with jQuery'. It's simple and useful. Take a look at this live demo
Cross Domain

Previous Post:Display JSON Data with jQuey

Live Demo

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)

Just copy and paste this following code between <body> tag. You can display 9lessons data.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript" src="http://demos.9lessons.info/9lessons.json.js"></script>
<link href="http://demos.9lessons.info/9lessons_json.css" rel="stylesheet" type="text/css">
<ol id="9lessons" class="jsonbox"></ol>


9lessons.json.js
Javascript code read the JSON file.


$(document).ready(function()
{
$.getJSON("http://demos.9lessons.info/9lessons_json.php?count=5&jsoncall=?",function(data)
{
$.each(data.posts, function(i,data)
{
var jsondata ="<li>"+data.message+"</li>";
$(jsondata).appendTo("ol#9lessons");
});
}
);
return false;
});


9lessons_json.php
Contains PHP code displaying results from Messages table in JSON format.
<?php
include('config.php');
if($_GET['count'])
{
$count=$_GET['count'];
$count=mysql_real_escape_string($count);
$sql=mysql_query("select msg from messages order by msg_id desc limit $count");
echo $_GET["jsoncall"].'({"posts": [';

while($row=mysql_fetch_array($sql))
{
$message=$row['message'];
echo '
{
"message":"'.$message.'",
},';
}

echo ']})';
}
?>

9lessons_json.css
*{margin:0px; padding:0px;}
ol.jsonbox {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
color:#FFFFFF;
list-style:none;
width:300px;
padding:10px 10px 25px 10px;
background:url(http://demos.9lessons.info/jsonlogo.png)
bottom right no-repeat;
background-color:#333333;
text-align:left
}
ol.jsonbox li { padding-bottom:4px}
ol.jsonbox li a{color:#80c8e5; text-decoration:none}
ol.jsonbox li a:hover{color:#80c8e5; text-decoration:underline}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


18 comments:

  1. Wowwww,Its really usefull for me. I just get idea after readed this tutorial. thx

    ReplyDelete
  2. doesnt work with real cross-domain!!!

    ReplyDelete
  3. Nice insight on cross domain communication.

    But giants like facebook, google and yahoo use the famous iframe technique combined with javascript hacks to make this work for all kind of cross-sub-domain stuff.

    Here is a brief on how to do the same http://bit.ly/8BrgT8

    ReplyDelete
  4. I have tried this..

    But it throws me error ...

    json cross domain Access to restricted URI denied" code: "1012 xhr

    ReplyDelete
  5. Mnay great scripts/tuts here Sriniva - however : can u please configure your Retweet button to RT @9lessons and not RT @tweetmeme ? its basically futile this way - know what I mean ? Wishing you continued future success within all your future life & career endeavors :)

    Mia 

    ReplyDelete
  6. @Mia Zoe

    Thank you. I configured RT@tweetmeme to Rt@9lessons

    ReplyDelete
  7. Nice post. Thank you for this article

    ReplyDelete
  8. I like all your post.. the reason is that you have given with a demo...

    ReplyDelete
  9. Good site, congrulations ..

    I have a question dear friend .Why does jquery effects disappear when I load a php page into a div?
    wilfolightfire18@hotmail.com

    ReplyDelete
  10. hi nice work but, how can we use in wordpress?

    include('config.php'); ? how can crea config.php

    ReplyDelete
  11. if ($count=(int)$_GET['count'])

    no use of

    if($_GET['count'])
    {
    $count=$_GET['count'];
    $count=mysql_real_escape_string($count);

    ReplyDelete
  12. thanks for the tutorial. I've been fixed my code now. Why you don't put in your php code,
    //this is php code
    header('Content-Type: application/json');
    //end php code
    In my opinion, it can be usefull to recognize the call back type.
    Success for you

    ReplyDelete
  13. how to make this comment section ...

    ReplyDelete
  14. hello its not working in cross domain i give Permission denied to access property 'body' error please give me solution?

    ReplyDelete

Make in India