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

Question

我创建了一个谷歌浏览器扩展程序。我遇到的问题是 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 错误。

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

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

一个简单的例子(如果可能的话(：你可以创建一个虚拟网站，它托管一个能够调用Facebook的javascript片段，以便执行仅对登录用户可用的操作。如果有人登录他们的Facebook帐户访问该网站，则可以成功执行请求，从而允许您对他们的帐户执行任何尝试的操作。

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

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

Answer 2

在我的问题中，我不知道该示例产生了 CORS 错误(看到我在 chrome 扩展程序中使用的 URL 没有创建这个(

ajax 函数不断返回undefined的问题是因为我正在使用的 EventListener 启动了 main 函数。

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

我不明白为什么这个函数会导致错误，但我不得不将其更改为点击时 Jquery 函数。

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