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?
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'}" . ')';
Simple jQuery, PHP and JSONP example is below:
window.onload = function(){_x000D_
$.ajax({_x000D_
cache: false,_x000D_
url: "https://jsonplaceholder.typicode.com/users/2",_x000D_
dataType: 'jsonp',_x000D_
type: 'GET',_x000D_
success: function(data){_x000D_
console.log('data', data)_x000D_
},_x000D_
error: function(data){_x000D_
console.log(data);_x000D_
}_x000D_
});_x000D_
};
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
_x000D_
$.ajax({
type: "GET",
url: '<?php echo Base_url("user/your function");?>',
data: {name: mail},
dataType: "jsonp",
jsonp: 'callback',
jsonpCallback: 'chekEmailTaken',
success: function(msg){
}
});
return true;
In controller:
public function ajax_checkjp(){
$checkType = $_GET['name'];
echo $_GET['callback']. '(' . json_encode($result) . ');';
}
More Suggestion
JavaScript:
$.ajax({
url: "http://FullUrl",
dataType: 'jsonp',
success: function (data) {
//Data from the server in the in the variable "data"
//In the form of an array
}
});
PHP CallBack:
<?php
$array = array(
'0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
'1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);
if(isset ($_GET['callback']))
{
header("Content-Type: application/json");
echo $_GET['callback']."(".json_encode($array).")";
}
?>
Use this ..
$str = rawurldecode($_SERVER['REQUEST_URI']);
$arr = explode("{",$str);
$arr1 = explode("}", $arr[1]);
$jsS = '{'.$arr1[0].'}';
$data = json_decode($jsS,true);
Now ..
use $data['elemname']
to access the values.
send jsonp request with JSON Object.
Request format :
$.ajax({
method : 'POST',
url : 'xxx.com',
data : JSONDataObj, //Use JSON.stringfy before sending data
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
success : function(response){
console.log(response);
}
})
To make the server respond with a valid JSONP array, wrap the JSON in brackets ()
and preprend the callback
:
echo $_GET['callback']."([{'fullname' : 'Jeff Hansen'}])";
Using json_encode() will convert a native PHP array into JSON:
$array = array(
'fullname' => 'Jeff Hansen',
'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";
Source: Stackoverflow.com