AJAX 实例在VS上实现及报错：Failed to load resource: the server responded with a status of 404 ()

最新推荐文章于 2023-02-12 16:43:25 发布

qq_51150032

最新推荐文章于 2023-02-12 16:43:25 发布

阅读量890

点赞数

本文链接：https://blog.csdn.net/qq_51150032/article/details/116707680

版权

.net 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

本次AJAX测试例子：

上面的错误主要是路径出错，要注意项目的默认路径，相对路径和绝对路径

（注意：open的文件路径和文件内容可以自行修改）

<!DOCTYPE html>
<html>
<body>

    <div id="demo">
        <h1>AJAX tset</h1>
    </div>
    <button type="button" onclick="loadDoc1()">./ajax_info.txt</button>
    <button type="button" onclick="loadDoc2()">/ajax_info.txt</button>
    <button type="button" onclick="loadDoc3()">/AJAXTXT/AJAXTXT.txt</button>
    <button type="button" onclick="document.getElementById('demo').innerHTML = 'XAJAX tset'">恢复</button>


    <script>
        function loadDoc1() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("demo").innerHTML =
                        this.responseText;
                }
            };
            xhttp.open("GET", "./ajax_info.txt", true);
            xhttp.send();
        }
        function loadDoc2() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("demo").innerHTML =
                        this.responseText;
                }
            };
            xhttp.open("GET", "/ajax_info.txt", true);
            xhttp.send();
        }
        function loadDoc3() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("demo").innerHTML =
                        this.responseText;
                }
            };
            xhttp.open("GET", "/AJAXTXT/AJAXTXT.txt", true);
            xhttp.send();
        }
    </script>

</body>
</html>

本地运行的AJAX例子（就是直接点击.html文件）：

出现错误：AJAX.html:23 GET file:///D:/javascript%20study/demo_get.asp?t=0.47891536460396633 net::ERR_FAILED

原因：访问本地.txt文件会出现跨域问题，浏览器不支持跨域

解决：需要创建虚拟的服务机运行，简单的方法就是用相应软件创建网页运行，比如使用Visual Studio 创建一个网页文件运行

步骤：

使用Visual Studio创建一个web应用，可自行选择，这边为了方便修改直接使用模板创建（这个创建的是.net framework）

(注意：使用.net core的话，静态文件比如.txt默认放在wwwroot文件里，通过“/+该文件目录下的文件路径”访问，并需要在配置文件添加app.UseStaticFiles();使用静态文件，可以修改app.UseStaticFiles(filename)修改静态文件存放路径，静态文件只能在该设置目录下访问)

2.生成的项目中选中index文件进行修改测试

3. index文件里粘贴上述代码，并在对应路径创建txt及赋予内容

注意：上述代码控件以及文件路径和文件内容可自行修改，本次代码是为了方便后面错误解释，txt文件里的内容为this is + 对应路径

实现效果：

原始（右边是按F12出现的控制台，可以用来查看错误信息等）：

变化：

点击“./ajax_info.txt”按钮会出现报错：Failed to load resource: the server responded with a status of 404 ()

GET https://localhost:44370/Home/ajax_info.txt 404

原因：”./ajax_info.txt”路径不对，跟配置信息有关系(这个配置不太会修改)

查看在网页上的路径：

（根据红框提示可查看路径）

查看本地路径：与index文件同级，但是与网页上的路劲不一致，这就会导致文件访问不了，这边不建议放在与index.vbhtml文件同级目录下，由于项目的配置文件设置问题，在这个目录下的文件路径设置会有问题

解决1修改路径：修改txt存放路径：1.可以防止在项目文件主目录中，通过”/”访问

2.可以新建文件夹存放，通过“/文件夹名字访问”

3..net core 静态文件只能放在app.UseStaticFiles(filename)设置的目录下，默认为wwwroot下

如果都正常的话，还会出错，就需要清理文件解决方案，重新生成，因为配置文件的一些配置信息没有修改

（可参照下图）

解决2修改浏览器属性（本次测试该方法未实现，可自行测试）：

在网络上查找的方法，修改浏览器的属性，使它可以跨域：

右键浏览器属性，在对应位置上添加“ --allow-file-access-from-files”（记得最好要有空格）

qq_51150032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 实例在VS上实现及报错：Failed to load resource: the server responded with a status of 404 ()

本次AJAX测试例子：（注意：open的文件路径和文件内容可以自行修改）<!DOCTYPE html><html><body> <div id="demo"> <h1>AJAX tset</h1> </div> <button type="button" onclick="loadDoc1()">./ajax_info.txt</button>
复制链接

扫一扫

专栏目录