jQuery Ajax on Different Port

Question

Hello,

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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
});