Question

当我使用Google chrome dev控制台运行我的代码时，我遇到了一些问题。我当前的页面是vk.com。我用这个代码

var request_url = 'https://vk.com/dev/openapi';//similar domain
var requestData = function(request_url, callback) {
    var xhr = new XMLHttpRequest();
        xhr.open('GET', request_url, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState==4 && xhr.status==200) {
                var content = xhr.responseText;
                console.log(callback(content))
                callback(content);
            }
        }
    xhr.send();
};

var dataEl = requestData(request_url, function(content) {
        var el = document.createElement( 'html' );
        el.innerHTML = content;
        return el;
});

它不起作用，因为dataEl未定义但是console.log向我显示... ei我想要的。

如果使用这样的代码：

var requestData = ...(similar)
var contentNew = requestData(request_url, function(content){return   content});
var el = document.createElement( 'html' );
el.innerHTML = contentNew;

el不是空的或未定义的对象。这就是我想要的。

如何在没有手动输入的情况下使用XHR？

Answer 1

来自回调的return没有任何意义，可以链接更多回调或使您的代码事件得到驱动。

除了那些以及一些旧的编码风格之外，您唯一的错误似乎是在您想要el.innerHTML = dataEl;时尝试设置el.innerHTML = content;

以下是使用 XMLHttpRequest

的演示

function xGET(url, callback, error_callback) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', callback);
    if (error_callback)
        xhr.addEventListener('error', error_callback);
    xhr.open('GET', url);
    xhr.send();
    return xhr; // why not?
};

var my_url = '/'; // for demo

xGET(my_url, function () {
    var el;
    // creating a <html> doesn't make much sense
    // this example will use a <div> instead
    el = document.createElement('div');
    // do something with your XHR's data
    el.textContent = this.responseText;
    // do something with `el`
    document.body.appendChild(el);
}, function () {
    var el = document.createElement('div');
    el.textContent = 'Something went wrong :(';
    document.body.appendChild(el);
});

DEMO on jsfiddle

xhr请求的回调不起作用

1 个答案: