使用JSON的请求问题?

时间:2016-08-14 16:40:09

标签: javascript html json

我第一次尝试使用JSON。我想测试打印一个简单的" Hello"看看我是否收到任何打印声明但是每次我点击按钮时都会显示#34;请求出现问题": enter image description here enter image description here

我尝试按照我的学校指示如何做,似乎应该没有问题,但我在这里问一个问题。任何人都可以向我解释为什么我会收到此错误吗?

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lab06 - INT222_162   </title>
    <script src="lab06.js" type="text/javascript"></script> 
    <style>   
      .lab06 {width:100%; margin:auto;text-align:center;}
      .table-1 {width:900px; margin:auto; border:2px solid;}
      .table-1 td {border:1px solid; text-align:center;}
      .table-1 tr:nth-child(odd)  {background: #cccccc; color:#000000;}
      .table-1 tr:nth-child(even) {background: #ffffff; color:#000000;}
      .table-1 th {background: #00ff00;border:1px solid;}
    </style>
  </head>
  <body>
    <div class="lab06">
      <h3><mark>JSON TEST</mark></h3>
      <div id="data">
        <p><button title="ajaxButton" onclick="makeRequest();">list of Canadian Provinces &amp; Territories</button></p>
      </div>
      <footer>
        <script type="text/javascript">
          var dt=new Date(document.lastModified);   // Get document last modified date
          document.write('This page was last updated on '+dt.toLocaleString()) 
        </script>
      </footer>
    </div>
  </body>
</html>

JS:

  var httpRequest;

  function makeRequest() {
    var url = 'https://zenit.senecac.on.ca/~emile.ohan/int222/labs/lab06/provTerr.json'; 
    // make an HTTP request object

    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }

    // register a request listener
    httpRequest.onreadystatechange = showContents;
    // make the HTTP request 
    httpRequest.open('GET', url, true);
    httpRequest.send(null);
  }

  // the function that handles the server response

  function showContents() {

   //  check for response state
   //  0      The request is not initialized
   //  1      The request has been set up
   //  2      The request has been sent
   //  3      The request is in process
   //  4      The request is complete

    if (httpRequest.readyState === 4) {
      // check the respone code
      if (httpRequest.status === 200) { // The request has succeeded
        // Javascript function JSON.parse to parse JSON data

        var jsArray = JSON.parse(httpRequest.responseText);




        document.write("Helloooo");





      document.getElementById("data").innerHTML = str;
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

1 个答案:

答案 0 :(得分:1)

TL; DR

您的浏览器网址应以http://https://开头,而不是file://,它们是不同的协议。

完整解释

您尝试使用https://访问某个页面,但是您直接通过浏览器打开了该文件,这意味着您已经file://,这是一项防止脚本的安全措施从访问您的硬盘驱动器并通过互联网发送。

尝试安装本地Web服务器(如WAMP或NodeJS http-sever模块)并运行脚本,一旦您确定自己的HTTP(S)脚本应该正常工作。

附注:尝试使用Chrome调试工具(Windows上的F12和OS X上的Command + Alt + I)并检查控制台是否存在错误,这将为您节省大量时间