Question

我创建了一个Google Chrome扩展程序。我遇到的问题是Ajax函数总是返回undefined。如果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错误。

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

这是服务器端强制执行的安全措施，旨在防止对服务器的恶意调用。

一个简单的示例（如果可能的话）：您可以创建一个虚拟网站，该网站托管一个能够调用Facebook的javascript代码段，以便执行仅对登录用户可用的操作。如果有人登录其Facebook帐户访问该网站，则该请求可能会成功执行，使您可以尝试使用其帐户进行任何操作。

这就是为什么如果服务器没有提供明确允许此类调用的标头，则浏览器将阻止该请求。

TLDR：这是强制执行安全措施的服务器端，如果服务器不接受来自其他位置托管的网页的请求，则您将无能为力！

Answer 2

在我的问题中，我不知道该示例产生了CORS错误（看到我在chrome扩展程序中使用的URL并未创建此错误）

ajax函数为什么不断返回undefined的问题是由于我使用的EventListener启动了主函数。

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

我不明白为什么此函数会导致错误，但是我不得不将其更改为单击功能上的Jquery。

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

将变量传递给Ajax /运行Ajax函数

2 个答案: