json - XMLHttpRequest.onReadyStateChange 在 Chrome、Firefox、Internet Explorer 中不起作用

Question

我正在使用 Aptana Studio 3 文本编辑器并在 Windows 7 Enterprise OS 上工作。我有以下 AJAX 代码，它在本地系统上无法获取保存在 https 网站上的 JSON 文件。此示例取自 Youtube 视频：

JSON 和 AJAX 教程：带有真实示例

索引.html：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="test" content="content"/>
        <title>JSON and AJAX</title></head>
<header>
  <h1>JSON and AJAX</h1>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</header>


<body>
 <script src="main.js"></script>
 <button type="button" onclick="function()" id="btn">Fetch Info for 3 New Animals</button>
 <div id="animal-info"> </div>
</body>

</html>

样式.css：

    html, body {
  padding: 0;
  margin: 0;
}

.hide-me {
  visibility: hidden;
  opacity: 0;
  transform: scale(.75);
}

h1 {
  margin-top: 0;
  font-size: 2.4em;
  font-weight: normal;
  display: inline-block;
}

body {
  font-family: Helvetica, sans-serif;
  padding: 50px 10%;
}

button {
  background-color: #046380;
  color: #FFF;
  border: none;
  padding: 10px 15px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  box-shadow: 2px 2px 0 #034154;
  margin-bottom: 10px;
  margin-left: 18px;
  transition: opacity .4s ease-out, transform .4s ease-out, visibility .4s ease-out;
  position: relative;
  top: -10px;
}

button:hover {
  background-color: #034F66;
}

button:active {
  background-color: #034154;
  box-shadow: none;
  position: relative;
  top: -8px;
  left: 2px;
}

p {
  padding: 4px 0 2px 8px;
  line-height: 1.7;
  border-bottom: 1px dotted #DDD;
  list-style: none;
  margin: 0;
}

主.js：

    var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");

btn.addEventListener("onClick", function() {  
  var ourRequest = new XMLHttpRequest();
  ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
  //ourRequest.open('GET', 'animals-' + pageCounter + '.json');
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var ourData = JSON.parse(ourRequest.responseText);
      renderHTML(ourData);
    } else {
      console.log("We connected to the server, but it returned an error.");
    }

  };

  ourRequest.onerror = function() {
    console.log("Connection error");
  };

  ourRequest.send();
  pageCounter++;
  if (pageCounter > 3) {
    btn.classList.add("hide-me");
  }
}
);


function renderHTML(data) {
  var htmlString = "";

    for (i = 0; i < data.length; i++) {
    htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";

    for (ii = 0; ii < data[i].foods.likes.length; ii++) {
      if (ii == 0) {
        htmlString += data[i].foods.likes[ii];
      } else {
        htmlString += " and " + data[i].foods.likes[ii];
      }
    }

    htmlString += ' and dislikes ';

    for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
      if (ii == 0) {
        htmlString += data[i].foods.dislikes[ii];
      } else {
        htmlString += " and " + data[i].foods.dislikes[ii];
      }
    }

    htmlString += '.</p>';

  }

  animalContainer.insertAdjacentHTML('beforeend', htmlString);
}

这段代码似乎不适用于我的本地机器。我尝试通过在本地机器上使用NodeJs安装 http-server 来运行它，但仍然没有乐趣！

ww3Schools.com上的另一个 JSON AJAX 代码

虽然似乎工作正常。这是 html 文件中的内联 javascript 代码。最初我认为 onReadyStateChange 是无法在 IE、FF、CH 等上运行的罪魁祸首，但是这个网站代码也有 onReadyStateChange 但它工作正常！

还是按钮单击事件处理程序无法正常工作的原因？

btn.addEventListener("onClick", function() {

我的代码不是内联的，这可能是原因吗？如果没有，我错过了什么或做错了什么？

score 0 · Accepted Answer

我通过将“div”移动到“script”标签上方来修改html文件：

索引.html：

    <!DOCTYPE html>
<html>
    <head>
        <meta name="test" content="content"/>
        <title>JSON and AJAX</title></head>
<header>
  <h1>JSON and AJAX</h1>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
 <button type="button" onclick="function()" id="btn">Fetch Elements</button>
 <div id="animal-info"> </div>
</header>

<body>
 <script src="main.js"></script>
</body>

</html>

主.js：

var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");

  btn.addEventListener("click", function() {  
  // function LoadJSON() {
      if (window.XMLHttpRequest) {
        // code for modern browsers
        var ourRequest = new XMLHttpRequest();
        } else {
        //code for IE6, IE5
        var ourRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }

      // ourRequest.onLoad = function() {    
      ourRequest.onreadystatechange = function() {
          if (this.readyState = 4 && (this.status >= 200 && this.status < 400)) {
            var ourData = JSON.parse(ourRequest.responseText);
            renderHTML(ourData);
            } else {
            console.log("We connected to the server, but it returned an error.");
          }
      };

      ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
      // ourRequest.open('GET', 'animals-' + pageCounter + '.json');
      ourRequest.send();

      ourRequest.onerror = function() {
      console.log("Connection error");
      };

      pageCounter++;
      if (pageCounter > 3) {
        btn.classList.add("hide-me");
      }
  }
);

function renderHTML(data) {
  var htmlString = "";
    for (i = 0; i < data.length; i++) {
        htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";

            for (ii = 0; ii < data[i].foods.likes.length; ii++) {
              if (ii == 0) {
                htmlString += data[i].foods.likes[ii];
              } else {
                htmlString += " and " + data[i].foods.likes[ii];
              }
            }
            htmlString += ' and dislikes ';

            for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
              if (ii == 0) {
                htmlString += data[i].foods.dislikes[ii];
              } else {
                htmlString += " and " + data[i].foods.dislikes[ii];
              }
            }   
            htmlString += '.</p>';
        }
        // animalContainer.insertAdjacentHTML('beforeend', htmlString);
        animalContainer.innerHTML=htmlString;
}

这现在有效！

我面临的唯一问题是，如果我在服务器上有更多的 json 文件，我如何根据处理的 json 文件的数量隐藏（“hide-me”）按钮，当按钮被点击一次时？

现在，如果 pageCounter 超过 3，它会隐藏按钮。

      if (pageCounter > 3) {
    btn.classList.add("hide-me");
  }

我看到的另一个问题是如果我启用“insertAdjacentHTML”，它会显示每个 json 两次。为什么会这样？

// animalContainer.insertAdjacentHTML('beforeend', htmlString);

score 0 · Accepted Answer

0

用这个：

btn.style.visibility = "隐藏";

于 2017-02-12T05:19:22.710 回答

json - XMLHttpRequest.onReadyStateChange 在 Chrome、Firefox、Internet Explorer 中不起作用

2 回答 2

Related

Reference