16

I am not able to load an external html page into a div in my page.

My Jquery Code is:

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
 });

My HTML page is 

<html><body><div id="external"></div></body></html>

I also tried using another JQuery code

$(document).ready(function() {
    $('#external').load('http://google.com');
});

Could anyone please help me.

Thanks Amal

Hussein
  • 42,480
  • 25
  • 113
  • 143
Amal Kumar S
  • 15,555
  • 19
  • 56
  • 88

5 Answers5

16

Due to browser restrictions, most Ajax requests are subject to the "same origin policy". That means that in most cases, you can’t use jQuerys ajax methods to fetch data from external domains without using a Proxy, YQL, JSONP or equivalent technique to get around this.

A pure javascript option is Yahoo’s YQL service. There is a plugin that extends jQuery.ajax to allow external domains: https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

Using this plugin should allow the ajax example in your question.

Another option is to use a server-side proxy and then request that page using ajax. If your server can run PHP, try googling for something like "php ajax proxy" and you’ll get plenty results.

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • Hey David, the link you provided was useful before. but currently its broken, can you update your answer with a new link. It will be a great help to others. – Amal Kumar S Jan 16 '12 at 07:09
7

First download the JS file https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js and include the js file in your page. Below is the function that I used to load the external page.

       function test () {
         $.ajax({
           url: 'http://external_site.com',
           type: 'GET',
           success: function(res) {
             var content = $(res.responseText).text();
             alert(content);
           }
         });
       }

This worked for me getting content from external site.

Amal Kumar S
  • 15,555
  • 19
  • 56
  • 88
2

$('div#external').html(); sets the HTML inside your div object to the empty string.

As response is the returned HTML, you probably meant:

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
});

The jQuery documentation on $.get provides an example like this.

Your next problem will be that you are attempting to make a cross-domain request. See this site for more information on how to get around Javascript's security restrictions in this area.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
1

Due to same origin policy you are pretty limited to sending requests outside your domain. JSONP is a work around, may be it'll help.

Rafay
  • 30,950
  • 5
  • 68
  • 101
1

in order to bypass cross -domain restriction, try jQuery.getJSON instead (using JSONP).

jQuery.getJSON(url, function(data){
     // your code here
         $('div#external').html(data);      
     });

P.S.: but your url variable should include callback function like this: "http://www.example.com/?t="+v+"&callback=?"

DrStrangeLove
  • 11,227
  • 16
  • 59
  • 72
  • Thanks for your replay. I used this but am getting NULL as the value for data. – Amal Kumar S Feb 20 '11 at 19:26
  • What should I specify as the call back is it the url of my page. – Amal Kumar S Feb 20 '11 at 19:29
  • your url was incorrect. it shouldn't be just google.com , it should look something like "http://www.example.com/?t="+v+"&callback=?" , using "?" mark instead of callback function name... – DrStrangeLove Feb 20 '11 at 19:35
  • Besides, if you insist on connecting to Google, you should consider getting Google API key... http://code.google.com/apis/customsearch/v1/getting_started.html#get_key – DrStrangeLove Feb 20 '11 at 19:53