XHR请求获取内容结果＆＃39; undefined＆＃39;没有JQUERY

Question

我希望通过Javascript with Async获得两个单独的页面作为我的页眉和页脚。

没有JQuery。

页面对象：

load: function(v, cb) { 
        tmp.xhr = new XMLHttpRequest(); 
        tmp.xhr.open('GET', v, true); tmp.xhr.send();    
        tmp.xhr.onreadystatechange = function (e) { 
            if (tmp.xhr.readyState == 4 && tmp.xhr.status == 200) { 
               return tmp.xhr.responseText; cb(); 
            } 
        }  
      }

TPL对象：

appendTo: function(e, v) { document.getElementById(e).innerHTML = v; }

这两个功能都位于 DIFFERENT OBJECTS

中

并打电话给他们：

tpl.appendTo('header', tpl.load(tmp.views + 'header_generic_2'));
tpl.appendTo('header', tpl.load(tmp.views + 'footer_generic'));

其中tmp.views is a variable for the directory level only

在我的网页上，我有以下内容：

<div id='header'></div>
<div id='footer'></div>

我得到的结果是：

<div id="header">undefined</div>
<div id="footer">undefined</div>

结果图片：

并且没有控制台错误

但是，响应是200，一切都按照Debug调试： https://gyazo.com/95dba118fe9eebdb310f617168c8d763 https://gyazo.com/e446b7db7f0a62c280273869eac4d04a

Answer 1

您需要使用回调

来呼叫load

tpl.load(tmp.views + 'header_generic_2',function(data){
  tpl.appendTo('header',data);
});

并在获取数据后将数据传回。

load: function(v, cb) { 
                var xhr = new XMLHttpRequest(); 
                xhr.open('GET', v, true);     
                xhr.onreadystatechange = function (e) { 
                    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { 
                        cb(xhr.responseText); 
                    } 
                }
                xhr.send();  
              }