How to use Ajax in Facebook's canvas app?

Question

I tried to use jQuery's ajax, but there is problem with cross domain requests(Canvas apps in Facebook are in iframe, and my browser Chrome, doesn't allow for making ajax requests to another domain (not facebook.com)).

Deprecated FBJS had Ajax proxy, but it is now deprecated. How to deal with it? Thanks for help.

score 1 · Answer 1 · answered Jul 29 '12 at 14:41

1

If you use iframes, then making an AJAX call works. The iframe will be your own domain so it won't be a cross-domain request.

answered Jul 29 '12 at 14:41

steve8918

1,820
6
27
38

That doesn't seem to be the case now; all requests/redirects/etc to http resources are blocked within the iframe even if it's inside the https domain. Tested in chrome. – Dmitry Sadakov Feb 11 '15 at 14:46

score 0 · Answer 2 · answered Nov 11 '13 at 12:10

Actually you have to add cross domain requests in header.

I have done it in PHP.

JavaScript:- Just have a look at it.

function ajax(id){
        $.ajax({
            type: "POST",
            url: "json.php",
            data: {id: id},
            dataType : 'json',
            forceIframeTransport: true, //force use iframe or will no work            
            success: function(result){
                console.log(result);
            },
            error: function(errorThrown){
            }
        });

    }

JSON.PHP:-

<?php
    header('Access-Control-Allow-Origin: *');
$id = $_POST['id'];
$id = "test".$id;
$json = json_encode($id);
echo $json ;
?>

HTML CODE:-

<a onclick="ajax(3); return false;" id="result">Hello</a>

How to use Ajax in Facebook's canvas app?

2 Answers2