jquery .ajax() method fail

Question

Can anyone tell me what might be wrong with this javascript?

        $.ajax({
            cache:false,
            url: 'http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false',
            success: function(data, textStatus, jqXHR) {
                console.log('success');
                console.log(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('error');
                console.log(errorThrown);
                console.log(jqXHR);
            }
        });

The 'error' event handler function is invoked and this is my console output:

error
undefined
XMLHttpRequest { mozResponseArrayBuffer=ArrayBuffer, status=0, more...}

I'm trying to learn how to make ajax calls with jquery, and I'm still pretty new to it.

Answer 1

I think you're doing a Cross domain request, which is blocked by your browser.

You could directly use the Maps API, which has convenient methods for such things.

Maps Documentation

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}