Simple jQuery, PHP and JSONP example?

Question

I am facing the same-origin policy problem, and by researching the subject, I found that the best way for my particular project would be to use JSONP to do cross-origin requests.

I've been reading this article from IBM about JSONP, however I am not 100% clear on what is going on.

All I am asking for here, is a simple jQuery>PHP JSONP request (or whatever the terminology may be ;) ) - something like this (obviously it is incorrect, its just so you can get an idea of what I am trying to achieve :) ):

jQuery:

$.post('http://MySite.com/MyHandler.php',{firstname:'Jeff'},function(res){     alert('Your name is '+res); }); 

PHP:

<?php   $fname = $_POST['firstname'];   if($fname=='Jeff')   {     echo 'Jeff Hansen';   } ?> 

How would I go about converting this into a proper JSONP request? And if I were to store HTML in the result to be returned, would that work too?

Answer 1

When you use $.getJSON on an external domain it automatically actions a JSONP request, for example my tweet slider here

If you look at the source code you can see that I am calling the Twitter API using .getJSON.

So your example would be: THIS IS TESTED AND WORKS (You can go to http://smallcoders.com/javascriptdevenvironment.html to see it in action)

//JAVASCRIPT  $.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){     alert('Your name is '+res.fullname); });  //SERVER SIDE   <?php  $fname = $_GET['firstname'];       if($fname=='Jeff')       {           //header("Content-Type: application/json");          echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';        } ?> 

Note the ?callback=? and +res.fullname

Answer 2

First of all you can't make a POST request using JSONP.

What basically is happening is that dynamically a script tag is inserted to load your data. Therefore only GET requests are possible.

Furthermore your data has to be wrapped in a callback function which is called after the request is finished to load the data in a variable.

This whole process is automated by jQuery for you. Just using $.getJSON on an external domain doesn't always work though. I can tell out of personal experience.

The best thing to do is adding &callback=? to you url.

At the server side you've got to make sure that your data is wrapped in this callback function.

ie.

echo $_GET['callback'] . '(' . $data . ')'; 

EDIT:

Don't have enough rep yet to comment on Liam's answer so therefore the solution over here.

Replace Liam's line

 echo "{'fullname' : 'Jeff Hansen'}"; 

with

 echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';