2

进入 Javasript 和 Chrome 扩展世界的第一步。我按照教程在Chrome 指南中进行了一个简单的扩展。在此基础上，我想更改代码以显示来自 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。

4

2 回答 2

4

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

输出

我在这里链接了控制台的输出，它包含所有用户详细信息等。

清单.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);
于 2012-12-23T09:12:20.883 回答
0

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

于 2012-12-29T20:07:31.970 回答