views:

158

answers:

2

I'm trying to populate a div in html via ajax. The data source is a google search for "bing sucks"

I call the method with

loadXMLDoc('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Bing%20sucks')

It works in InternetExplorer, but it doesn't work with Firefox/Chrome. If I load just a file from the local domain (test.txt) , then it works.

What am I doing wrong ?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html>
    <head>
    <title>AJAX</title>
<script language="javascript">



function loadXMLDoc(url)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET",url,false);
    xmlhttp.send(null);
    document.getElementById('test').innerHTML=xmlhttp.responseText;
}


</script>
</head>

<body>

    <div id="lol">
        lol
    </div>

<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>


<button type="button" onclick="loadXMLDoc('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&amp;q=Bing%20sucks')"&gt;Click Me</button>
<button type="button" onclick="loadXMLDoc('test.txt')">Click Me</button></body>
</html>
+3  A: 

Here comes the usual "just use jQuery" post!

Why not use jQuery? It'll get rid of all those browser inconsistencies for you:

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&amp;q=Bing%20sucks';
$.getJSON(url + "&jsoncallback=?", function(data){
   $('#test').html(data);
});
</script>

You'd need some server-side programming to to intercept the request to get around the cross-domain issue. Normally you can't make an ajax request from one domain to the other.

See the jQuery docs on .getJSON. Previous question of similar nature.

Parrots
because jquery is 50 kb in size. That is unacceptable.2kb are max.
Quandary
Also, jQuery won't help here.
SLaks
Minified it's 19k. But yeah, I didn't realize the cross-domain issue you're going to run into.
Parrots
jQuery could help still, with their JSONP implementation: http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getScript
Parrots
jsonp works only if the server side api supports it too.
Chetan Sastry
+3  A: 

You cannot use AJAX to read data from another domain.

You'll need to write a server-side script on your domain that sends a request to Google and forwards you the results.

SLaks
So I have to fetch it from a serverside site (php/aspx), which fetches the data for me ? Sounds idiotic to me...
Quandary
@unknown: Exactly.
SLaks
@unknown My browser shouldn't write files to the local system, and it shouldn't request information from domains other than the one that is serving the source I'm looking at. But that's my opinion. Server-side is almost always the way you need to go to get information from domains outside of your own, especially if you're looking to use an API that's not built for your front-end. You could also just use an include of the script you need from Google APIs. http://code.google.com/apis/ajaxlibs/
NateDSaint
Jep, I could use google's code if I wanted to query google only, but I use the google source as an example, it's not where I want to fetch from.
Quandary
So essentially, I have to route every request via my server (especially when the data requested is not on my server) to the client, using three times the bandwith instead of zero times. I'm impressed, i mean that's real security - instead of making it secure - just disable it. What utter crap.
Quandary
Addendum: A compromise: Outsouce the 50 kb /request traffic by:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" />
Quandary