XMLHttpRequest triggers abort event - why?

Question

First steps into JavaScript and the Chrome extension world. I followed the tutorial for a simple extension at Chrome guide. Building on it I want to change the code to display the avatars of the users from Stack Overflow's users page.

I am trying to determine why an abort event is being fired and why the XMLHttpRequest object is not populate with the response.

My manifest.json is:

{  
    /*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"
    ]
}

My popup.html:

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

And my Javascript file is:

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

As I mentioned the cancelMsg is being run and I am trying to understand why. My Chrome version is 23.

It works just fine for me. Try right clicking on the extension toolbar button and choosing "inspect popup". DevTools will open, check for errors in console. If it will be empty, reload the popup window executing `window.location.reload()` in console. — Konrad Dzwinel, Dec 19 '12 at 20:01
Just tried it again. At first I had a warning that is addressed here: http://stackoverflow.com/questions/12003107/resource-interpreted-as-script-but-transferred-with-mime-type-text-plain-for-l Now I have breakpoints set at every event function and it does not break on any of them :s — Shaihi, Dec 19 '12 at 20:56

Sudarshan · Answer 1 · 2012-12-23T10:12:59.410

It worked for me with following code and i got the following output from console.

Output

I have linked output from console here, it has all user details etc.

manifest.json

I used your manifest file with no changes

{  
    "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

Created a trivial html page

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

popup.js

I am able to get response with this code.

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

Thank you for the effort- but I had to debug it myself. Your answer guided me to see the difference, but it does not tell what is wrong with my code... — Shaihi, Dec 29 '12 at 20:08

score 0 · Accepted Answer · answered Dec 29 '12 at 20:07

0

The answer by @Sudarshan helped pinpoint the problem which is the fact that I am not adding the events listeners to the right object.... I added the onload to the windows rather than to the request itself....

answered Dec 29 '12 at 20:07

Shaihi

3,952
4
27
47

XMLHttpRequest triggers abort event - why?

2 Answers2

Output

popup.html

popup.js