读取本地文件时 Ajax 无法正常工作答案

【问题标题】：Ajax not working when i read a local file读取本地文件时 Ajax 无法正常工作
【发布时间】：2018-04-16 14:14:29
【问题描述】：

好吧，我不能连续两天解决这个问题。这个例子在这里：http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2 在 w3schools 网站上工作得很好。但是当我在记事本++中复制并粘贴代码时。它不起作用。我已经下载了 XML 文件。比我读到的 AJAX 不支持处理本地文件。这个没看懂？？我有一个学校可以使用本地 XML 文件。当 AJAX 不支持使用本地文件时，我如何使用本地 XML 文件和 AJAX。我从助教那里得到的唯一回应是我应该使用 firefox ......但是不......它在 Chrome、Internet Explorer、Mozila、Opera 上不起作用......基本上什么都没有......

我知道这里有人问过类似的问题，但我就是无法让它发挥作用。如果有人知道如何修改这个给定的代码以在本地工作，我将不胜感激..提前致谢..

<!DOCTYPE html>
<html>
    <head>
        <script>
            function loadXMLDoc(url) {
                var xmlhttp;
                var txt, x, xx, i;
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
                        x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
                        for (i = 0; i < x.length; i++) {
                            txt = txt + "<tr>";
                            xx = x[i].getElementsByTagName("TITLE"); {
                                try {
                                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                                } catch (er) {
                                    txt = txt + "<td> </td>";
                                }
                            }
                            xx = x[i].getElementsByTagName("ARTIST"); {
                                try {
                                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                                } catch (er) {
                                    txt = txt + "<td> </td>";
                                }
                            }
                            txt = txt + "</tr>";
                        }
                        txt = txt + "</table>";
                        document.getElementById('txtCDInfo').innerHTML = txt;
                    }
                }
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
        </script>
    </head>

    <body>
        <div id="txtCDInfo">
            <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
        </div>
    </body>
</html>

【问题讨论】：

假设您在本地文件系统上运行此请求，出于安全原因，它将被阻止。您需要在 Web 服务器上运行此代码。这里要学习的第一课是不要使用 W3Schools。

标签： javascript jquery html ajax xml

【解决方案1】：

您不能使用本地文件。本地文件系统是沙箱化的，因此，例如，您不能双击电子邮件附件中的 HTML 文档，在浏览器中打开它并将您的私人文件上传到发件人的服务器。

如果你想在本地测试 Ajax，那么安装一个本地 web 服务器并通过它进行测试。

【讨论】：

我从未使用过本地网络服务器，但我会尝试
好的，我会下载 XAMPP，如果我在上面运行时遇到问题，我会在评论部分询问

【解决方案2】：

文件可以巧合地位于同一台机器上，但不能被文件系统访问。它必须由运行在该机器上的 Web 服务器访问。

因此，例如，如果您有一个 Web 服务器，该服务器从以下位置提供文件：

c:\server\web\

那么你对文件的 AJAX 请求就不会是这样的：

c:\server\web\somefile.xml

应该是这样的：

http://localhost/somefile.xml

该文件是“本地”的，因为它位于同一台计算机上。但它不是“本地”的，因为它来自 URL 而不是来自文件系统路径。出于相当明显的安全原因，浏览器不允许 JavaScript 代码访问文件系统。（想象一个世界，任何网站都可以在不询问的情况下读取您计算机上的任何文件。）

包含 JavaScript 代码的 HTML 页面以及 JavaScript 代码正在读取的文件都应该从 Web 服务器提供，而不是从文件系统打开。

【讨论】：