Question

我编写了一个从file：//运行的html页面（不使用网络服务器）

我要在页面处理创建数据时在div中显示消息[Loading .....] 这是我的代码演示：在获取我设置的数据之前：

$("#msg").html("Loading.....");

在获取数据后，我进行了设置：

$("#msg").html("Done!");

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        function search() {
            $("#msg").html("Loading.....");
            getData();         
            $("#msg").html("Done!");
        }
        function getData() {
            var html = "";
            for (var i = 0; i < 200000; i++) {
                html += i + "<br>";
            }
            $("#data").html(html);
        }
    </script>

</head>
<body>
    <input type="button" id="btnSearch" value="Search" onclick="search(); return false;" />
    <div id="msg">Message</div>
    <div id="data"></div>
</body>
</html >

在处理javascript函数时如何显示消息？

我尝试使用ajax：

function search() {
            $("#msg").html("Loading.....");                  
            $.ajax({               
                success: function () {
                    getData();  
                    $("#msg").html("Done!");
                }
            });

        }

但是它发生了错误：

Access to XMLHttpRequest at 'file:///C:/Users/dt/Desktop/HTMLPage1.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Answer 1

实际上，此代码有两个问题。

1。尝试通过`file://`协议提出AJAX请求

从那里可以得到错误。由于用户的安全性，这样做是不正确的。

想象一下，您访问了Internet上的随机网站，它甚至可以在您计算机上查看您的所有文件，而无需征求许可或让您知道它的作用。在这种情况下，那些使用互联网的人可以告别私人生活！

所以，相反：

如果该文件位于您的服务器上，而您刚刚进行测试，则在localhost服务器上进行。
如果要让用户授予对其文件之一的访问权限，请使用文件选择器（<input type="file">）。
如果您想在未经许可的情况下访问用户的文件，请...寻找替代解决方案（网页无法执行此操作）。

2。同步数据处理

一旦解决了获取文件的问题，您的示例就会工作。但是您将无法在处理过程中更新显示。这就是为什么您的第一个示例不起作用的原因。

它也不会让其他渲染或异步JS代码运行。通常，只要您的代码不需要花费很长时间执行，就不会有问题。

但是，如果需要，您需要在处理过程中让一些预定的代码执行。

您有2个选择：

使用Web Worker进行繁重的同步操作而不会冻结站点

//your HTML file
<script>
async function search() {
    $("#msg").html("Loading.....");
    await getData();         
    $("#msg").html("Done!");
}
function getData() {
    return new Promise((rs,rj) => {
        const worker = new Worker('./worker.js')
        worker.onmessage = rs
        worker.onerror = rj
    })
        .then(data => $("#data").html(data));
}
</script>

//worker.js
var html = "";
for (var i = 0; i < 200000; i++) {
    html += i + "<br>";
}
self.postMessage(html)

将setTimeout(..., 0)放入处理代码中以使其异步并在处理时使站点可用

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        async function search() {
            $("#msg").html("Loading.....");
            await getData();         
            $("#msg").html("Done!");
        }
        async function getData() {
            var html = "";
            for (var i = 0; i < 2000000; i++) {
                html += i + "<br>";
                if(i % 10 === 0)
                    //On every 10th iteration, wait some...
                    await new Promise(rs => setTimeout(rs, 0))
            }
            $("#data").html(html);
        }
    </script>

</head>
<body>
    <input type="button" id="btnSearch" value="Search" onclick="search(); return false;" />
    <div id="msg">Message</div>
    <div id="data"></div>
</body>
</html >

Answer 2

好问题！

AJAX和XMLHTTP请求通过 HTTP协议发送消息。 HTTP是用于通过Internet发送消息的协议。您必须使用网络服务器，或至少调用本地主机，以便从客户端代码发出HTTP请求。

如果您确实只想显示“正在加载”消息，则将请求发送到本地主机至少将允许您“发送” HTTP请求。只知道您的请求将始终失败，除非您在localhost上设置了Web服务器来回答它。您可以写下“完成！”在那种情况下的ajax失败功能中：

        $.ajax({               
            success: function () {
                getData();  
                $("#msg").html("This will never show up until you set up a webserver that you called from localhost");
            }            
            fail: function () {
                getData();  
                $("#msg").html("Done! (This is showing because you called from localhost)!");
            }
        });

处理JavaScript函数时如何显示消息？

2 个答案:

1。尝试通过`file://`协议提出AJAX请求

2。同步数据处理

处理JavaScript函数时如何显示消息？

2 个答案:

1。尝试通过file://协议提出AJAX请求

2。同步数据处理

1。尝试通过`file://`协议提出AJAX请求