Using .ajax() to load remote URL - not working

Question

I'm trying to load a remote URL (or rather just test to see if a remote page exists).

This works just fine:

$(function() {     
    $.ajax({
        url:'localtest.html',
        type: 'html',
        success: function(content,code) {
            alert(code);
            $('body').html(content);
        }
    });        
});

But swap in a remote URL and I get nothing:

$(function() {     
    $.ajax({
        url:'http://www.google.com/',
        type: 'html',
        success: function(content,code) {
            alert(code);
            $('body').html(content);
        }
    });        
});

Is there any way to do that?

What is the error you are getting. Have you used Firebug to see what the error is? — Steve, Jan 30 '12 at 09:12

score 3 · Answer 1 · answered Jan 30 '12 at 09:13

3

AJAX doesn't support cross domain calls, for security reasons.

The traditional way around it is using jsonp

answered Jan 30 '12 at 09:13

u.k

3,091
1
20
23

score 2 · Answer 2 · answered Jan 30 '12 at 09:13

2

Browsers prevent Ajax from accessing resources cross domain (SOP = same origin policy). It will only work if the server is configured for "Access-Control-Allow-Origin" pointing to your domain (or * or similar).

answered Jan 30 '12 at 09:13

devnull69

16,402
8
50
61

Access-Control-Allow-Origin will not work with older browsers (e.g IE) so it can not be considered reliable. – u.k Jan 30 '12 at 09:16

score 2 · Answer 3 · answered Jan 30 '12 at 09:13

This is because the browser won't allow cross-site requests unless the remote server explicitly allows it by sending an Access-Control-Allow-Origin header. If you just want to test existence, you might be able to load the URL in an image tag with an onload and onerror event. You won't be able to access the contents of the remote URL though; it's for security. Otherwise, for example, you could load facebook and read someone's wall without them knowing.

score -1 · Answer 4 · answered Apr 06 '16 at 06:33

-1

For security reasons,AJAX doesn't support CORS(cross origin resource sharing).

answered Apr 06 '16 at 06:33

paramjeet singh

165
1
10

Yes, it does. CORS was designed specifically for Ajax (and then expanded for a few other things like fonts and canvas images). – Quentin Apr 06 '16 at 08:40

score -1 · Answer 5 · answered Jan 30 '12 at 09:15

This is not a right ajax call. The type should have been 'GET' assuming you are doing a retrieval operation. What should be 'html' is the dataType attribute.

$.ajax({
        url:'http://www.google.com/',
        type: 'GET'
        dataType: 'html',
        success:function(content,code)
        {
            alert(code);
            $('body').html(content);
        }
        });        
    });

and also, as anybody has added, since you are making a call to google.com, you have to provide a jsonp callback, because of same origin policy..hope that helps.

Can u have any example regarding JSONP callback. Please share . — vipin katiyar, Jan 31 '12 at 07:35

score -2 · Answer 6 · edited Apr 06 '16 at 07:20

-2

Use attribute in AJAX call.

crossDomain: true

And do make sure meta data tag of html page where you are loading contents.

edited Apr 06 '16 at 07:20

vc 74

37,131
7
73
89

answered Apr 06 '16 at 06:29

user2417120

1

That won't do anything. It only matters if you are making a same origin request which might get *redirected* to a different origin (as it tells jQuery not to add extra headers to the request which would require a preflight OPTIONS request to get permissions for CORS which it adds if the URL given points to the same origin). You still need the server the request is being made to to give permission with CORS. – Quentin Apr 06 '16 at 06:35
Agree with that, I'm using this scenario in cordova app, where I can call remote url in my app by allowing CROS permissions. and it runs perfectly as well. – user2417120 Apr 06 '16 at 07:16

Using .ajax() to load remote URL - not working

6 Answers6