对XMLHttpRequest的一些误解

Some misunderstanding with XMLHttpRequest

本文关键字：误解 XMLHttpRequest      更新时间：2023-09-26

我正试图弄清楚XMLHttpRequest是如何工作的。

HTML

<p>GET request: <span class="get">pending</span></p>
<p>POST request: <span class="post">pending</span></p>
<p>WEIRD request: <span class="weird">pending</span></p>

JS-

var req = new XMLHttpRequest(), 
    el, 
    resp, 
    handler;
function set(xhr, method, selector) {
    'use strict';
    handler = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            resp = xhr.responseText;
            el = document.querySelector(selector);
            el.innerHTML = JSON.parse(resp).status.toUpperCase();
            el.style.color = 'green';
            el.style.fontWeight = 'bold';
        } else if (xhr.readyState === 4) {
            el = document.querySelector(selector);
            el.innerHTML = 'Failed';
            el.style.color = 'red';
            el.style.fontWeight = 'bold';
        }
    };
    xhr.open(method, 'https://cors-test.appspot.com/test', true);
    xhr.onreadystatechange = handler;
    xhr.send();
}
set(req, 'WEIRD', '.weird');
set(req, 'GET', '.get');
set(req, 'POST', '.post');

但我不明白为什么它只改变了一个元素（需要三个）。有什么想法为什么它只为一个元素设置样式吗？

不能从单个XMLHttpRequest实例发送多个请求。

每个请求都需要一个单独的实例。

但我不明白为什么它只改变了一个元素

由于一些奇怪的原因，您的req、el、resp和handler变量是全局的；并且只创建一个XMLHttpRequest对象。对于三个请求，您将需要其中三个，因此将变量和初始化移动到函数内部（以及那些应该是handler函数本地的变量，在函数内部）！

function set(xhr, method, selector) {
    'use strict';
    var xhr = new XMLHttpRequest()
    function handler() {
        var el = document.querySelector(selector);
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var resp = xhr.responseText;
                el.innerHTML = JSON.parse(resp).status.toUpperCase();
                el.style.color = 'green';
                el.style.fontWeight = 'bold';
            } else {
                el.innerHTML = 'Failed';
                el.style.color = 'red';
                el.style.fontWeight = 'bold';
            }
        }
    }
    xhr.open(method, 'https://cors-test.appspot.com/test', true);
    xhr.onreadystatechange = handler;
    xhr.send();
}
相关文章：