This is a post that many users were looking for : The RJSON tutorial for jQuery. As soon i’m moving i’ll upload the sample files and more other post i were using along the time the blog was “frozen”.
Thanks.
==========
Hello.
My most recent development was to make “talk” two web application using json as “protocol” of communications . I tried to use $.getJSON and $.ajax in order to use jsonp and make the communication. Really jQuery website do not have enough documentation to how do that, even in the example.
For us, who have firebug, was completely useless because IT DO NOT DEBUG jsonp request!!!!, so what is the real problem???
i want to share with you my solution for this problem, and also the problem of the famous “callback”.
1. understanding jsonp
JSONP is really cool, lighter than xml and soap and really can save for us a big quantity of time. JSONP require to have the same callback variable in order to work!
Now, how to get a sucessfull JSONP using php…
2. requirements
- XAMPP
- Two virtualhosts to make the communication: 1. the start site, and 2. the remote site.
- if you need more comprehension about the sctructure of the jsonp return, use the cfdump jquery plugin here
- JSON-PHP. This class is really usefull if you want to export to json a query, struct, array as json… You can get it here
3. start the practice!!!
in order to work, we need to create in xampp root folder a new folder, as we can call “project” :
- x:\xampp\pproject
Under “project” we create other two directories : “remotesite” and “localsite”:
- x:\xampp\project\remotesite
- x:\xampp\project\localsite
REMEMBER! in the remote site and localsite is supposed to have the same REQUEST variable as “callback”. you will see in the php code… for example, our remote server accept jsonp request when the variable is called “jsonp_request”:
<script language="javascript" type="text/javascript">
$.getJSON("http://myremotesite/listener.php?function=testjsonpjsonp_request=?",myfunctioncallback);
</script>
if you want to use “callback”, the remote site also MUST HAVE jsonp_request:
<?php
$myarray[0]="test";
$myarray[0]["text"]="text";
$myarray[1][0]="test";
$myarray[1][1]="test";
$myarray[2]="test";
$myarray[3]="test";
echo $_GET['jsonp_request']."(".$json->encode($myarray).");";
?>
It is important to do not add values to the variable and just add “?” in order to avoid cache problems, every request have a unique id and ? help us to create all the time a new id for the request.
First, the config of the virtualhost for x:xamppapacheconfextra, look for httpd-vhost.conf and add this content:
listen 5001
<VirtualHost *:5001>
DocumentRoot /XAMPP/projects/localsite
<Directory "/XAMPP/projects/localsite">
Options All
Order allow,deny
Allow from All
</Directory>
</VirtualHost>
listen 5002
<VirtualHost *:5002>
DocumentRoot /XAMPP/projects/remotesite
<Directory "/XAMPP/projects/remotesite">
Options All
Order allow,deny
Allow from All
</Directory>
</VirtualHost>
a. this file is supposed to be located in the start site, and we will call “index.html”…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test jsonp</title>
</head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
function testjsonp(){
// you can try with JSONP
$.getJSON("http://localhost:5001/listener.php?function=testjsonp&callback=?",retorno);
//or if you feel comfortable with $.ajax you can uncomment the next line
/*$.ajax({
dataType: 'jsonp',
data: 'function=testjsonp',
jsonp: 'jsonp_callback',
url: 'http://localhost:5001/listener.php',
success: retorno
});*/
}
function retorno(e){
$.dump(e);
}
</script>
<script src="js/jquery.dump.js">
<body>
<label>
<input type="button" name="Button" id="button" value="Test" onclick="testjsonp()" />
</label>
</body>
</html>