Question

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

我正在尝试确定为什么要触发中止事件以及为什么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。

Answer 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);

Answer 2

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

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

2 个答案:

输出

popup.html

popup.js