XMLHttpRequest-当将responseText返回到另一个函数时,它返回undefined
XMLHttpRequest - when returning responseText to another function, it returns undefined
已解决我把我的代码改成这样:
function init() {
//preloadImages();
getContent('events', 'events');
getContent('content', 'main');
}
function loadingScreen(start) {
var loadingSpan = document.getElementById('loading');
if (start == true) {
loadingSpan.innerHTML = '<p>Loading...<br><img src="images/loading.gif"></p>';
}
else {
loadingSpan.innerHTML = '';
}
}
function getContent(what, where) {
if (what == 'content') {
loadingScreen(true);
var ranLoad = true;
}
var toSet = document.getElementById(what);
var location = "content/" + where + ".txt";
var request = new XMLHttpRequest;
request.open("GET", location, true);
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
toSet.innerHTML = request.responseText;
if (ranLoad==true){
loadingScreen(false);
}
}
}
request.send(null);
}
window.onload = init;
tl;dr或长篇大论-请参阅下面的代码和结果。
所以。我正在为一个朋友构建一个小网页,我决定尝试一种技术,即我将使用XMLHttpRequest来检索内容(在同一域中),而不是直接在网页中写入内容,并将它们放在内容中,当人们单击不同的锚时,它将由javascript更新。嗯,我遇到了一个路障。当我创建用于获取内容的函数(setEvents和setContent)时,它会创建一个变量并调用一个用于设置变量的函数(getMarkup),当调用该函数并执行return语句时,它返回undefined。我发现了一个类似的线程,但他们的解决方案是在getMarkup函数中直接添加innerHTML语句。我不想那样做。
以下是代码和结果:
编辑:Esailija建议我应该刚刚发布代码。对我来说,只拍摄图像稍微容易一点,但现在是:
function init() {
//preloadImages();
setEvents();
setContent('main');
}
function setEvents() {
var eventDiv = document.getElementById("events");
var eventContent = getMarkup("content/events.txt");
eventDiv.innerHTML = eventContent;
}
function setContent(which) {
loadingScreen('start');
var contentDiv = document.getElementById('content');
location_ = "content/" + which + 'txt';
//var contentContent = getMarkup('location');
//contentDiv.innerHTML = contentContent;
loadingScreen('stop');
}
function loadingScreen(action) {
var loadingSpan = document.getElementById('loading');
loadingSpan.innerHTML = "Test";
if (action == 'start') {
loadingSpan.innerHTML = '<p>Loading...<br><img src="images/loading.gif"></p>';
}
if (action == 'stop') {
loadingSpan.innerHTML = '';
}
}
function getMarkup(where) {
var filerequest = new XMLHttpRequest();
filerequest.open("GET", where, true);
filerequest.onreadystatechange = function() {
if (filerequest.readyState == 4 && filerequest.status == 200) {
var test = document.getElementById("events");
var reply = filerequest.responseText;
//Doesn't work
return reply;
//Works just fine
//test.innerHTML = reply;
}
};
filerequest.send(null);
}
window.onload = init;
当我执行innerHTML而不是返回时,它会显示"TestTest",当我执行返回而不是innerHTML时,它显示"undefined"。
我真的不想做它的innerHTML部分,那么有没有一个变通方法可以让return语句正常工作呢?
您熟悉回调吗?打开Firebug并在return reply;
行上放置一个断点,注意调用堆栈。有return reply;
的函数不是getMarkup
。
基本上,您将不得不对代码进行一点重组。我会让getMarkup接受一个额外的参数——您想要将其innerHTML值设置到的DOM元素。
您似乎不太了解ajax是如何工作的
一旦调用getMarkup
函数,就会发送一个ajax请求,并告诉浏览器在onreadystatechange
之后使用该函数来处理回复。因此,实际上,当回复返回时,调用该处理程序的不是像setContent
这样的其他函数,而是浏览器。这就是为什么退货不起作用。
此外,当您调用类似var contentContent = getMarkup('location');
的东西时,因为getMarkup
没有显式返回值,所以默认情况下contentContent
会得到undefined
。您可能认为它应该在您的匿名函数中获取返回值,但事实并非如此。getMarkup
函数会立即返回,但只有当ajax响应到来时才会调用处理程序。
如果你想让它变得更好,你必须做一些额外的事情,比如:你只有一个ajax处理程序。一旦一个函数调用了该ajax函数,它就会将回调注册到一个队列中,当响应返回时,就会弹出队列,然后更新值。这将需要一些时间来构建此机制,或者您可能需要检查jQueryAjax队列是如何工作的。
- RequireJS向模块传递配置总是返回undefined
- JSON数组数据返回Undefined
- JavaScript”;.方法“;返回undefined
- jQuery可以't获取data-*属性值,返回undefined
- Javascript/JSON警报返回Undefined
- Javascript:firstChild对象返回undefined
- 当尝试使用ajax读取文件时,变量返回undefined
- 如何避免JSON.stringify在特殊情况下返回undefined,从而为JSON.parse创建字符串失败
- 使用谷歌地图:一个返回undefined的自定义javascript函数
- Json在nodeJs和AngularJs中返回undefined
- 为什么像 Firefox 和 Chrome 控制台中的 '}{' 这样的结构会返回 'undefined'?
- 使用 HTML 和 JavaScript 从表单访问值时返回 undefined
- 在 CoffeeScript 中,当尝试调用类中的方法 (@_methodName) 时,它会返回 undefined
- 解析承诺'当'返回undefined(Javascript)
- NodeJS:zlib.gunzip(body)错误地返回“undefined”
- window.open在chrome扩展中返回undefined
- jQuery.pr()返回undefined,而.attr()对数据-*的作用与预期一样
- 正在读取嵌套json,jquery返回undefined
- IIFE是否总是返回undefined
- $timeout包装$http.post返回undefined而不是promise