Chrome 扩展 - 异步 XHR？

【问题标题】：Chrome Extensions - Asynchronous XHR?Chrome 扩展 - 异步 XHR？
【发布时间】：2010-12-13 08:50:32
【问题描述】：

我正在寻找通过 XHR 发送异步请求的任何方法：

http://code.google.com/chrome/extensions/xhr.html

实际上我是在页面加载后尝试发送请求：

$(document).ready(function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://myserver.com/", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            // Get logged user
            username = $("div.user", xhr.responseText).text()
                    .replace(/.*\(([a-z0-9]*)\).*/, "$1");
        }
    };
});

但用户体验确实不好，它会冻结，直到它从 myserver.com 获取数据，然后才显示popup window。

有什么方法可以先显示弹出窗口，然后向用户显示一些加载文本/图像，然后再开始推送请求？

【问题讨论】：

标签： google-chrome google-chrome-extension xmlhttprequest

【解决方案1】：

如果您已经在使用 jquery，那么为什么不使用方便的 jquery ajax 包装器：

$(document).ready(function() {
    getData();
});

function getData() {
    $.ajax({
       url: "https://myserver.com/",
       type: "GET",
       dataType: "text",
       success: function(data) {
        username = $("div.user", data.replace(/.*\(([a-z0-9]*)\).*/, "$1");
       }
    });
}

不要将该脚本放在<head> 中，而是放在<body> 的末尾。如果它仍然冻结页面，请尝试使用setTimeout：

$(document).ready(function() {
    setTimeout(getData, 0);
});

【讨论】：

我不知道为什么 Chrome 会这样，但是 setTimeout(getData, 0);帮助... :-)