JSON crossdomain communication with PHP file and a local javascript file

Question

I am a JSON newbie, but have good experience in PHP and javascript. The question is simple, and the answer might be simpler. I am having trouble sending data from the PHP file on the server, to another PHP file that I have locally which would receive the data in JSON format from the server. What am I doing wrong?

Javascript Frag ( Local )

$(document).ready(function(){
//attach a jQuery live event to the button
$.getJSON('http://www.xpal.com/ws_users.php?action=get_user_data&user_id=33',function(data) {

        alert(data); //uncomment this for debug
        $('#showdata').html("<p>Username= "+data.username+"<br> Email= "+data.email+"<br> Firstname="+data.firstname+"<br> Lastname="+data.lastname+"</p>");
    });

});

PHP Frag (Server @xpal.com) :

$users=new users;

if($_GET['action']=="get_user_data")
{
$user_id=$_GET['user_id'];
$assoc=array(
                "username"=>$users->return_username($user_id),
                "email"=>$users->return_user_emailid($user_id),
                "firstname"=>$users->return_user_firstname($user_id),
                "lastname"=>$users->return_user_lastname($user_id)
            );
echo json_encode($assoc);
}   

Edit :

The error message : XMLHttpRequest cannot load xpal.com/ws_users.php?action=get_user_data&user_id=33. Origin localhost is not allowed by Access-Control-Allow-Origin.

Answer 1

You can't make ajax calls to a different domain that the page is hosted on. See the Same Origin Policy that browsers implement for security reasons.

There is a way to make cross domain ajax calls and it involves using JSONP. Basically, you inject a script tag into your own frame and that script tag points to server endpoint anywhere on the web. Since the src value of a script tag is not restricted by the same origin policy, you can reach that server. But, now you need to have a way to get that result back. That is done using JSONP where you specify in your server request a javascript function that you want the returned javascript to call. That returned javascript can have javascript data in it that is then passed to the desired function. JSONP requires cooperation between both client code and the server code since a normal ajax call might not support the extra part of JSONP. But, with this cooperation of both sides, you can get around the same origin policy for server endpoints that support JSONP.

Answer 2

As already explained in the other answers, this doesn't work because of the Same Origin Policy.

Now, JSONP (see jfriend00's answer) is one way around it, but it has its drawbacks. (see the end of this page).

---

There is another way around it: and that is have PHP query the remote server and send a response back to the client. See this page:

Cross domain AJAX querying with jQuery

The main drawback of this method is that all the traffic will go through your server, since you have to call the remote page, fetch the response and send the response back to the client.

Answer 3

To use jsonp, as other suggest, you must either put "callback=?" at the end of your URL, or use $.ajax() and specify the dataType is jsonp. Examples here.

Answer 4

Its called the Same Origin Policy. In short: the domain that your code is on, is the only domain your javascript can communicate with (by default)

JQuery won't get json?

Answer 5

You could run a php script on your own server if that is an option.
This:-

<?php
    $details = file_get_contents('http://www.xpal.com/ws_users.php?action=get_user_data&user_id=33');
    var_dump(json_decode($details));

returned this:-

object(stdClass)[1]
    public 'username' => string 'sniper' (length=6)
    public 'email' => string 'ajithsubramanian@gmail.com' (length=26)
    public 'firstname' => string 'Ajith' (length=5)
    public 'lastname' => string 'Ravi' (length=4)

Does that put you on the right path? You could do an AJAX call to a script based on this on your server.

Answer 6

You should take a look at CORS and its implementation.

In your case, the possible solution would be to use header(Access-Control-Allow-Origin:http://localhost) in your php file. Replace localhost with the domain which is restricted by SOP.

A good reference on CORS can be found at https://developer.mozilla.org/en/HTTP_access_control .

Answer 7

You could use the same jQuery to make a cross-domain request, Just check the link cross-domain request, they have demo how to implement the cross-domain request...

In your code, Make sure that the following things are correct,

• the www.xpal.com output should be in json format

• if there is any error in your output, jsonp technique doesnt display error (poor error handling).

• Your json output should be covered with echo $_GET['callback']." ".json_encode($array).")"; as in the mentioned link.