XMLHttpRequest 可以获取数据显示在网页上答案

【问题标题】：XMLHttpRequest can get data to display on webpageXMLHttpRequest 可以获取数据显示在网页上
【发布时间】：2016-02-28 16:23:44
【问题描述】：

我正在尝试从网页中检索数据，然后将其显示在我的网页上，没有什么花哨的 atm 只是显示它以便可以读取它，但是我不知道该怎么做，这就是我目前所拥有的（也很抱歉，如果我没有正确完成格式化，我还是新手）：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> Night Out In Glasgow!!</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="pull.js"></script>
</head>
<body> 
    <form action = "">
        <p><button type = "button" onclick ="getData()">Get The Data</button>
        </p>
    </form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</body>

这是我的 JS，它位于一个名为 pull.js 的单独文件中，我已在我的 HTML 中链接到该文件，希望这能消除原始帖子中的任何混淆。

    /*jslint node: true, browser: true */

    "use strict";
    /*jslint node: true, browser: true */

    "use strict";

    function getData(){
        var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST","http://ratings.food.gov.uk/OpenDataFiles/FHRS776en- GB.xml");
        xmlhttp.onreadystatechange = checkData;
        xmlhttp.send(null);
        function checkData() {
           if(xmlhttp.status == 4){   
           if(xmlhttp.status == 200){
            //We've got a response
            alert(xmlhttp.responseXML);
             }
           }
           else{
               //Somethings went wrong
               alert("Error: " + xmlhttp.status + ": " +xmlhttp.statusXML);
                  }
                }
              }

【问题讨论】：

您的 javascript 需要在 <script></script> 标记中。
这是为了这里的格式吗？如果是这样，我会记住这一点，如果它是关于实际代码的，我将它们放在不同的文件中，并使用引用 JS
您尝试过哪些不起作用的方法？你知道如何使用 Javascript 向 DOM 中插入元素吗？还是您未能从 Ajax 调用中取回数据？如果您能够使用 JQuery，它可能有助于简化您的代码。
将元素插入 DOM 我已经做了一些，但不多。我假设 AJAX 无法获取数据，但是我想知道从网页中检索数据我需要创建服务器还是可以从客户端进行？
@CallumRob - 所以</body> 之后的所有内容实际上都在 pull.js 中？如果是这样，出于可读性目的，我建议将该代码部分拆分为标题为 pull.js 或其他内容的第二个代码部分。看起来这是页面上的实际代码。

标签： javascript html ajax xmlhttprequest

【解决方案1】：

按此顺序尝试：

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","...");
xmlhttp.onreadystatechange = {
       if(xmlhttp.status == 4){   
       if(xmlhttp.status == 200){
       ...
};
xmlhttp.send();

【讨论】：

【解决方案2】：

我不确定您的情况，但同一来源政策限制通过 XMLHttpRequest 检索到的内容只能从具有不同来源的网站访问。去看看这个StackExchange answer

【讨论】：

你认为我会使用一些 PHP 来实现这一点，然后只使用我的 AJAX 与 PHP 进行通信吗？
为什么投反对票？我认为这是一个完全有效的情况，因为 OP 不包含 HTTP 响应的标头或来自控制台的任何错误报告等。由于此限制，错误可能不在应用程序中，而是在请求本身中
您的建议是正确的，我不知道您为什么投了反对票，因为我使用了它已经开始工作的 PHP 脚本。谢谢