Передать переменную в Ajax / запустить функцию Ajax

Question

Я создал расширение Google Chrome.У меня проблема в том, что функция Ajax всегда возвращает неопределенное.Если ajax не находится внутри функции, то он работает успешно - однако это будет первое, что запускается, поэтому он не может прочитать в возвращенном URL (из function url)

Как я могу исправитьэто так, что функция Ajax callAjax может читать в mainurl и запускать так, чтобы документ XML мог отображаться в текстовом поле?

document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('Submit').addEventListener('click',begin);      
});
var mainURL;

function begin(){
  mainURL = url();
  callAjax();
}

function url(){
    return "https://www.mapquestapi.com/directions/v2/route?key=9vyfTMs7Q4JVtr4u5ItN8Fd0YHuw1dqn&from=Denver%2C+CO&to=Boulder%2C+CO&outFormat=xml&ambiguities=ignore&routeType=fastest&doReverseGeocode=false&enhancedNarrative=false&avoidTimedConditions=false";
}

function callAjax(){
   $.ajax({
    type: "GET", 
    url: mainURL,
    dataType: "XML",
    success: parseXML,
     error: function (request, status, error) {
        alert(request.responseText); //Alerts Undefined
    }
  });
}

 //This method doesn't get called, always fails. 
function parseXML(xml) {
document.getElementById("xmlSource").textContent = new XMLSerializer().serializeToString(xml);
document.getElementById("xmlSource").textContent = new XMLSerializer().serializeToString(xml.documentElement);
  var ballList = $('distance', xml).get();
  $.each(ballList, function( index, value ) {
    console.log( index + ": " + value.textContent );
    $('#r_distance').append(value.textContent);
    return false;
  });
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 <textarea id="xmlSource" rows="20" cols="70"></textarea>
<form id="Formid"> 
      <input type="submit" id = "Submit" id="Submit">
 </form>https://stackoverflow.com/posts/52372845/edit#

Answer 1

В моем вопросе я не знал, что образец вызвал ошибку CORS (видя, что URL, который я использовал в моем расширении chrome, не создал это)

Проблема, из-за которой функция ajax продолжала возвращать undefined, была из-за EventListener, который я использовал, запускала основную функцию.

document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('Submit').addEventListener('click',begin);      
});

Я не понимаю, почему эта функция может вызвать ошибку, но мне пришлось изменить ее на функцию Jquery on click.

 $(document).ready(function(){
    $("#Submit").click(function(event){
        begin();
        event.preventDefault(); //
    });
});

Answer 2

Когда я запустил предоставленный вами фрагмент, я получил ошибку cors в консоли.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

Это принудительная мера безопасности на стороне сервера, предназначенная для предотвращения злонамеренных вызовов на сервер.

Простой пример (при условии, что это возможно): вы можете создать фиктивный веб-сайт, на котором размещен фрагмент кода javascript, способный позвонить в facebook, чтобы выполнить действие, доступное только зарегистрированным пользователям.Если кто-то вошел в свою учетную запись Facebook, чтобы посетить веб-сайт, запрос может быть успешно выполнен, что позволит вам делать все, что вы пытаетесь сделать с его учетной записью.

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

TLDR: Это серверная сторона, нацеленная на меры безопасности, если сервер не принимает запросы от веб-страниц, размещенных в других местах, вы ничего не можете с этим поделать!