的 XMLHttpRequest 的不同行为与 <按钮> 相比

发布于 2024-09-11 12:03:25 字数 1502 浏览 5 评论 0 原文

考虑以下代码：

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <form>
            <button id="getInfoButton1"></button>
            <input type="button" id="getInfoButton2"></input>
        </form>
    </body>
</html>

以及附带的 JavaScript 文件：

script.js

window.onload = initAll;
var req;

function initAll()
{
    document.getElementById("getInfoButton1").onclick = getInfo;
    document.getElementById("getInfoButton2").onclick = getInfo;
}

function getInfo()
{
    req = new XMLHttpRequest();
    var URL = "index.html";
    req.open("GET", URL, true);
    req.onreadystatechange = whatsTheStatus;
    req.send(null);
}

function whatsTheStatus()
{
    if (req.readyState != 4) { return; }
    alert(req.status);
}

（我已经削减了很多代码，但这个示例仍然突出显示了错误）

问题是这样的：当您加载此按钮并单击两个按钮时，第一个按钮将显示状态 0，而第二个按钮将显示状态 200。

当然，我希望两者都显示 200，但我不知道为什么

我浏览了网络并询问了我公司的其他一些开发人员，但我们似乎找不到答案。有什么想法吗？

如果有帮助，我正在 Firefox 3.6.8 上进行测试。另外，我通过 WAMPserver 2.0 从本地主机运行它。

原文

Consider the following code:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <form>
            <button id="getInfoButton1"></button>
            <input type="button" id="getInfoButton2"></input>
        </form>
    </body>
</html>

With the accompanying JavaScript file:

script.js

window.onload = initAll;
var req;

function initAll()
{
    document.getElementById("getInfoButton1").onclick = getInfo;
    document.getElementById("getInfoButton2").onclick = getInfo;
}

function getInfo()
{
    req = new XMLHttpRequest();
    var URL = "index.html";
    req.open("GET", URL, true);
    req.onreadystatechange = whatsTheStatus;
    req.send(null);
}

function whatsTheStatus()
{
    if (req.readyState != 4) { return; }
    alert(req.status);
}

(I've pared down my code a lot, but this example still highlights the error)

The question is this:
When you load this, and click both buttons, the first one will display a status of 0, while the second one displays a status of 200.

Of course, I'm expecting both to display 200, and I have no idea why the <button> is behaving differently. It's not a terribly big deal, but I would like to maintain the same use of <button> throughout my site.

I've looked around the web and asked some other developers at my company, and we can't seem to find the answer. Any ideas?

If it helps, I'm testing on Firefox 3.6.8. Also, I'm running it from localhost via WAMPserver 2.0.

分享到QQ

分享到微博