views:

192

answers:

5

I'm trying to load up the estimated world population from http://www.census.gov/ipc/www/popclockworld.html using AJAX, and so far, failing miserably.

There's a DIV with the ID "worldnumber" on that page which contains the estimated population, so that's the only text I want to grab from the page.

Here's what I've tried:

  $(document).ready(function(){
    $("#population").load('http://www.census.gov/ipc/www/popclockworld.html #worldnumber *');
  });
A: 

Doesn't it work without the last asterisk?

Garis Suero
No, even without the asterisk it won't work.
Josh
+4  A: 

What you are trying to do is known as a cross-domain request. This is not a feature that browsers normally allow (security feature). Some ways to get around this limitation are described here: The jQuery Cross-Domain Ajax Guide.

R0MANARMY
+1 - I knew there would be a decent link out there.
patrick dw
Thanks, I couldn't make heads or tails of the examples on that site... However, I did find a solution which I posted below.
Josh
A: 

you can try something like this:

$.get('http://www.census.gov/ipc/www/popclockworld.html', function(content) {
    $("#population").html($('#worldnumber',$(content)));
});
Nazariy
No you can't, `get` is still attempting to do a cross-domain request, which most browsers don't allow for security reasons (with the exception of jsonp).
R0MANARMY
Just tested in Firefox. Doesn't work. Works in Safari, but I have a feeling that is just because my test page is hosted from the filesystem. I think Safari may be more forgiving in that case.
patrick dw
Yes, you are right R0MANARMY, it does not work.
Nazariy
A: 

Yeah, it's security. You can't ajax in to pages that aren't from the same domain.

stu
You **can** do [JSONP](http://en.wikipedia.org/wiki/JSON#JSONP) ( which are still ajax requests) requests to different domains.
R0MANARMY
A: 

@R0MANARMY:

I couldn't seem to follow the directions given on that site you linked to, but I did figure out a solution... I created a PHP file with the following code:

//Run cURL call
$ch = curl_init('http://www.census.gov/main/www/rss/popclocks.xml');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, 0);
$data = curl_exec($ch);
curl_close($ch);

//Set as new XML object
$doc = new SimpleXmlElement($data, LIBXML_NOCDATA);


function parseRSS($xml) {
  $cnt = count($xml->channel->item);
  for($i=0; $i<$cnt; $i++) {
    $title = $xml->channel->item[$i]->title;
    if ( preg_match("/world population estimate:\s([0-9,]+)\s/i", $title, $match) ) {
      echo $match[1];
    }
  }
}

parseRSS($doc);

Then I called it with jQuery like so:

<div id="population"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
  $(document).ready(function() {
    $('#population').load('getpop.php');
    var refreshId = setInterval(function() {
      $('#population').load('getpop.php');
    }, 120000);
   });
</script>

Just thought I'd post it here in case anyone else is looking to do something similar.

Josh
If I'm reading this right (don't really know php), you just created a server side proxy to handle the cross domain request on your behalf =).
R0MANARMY
I suppose... I just figured since AJAX has problems with accessing cross domain data, I'd just use cURL to grab the data with PHP and then access that data via jQuery/AJAX instead of trying to do it all in AJAX
Josh
@Josh: One thing to be aware of (not really applicable in your case though) is that when you create a server side proxy to execute calls against other domains it has the potential to open your application up to attacks. A malicious user could, for example, use it to send information from the current page to their own server (not good if current page contains a password or whatnot).
R0MANARMY