My php file located at port 80 (default port) while my ajax call are on port 8080.
My index.html on port 8080
$(document).ready(function(){
$.get("userCheck.php",
{"username" : "lazy", "favcolor" : "FFFFFF" },
function(data){ alert("Data Loaded: " + data);
});
My PHP
$user = $_GET["username"];
if($user == "lazy")
echo "SUCESS";
else
echo "FAIL";
I have googled abit, JSONP came out mostly. Any idea how to convert it to JSONP?
Any way to make it work?
You could try creating a full URL with a port number (http://myserver:[port]/userCheck.php), but it won't work. (Same origin policy)
Performing a query on a different port is not something you should use JSONP for, because any good JSONP framework would block that (or at least it should). It's not the primary goal of JSONP to allow these things, it's only a side-effect from the implementation.
But you can create a "facade" PHP script on the same port as index.html, which then performs the query to the different URL and returns the value. This way the browser does not know about the real URL.
index.html (8080) <--> myAjaxFacade.php (8080) <--> userCheck.php (80)
To do this you could use the http-post-fields function, for example.
Example:
$(document).ready(function(){
$.get("myAjaxFacade.php",
{"username" : "lazy", "favcolor" : "FFFFFF",
"realUrl": "http://serverwithdifferent:port/userCheck.php" },
function(data){ alert("Data Loaded: " + data);
});
In myAjaxFacade.php then forward all other POST data to $_POST['realUrl'] and return the response from that URL.
you cannot do that because of the same origin policy. Since the port are different the same origin policy would apply and block your XHR call.
You would have to use a proxy to do such things, you can take a look at JsonP or build your own proxy using curl or copy your code to be on the same port.
The Same Origin Policy (SOP) denies Javascript from sending requests to any other host and port than the one it was downloaded from.
What is needed to work around this is a programm running on the same host and port as the origin of the javascript that forwards requests to the the actual service. A program that acts like this is commonly called a proxy, so what is needed is a JSONP proxy.
If your server was running ruby/rails and sinatra, github.com/greenisus/jsonp-proxy would be a minimal solution. A solution for PHP that seems to have many features would be benalman.com/projects/php-simple-proxy/.
Implementing a JSONP service is really simple, you need only a callback GET parameter and at the end, print a string containing the equivalent to a function call with the JSON data as the argument:
$callback = $_GET["callback"];
$user = $_GET["username"];
if($user == "lazy") {
$response = array("message" => "SUCESS");
} else {
$response = array("message" => "FAIL");
}
echo $callback . "(". json_encode($response) . ");";
Then you can use it with jQuery $.getJSON:
$.getJSON("jsonpTest.php?callback=?", { username: "lazy"}, function(json){
alert("JSON Data: " + json.message); // SUCCESS
});
For JSONP on PHP, see the example here. You add a "callback" parameter to the URL specifying a function name to run, and in your PHP code make sure to emit JavaScript that call's the callback with the data. jQuery injects a script element with your content - when it runs it calls the callback.
A working solution could be by deploying 'HAProxy' or 'socat'. They can reroute the request to a different port.
