How to call external url in jquery?

Question

I am trying to put comments on Facebook wall using jquery.

But my ajax call not alowing external url .

can anyone explain how can we use external url with jquery ?

below is my code :

var fbUrl="https://graph.facebook.com/16453004404_481759124404/comments?access_token=my_token";

$.ajax({        
    url: fbURL ,
    data: "message="+commentdata,
    type: 'POST',
    success: function (resp) {
        alert(resp);
    },
    error: function(e){
        alert('Error: '+e);
    }  
});

its giving xmlhtttprequest error.

You're getting that error because the URL fails the "Same origin policy", see http://en.wikipedia.org/wiki/Same_origin_policy. — Ben Everard, Jan 06 '11 at 09:13

score 27 · Accepted Answer · edited May 23 '17 at 12:18

All of these answers are wrong!

Like I said in my comment, the reason you're getting that error because the URL fails the "Same origin policy", but you can still us the AJAX function to hit another domain, see Nick Cravers answer on this similar question:

You need to trigger JSONP behavior with $.getJSON() by adding &callback=? on the querystring, like this:
$.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json&callback=?",
function(data) {
    doSomethingWith(data); 
}); 
You can test it here.

Without using JSONP you're hitting the same-origin policy which is blocking the XmlHttpRequest from getting any data back.

With this in mind, the follow code should work:

var fbURL="https://graph.facebook.com/16453004404_481759124404/comments?access_token=my_token";

$.ajax({
    url: fbURL+"&callback=?",
    data: "message="+commentdata,
    type: 'POST',
    success: function (resp) {
        alert(resp);
    },
    error: function(e) {
        alert('Error: '+e);
    }  
});

$.getJSON used for getting date.here i want to post data on wall — , Jan 06 '11 at 10:19
The error callback takes three parameters (not sure if that's the right term), the first is the XHR, the second is textStatusand the third is errorThrown, can you alert these and tell us what they say? — Ben Everard, Jan 06 '11 at 10:29

score 7 · Answer 2 · edited Sep 10 '12 at 21:19

JQuery and PHP

In PHP file "contenido.php":

<?php
$mURL = $_GET['url'];

echo file_get_contents($mURL);
?>

In html:

<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript">
    function getContent(pUrl, pDivDestino){
        var mDivDestino = $('#'+pDivDestino);

        $.ajax({
            type : 'GET',
            url : 'contenido.php',
            dataType : 'html',
            data: {
                url : pUrl
            },
            success : function(data){                                               
                mDivDestino.html(data);
            }   
        });
    }
</script>

<a href="#" onclick="javascript:getContent('http://www.google.com/', 'contenido')">Get Google</a>
<div id="contenido"></div>

I have edited your answer to remove your signature. Please see the faq regarding signatures and taglines. http://stackoverflow.com/faq#signatures — Greg, Sep 10 '12 at 21:19

Andrei Andrushkevich · Answer 3 · 2011-01-06T09:20:33.873

3

it is Cross-site scripting problem. Common modern browsers doesn't allow to send request to another url.

edited Jan 06 '11 at 09:20

answered Jan 06 '11 at 09:13

Andrei Andrushkevich

9,905
4
31
42

13

You mean 'same origin policy'. – karim79 Jan 06 '11 at 09:17
@Andrei Andrushkevich, Correct ! So do you have any way-out or work-around for this ? I mean, if specifically another URL is to be called, what should one do ? – HarsH Sep 05 '12 at 08:05

Atanas Atanasov · Answer 4 · 2017-09-08T08:58:41.400

I think the only way is by using internel PHP code like MANOJ and Fernando suggest.

curl post/get in php file on your server --> call this php file with ajax

The PHP file let say (fb.php):

$commentdata=$_GET['commentdata'];
$fbUrl="https://graph.facebook.com/16453004404_481759124404/comments?access_token=my_token";
curl_setopt($ch, CURLOPT_URL,$fbUrl);
curl_setopt($ch, CURLOPT_POST, 1);
// POST data here
curl_setopt($ch, CURLOPT_POSTFIELDS,
        "message=".$commentdata);

// receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec ($ch);
echo $server_output;
curl_close ($ch);

Than use AJAX GET to

fb.php?commentmeta=your comment goes here

from your server.

Or do this with simple HTML and JavaScript from externel server:

Message: <input type="text" id="message">
<input type="submit" onclick='PostMessage()'>
<script>
function PostMessage() {
var comment = document.getElementById('message').value;
    window.location.assign('http://yourdomain.tld/fb.php?commentmeta='+comment)
}
</script>

score 1 · Answer 5 · answered Jan 06 '11 at 09:17

google the javascript same origin policy

in a nutshell, the url you are trying to use must have the same root and protocol. so http://yoursite.com cannot access https://yoursite.com or http://anothersite.com

is you absolutely MUST bypass this protection (which is at the browser level, as galimy pointed out), consider the ProxyPass module for your favorite web server.

score 0 · Answer 6 · answered Jan 06 '11 at 09:13

0

Hi url should be calling a function which in return will give response

$.ajax({
url:'function to call url',
...
...

});

try using/calling API facebook method

answered Jan 06 '11 at 09:13

sshet

1,152
1
6
15

the url is not the issue here, The same origin policy is to be bypassed. – Samy S.Rathore Feb 04 '14 at 12:43

score -1 · Answer 7 · answered May 05 '17 at 05:33

Follow the below simple steps you will able to get the result

Step 1- Create one internal function getDetailFromExternal in your back end. step 2- In that function call the external url by using cUrl like below function

 function getDetailFromExternal($p1,$p2) {

        $url = "http://request url with parameters";
        $ch = curl_init();
        curl_setopt_array($ch, array(
            CURLOPT_URL => $url,
            CURLOPT_RETURNTRANSFER => true            
        ));

        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
        $output = curl_exec($ch);
        curl_close($ch);
        echo $output;
        exit;
    }

Step 3- Call that internal function from your front end by using javascript/jquery Ajax.

How to call external url in jquery?

7 Answers7

Linked