Question

我正在试图弄清楚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');

但我无法理解为什么它只改变一个元素（需要三个）。任何想法为什么它只为一个元素设置样式？

Answer 1

您无法从单个XMLHttpRequest实例发送多个请求。

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

Answer 2

但我无法理解为什么它只改变一个元素

由于一些奇怪的原因，您的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();
}

与XMLHttpRequest有些误解

2 个答案: