сбой метода jquery .ajax()

#javascript #jquery

#javascript #jquery

Вопрос:

Кто-нибудь может сказать мне, что может быть не так с этим javascript?

         $.ajax({
            cache:false,
            url: 'http://maps.googleapis.com/maps/api/geocode/json?address=1600 Amphitheatre Parkway, Mountain View, CAamp;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);
            }
        });
  

Вызывается функция обработчика событий ‘error’, и это мой вывод на консоль:

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

Я пытаюсь научиться выполнять ajax-вызовы с помощью jquery, и я все еще довольно новичок в этом.

Комментарии:

1. Вы пробовали использовать другой URL? Например, попробуйте поместить локальный файл и запросить это. Что говорит Chrome? И вы пытаетесь сделать это локально или на сервере? (Под локальным я подразумеваю файл:// протокол)

2. Что такое «textStatus», когда вы попадаете в блок ошибок?

3. Попробуйте добавить dataType: 'json' в свой ajax… Я не уверен, поможет ли это, но это может: P

4. Вы не можете выполнять междоменные ajax-запросы без некоторой дополнительной работы — вы должны либо использовать JSONP, либо сервер должен разрешать междоменные запросы посредством заголовков управления доступом. Смотрите мой ответ для получения более подробной информации и некоторых ссылок.

Ответ №1:

Я думаю, вы выполняете междоменный запрос, который заблокирован вашим браузером.

Вы могли бы напрямую использовать Maps API, в котором есть удобные методы для таких вещей.

Документация по картам

 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);
    }
  });
} 
  

Комментарии:

1. GMaps API выполняет запросы JSONP или html-скрипта за сценой, а не «базовые» Ajax-запросы.

2. На самом деле я не пытаюсь вызвать API геокодирования карт Google, я просто использовал URL, который, как я знал, будет работать. Я также пытался получить доступ к файлам в пределах моего домена, и у них были идентичные результаты.

3. В случае использования $.ajax с Google Maps API это просто запрещено, я почти уверен, что вы можете забыть об этом, поскольку «XMLHttpRequest подчиняется той же политике браузера, что и origin, в которой по соображениям безопасности запросы будут успешными, только если они отправлены на тот же сервер, который обслуживал исходную веб-страницу». ( en.wikipedia.org/wiki/XMLHttpRequest ). Если вы не можете выполнить какой-либо другой запрос в пределах вашего домена, пожалуйста, задайте новый вопрос с более подробной информацией, спасибо.

4. Вот результат в Chrome: XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?address=1600 Amphitheatre Parkway, Mountain View, CAamp;sensor=falseamp;_=1305049838758. Origin null is not allowed by Access-Control-Allow-Origin.

5. Это подтверждает то, что я сказал (для данного случая) политика происхождения = междоменный ajax, запрещенный браузером 🙂

Ответ №2:

Я только что запустил этот блок кода через JSFiddle и получаю ту же проблему с ошибкой.

однако, когда я перехожу непосредственно к URL-адресу запроса, я получаю этот блок JSON:

 {
  "status": "REQUEST_DENIED",
  "results": [ ]
}
  

Вы получаете то же самое?

Комментарии:

1. Я думаю, вы скопировали это неправильно, сначала я допустил ту же ошибку, но он должен вывести действительные данные.

2. У этой скрипки есть http://maps.googleapis.com/maps/api/geocode/json?address=1600 Amphitheatre Parkway, Mountain View, CA , У OP есть это в его вопросе http://maps.googleapis.com/maps/api/geocode/json?address=1600 Amphitheatre Parkway, Mountain View, CAamp;sensor=false

3. да, я удалил тестирование бита amp;sensor , хотя разница та же.

Ответ №3:

  • Первая проблема заключается в том, что вы не можете выполнять междоменные Ajax-запросы без некоторой дополнительной работы — вы должны использовать JSONP, а не просто «обычный» JSON, иначе сервер должен разрешить CDR через соответствующие заголовки управления доступом[ref].

  • Однако более серьезная проблема здесь заключается в том, что с версией API v3 Google лишил возможности отправлять запросы JSONP (или, по крайней мере, на данный момент это недокументировано). Они предпочли бы, чтобы вместо этого вы использовали геокодер из библиотеки Google Maps:

     var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
                    'address': '1600 Amphitheatre Parkway, Mountain View'
                     },
    
                     function(data, status){
                          console.log(data); //data is an array of results
                     });
      

На данный момент вы могли бы вернуться к API версии v2, если вам абсолютно необходимо геокодирование Ajax, но вы не хотите использовать геокодер, встроенный в библиотеку Google Maps JS:

 $.ajax({
    cache: false,

    url: 'http://maps.google.com/maps/geo?q=1600 Amphitheatre Parkway, Mountain View, CAamp;output=jsonamp;sensor=falseamp;key=<your_key_here>',

    success: function(data, textStatus, jqXHR) {
        console.log('success');
        console.log(data); //geocoded data
    },

    error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus);
        console.log(errorThrown);
        console.log(jqXHR);
    },

    jsonp: 'callback',

    dataType: 'json'
});