单击事件处理程序中的 XMLHttpRequest 状态 0答案

【问题标题】：XMLHttpRequest status 0 in click event handler单击事件处理程序中的 XMLHttpRequest 状态 0
【发布时间】：2015-12-01 22:40:48
【问题描述】：

我正在编写一个 Google Chrome 扩展程序来利用我们编写的 API。我遇到的问题是 popup.html 有一个登录表单，当按下提交按钮时，它会调用必要的身份验证代码，这涉及向 API 服务器发出几个 XMLHttpRequest。

代码如下：

authenticate.js

function authenticate(username, password)
{
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "<api-server>/challenge?username=dummyusername", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      alert(xhr.status);
    }
  };
  xhr.send();
}

/*Gets the username and password textboxes from popup.html and passes their values on to authenticate()*/
function getCredentials()
{
  authenticate("test", "test");
}

document.addEventListener("DOMContentLoaded", function() {
  var submitBtn = document.getElementById("submitBtn");
  if (submitBtn != null) {
    submitBtn.onclick = getCredentials;
  }
});

popup.html

<!doctype html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="usernameTxt"><br>
    <label for="password">Password:</label>
    <input type="password" id="passwordTxt"><br><br>
    <input type="submit" id="submitBtn" value="Submit">
  </form>
  <script src="authenticate.js"></script>
  </body>
</html>

manifest.json

{
  "manifest_version": 2,

  "name": "Chrome Extension",
  "description": "Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>",
    "activeTab",
    "https://ajax.googleapis.com/",
    "<api-server>"
  ]
}

但是，如果我替换：

document.addEventListener("DOMContentLoaded", function() {
  var submitBtn = document.getElementById("submitBtn");
  if (submitBtn != null) {
    submitBtn.onclick = getCredentials;
  }
});

与：

document.addEventListener('DOMContentLoaded', function() {
  getCredentials();
});

它做了正确的事，这让我相信这与它是从单击事件处理程序中调用的事实有关，并且可能以某种方式权限尚未扩展到按钮。

我看到了这个帖子 (Chrome Extension: XMLHttpRequest canceled (status == 0)) 并在权限中添加了"<all_urls>"，这没有任何区别。

【问题讨论】：

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

【解决方案1】：

取消点击，表单不会提交。

document.getElementById("submitBtn").addEventListener('click', function(evt){
    evt.preventDefault();
    getCredentials();
});

【讨论】：

在“DOMContentLoaded”事件中您指的是什么点击？
现在，这就是我的意思......早上的咖啡还没有开始。
谢谢，尽管我知道您最初不小心输入了错误的代码，但这个建议仍然有效。怎么非得取消点击？
因为表单提交，页面刷新，杀掉Ajax调用。
最初的问题实际上是尝试使用onclick属性，即forbidden by the extension CSP。改成addEventListener是最重要的部分。