AJAX 触发 no_connection();太早了答案

【问题标题】：AJAX firing no_connection(); too earlyAJAX 触发 no_connection();太早了
【发布时间】：2012-12-31 10:12:06
【问题描述】：

我有这个 Google Chrome 扩展程序..

manifest.json：

{
  "name": "My extension",
  "manifest_version": 2,
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery-1.8.3.min.js", "content.js"],
      "run_at": "document_end"
    }
  ]
}

popup.html:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }

      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }
    </style>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="ajax">
    </div>
  </body>
</html>

popup.js：

function start() {
    var reg = false;
    if (window.ActiveXObject){
        reg = new ActiveXObject("Microsoft.XMLHTTP");
    }else {
        reg = new XMLHttpRequest();
    }
    reg.open("GET","http://www.dr.dk/",true); // Insert a reference of the php page you wanna get instead of yourpage.php
    reg.send(null);
    reg.onreadystatechange = function () {
        if (reg.readyState == 4 && reg.status == 200) {
            document.getElementById('ajax').innerHTML = reg.responseText;
        }else {
            no_connection();
        }
    }
}

function no_connection() {

    var reg = false;
    if (window.ActiveXObject){
        reg = new ActiveXObject("Microsoft.XMLHTTP");
    }else {
        reg = new XMLHttpRequest();
    }
    reg.open("GET","no_connection.html",true); // Insert a reference of the php page you wanna get instead of yourpage.php
    reg.send(null);
    reg.onreadystatechange = function () {
        if (reg.readyState == 4 && reg.status == 200) {
            document.getElementById('ajax').innerHTML = reg.responseText;
        }else {
            document.getElementById('ajax').innerHTML = 'An Unknown Error did happened.';
        }
    }
}

start();

这总是来自 no_connection.html 的内容，但如果我注释掉该行：

no_connection();

来自：

function start();

然后就正常了，然后就显示http://www.dr.dk/的内容了

这怎么会发生，当no_conncection(); 在if else 语句中时，它怎么能覆盖它呢？

知道如何解决这个问题，因为这变得很奇怪。

【问题讨论】：

标签： ajax google-chrome google-chrome-extension

【解决方案1】：

reg.onreadystatechange 是一个块函数，每次你的状态改变时都会被调用。因此，它在通话期间以及通话后都被调用。（两次，可能更多）

另外，一个旁注，请记住，当有人从他们的网站窃取内容，甚至只是从其他网站链接到他们时，dk 会非常愤怒......

在你的 else 语句中，你需要在失败时特别倾听。建议结构：

request[requestid].onreadystatechange = function() {
  /* This is a slightly confusing part of the script.  We don't wait to hear back from the server before we continue
  with the communicate() function.  It sends the request, and if and when the server gets back to us, whatever's
  specified as request[requestid].onreadystatechange is performed.  So, we have to define .onreadystatechange
  BEFORE we actually make contact with the server.  If you're reading this and trying to learn how it works,
  you may want to take a glance at the last part of the communicate() function first, and then come back here. */
  try {
   /* We use try and catch because Javascript will give an error when we try to access request[requestid].status if the
   server is down or if the user navigates away from the page. */
   if (request[requestid].readyState == 4 && request[requestid].status == 200) {
    window.clearTimeout(timeout[requestid]);
    document.body.style.cursor = 'default';
    /* 4 = The AJAX Request is complete; 200 = The HTTP server found the data we needed and was able to send it to us. */
    eval(request[requestid].responseText);
    } else if (request[requestid].readyState == 4 && request[requestid].status != 200) {
    window.clearTimeout(timeout[requestid]);
    if (failure) eval(failure);
    document.body.style.cursor = 'default';
    alert ('Error ' + request[requestid].status + ':  Server error.  If you entered data, it may or may not have been saved.  Please contact your systems administrator.');
    }
   } catch(e) {
   window.clearTimeout(timeout[requestid]);
   document.body.style.cursor = 'default';
   if (failure) eval(failure);
   alert ('Error:  Unable to communicate with server.  Please contact your systems administrator.  You may want to try again in a few minutes to see if the problem fixes itself. \n\n(Either the server was down, the communication was interrupted, or there was an error in the data sent by the server.)\n' + e + '\n\n' + request[requestid].responseText);
   }
  }

【讨论】：

谢谢尼尔斯。在我尝试制作自己的 API 以从中获取内容之前，dr.dk 只是一个示例。但是我如何让它对我有用，对不起，但我是 Javascript 新手。
Np。我已在我的回答帖子中添加了建议的结构。
谢谢，但我只是收到以下错误request is not defined，我还应该包括：var request = false; if (window.ActiveXObject){ request = new ActiveXObject("Microsoft.XMLHTTP"); }else { request = new XMLHttpRequest(); }
您是否已改为使用 request[requestid] 而不是仅使用“reg”？
哦。谢谢。我的错。我应该如何处理[requestid]？