XMLHttpRequest 触发中止事件 - 为什么？答案

【问题标题】：XMLHttpRequest triggers abort event - why?XMLHttpRequest 触发中止事件 - 为什么？
【发布时间】：2012-12-07 01:15:10
【问题描述】：

进入 Javasript 和 Chrome 扩展世界的第一步。我按照教程在Chrome guide 进行了一个简单的扩展。在此基础上，我想更改代码以显示来自 stackoverflow 用户页面的用户头像。

我正在尝试确定为什么会触发 abort 事件以及为什么 XMLHttpRequest 对象没有填充响应。

我的manifest.json 是：

{  
    /*snip*/
    "manifest_version": 2,
    "browser_action": { 
                    "default_icon": "icon.png",
                    "default_popup": "popup.html"
                  },
    "permissions": [ 
        "http://stackoverflow.com/users",
        "http://stackoverflow.com/users/*",
        "notifications"
    ],
    "web_accessible_resources": [
        "icon.png"
    ]
}

我的popup.html：

<script src="popup.js"></script>

我的 Javascript 文件是：

var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://stackoverflow.com/users",
    true);
window.addEventListener('loadend', showPhotos);
req.addEventListener("error", errorMsg, false);
req.addEventListener("abort", cancelMsg, false);

req.send(null);

正如我提到的，cancelMsg 正在运行，我试图了解原因。我的 Chrome 版本是 23。

【问题讨论】：

它对我来说很好用。尝试右键单击扩展工具栏按钮并选择“检查弹出窗口”。 DevTools 将打开，检查控制台中的错误。如果为空，则在控制台中重新加载执行window.location.reload() 的弹出窗口。
刚刚又试了一次。起初我有一个警告在这里解决：stackoverflow.com/questions/12003107/… 现在我在每个事件函数上都设置了断点，并且它不会在其中任何一个上中断：s

标签： javascript-events google-chrome-extension

【解决方案1】：

以下代码对我有用，我从控制台得到以下输出。

输出

我已从控制台 here 链接输出，它包含所有用户详细信息等。

manifest.json

我使用了你的清单文件，没有做任何改动

{  
    "manifest_version": 2,
    "browser_action": { 
                    "default_icon": "logo.png",
                    "default_popup": "popup.html"
                  },
    "permissions": [ 
        "http://stackoverflow.com/users",
        "http://stackoverflow.com/users/*",
        "notifications"
    ],
    "web_accessible_resources": [
        "logo.png"
    ],
    "name":"Demo for XHR",
    "description":"This is a demo for XHR",
    "version":"1"
}

popup.html

创建了一个简单的 html 页面

<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

popup.js

我可以使用此代码得到响应。

//Define functions
function showPhotos() {
    console.log("In Show Photos");

}
function errorMsg() {
    console.log("In error message");
}
function cancelMsg() {
    console.log("In error message");
}
function onload() {
    //New request
    var req = new XMLHttpRequest();
    //Register events
    req.onreadystatechange = handleStateChange;
    req.onerror = errorMsg;
    req.onabort = cancelMsg;
    //Make a call
    req.open("GET", "http://stackoverflow.com/users", true);
    req.send();

}

function handleStateChange(xhr) {
// Print response when status is 200
    if (xhr.srcElement.status == 200) {
        console.log(xhr.srcElement.response);
    }
}
//Invoked onload event 
document.addEventListener("DOMContentLoaded", onload);

【讨论】：

感谢您的努力 - 但我必须自己调试它。您的回答引导我看到了差异，但它并没有说明我的代码有什么问题......

【解决方案2】：

@Sudarshan 的回答帮助查明了问题，即我没有将事件侦听器添加到正确的对象...... 我将 onload 添加到 windows 而不是请求本身....

【讨论】：