Javascript 对XMLHttpRequest的一些误解

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

HTML

---

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

你不能从一个

XMLHttpRequest

实例发送多个请求

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

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

出于一些奇怪的原因，您的

req

、

el

、

resp

和

handler

变量是全局变量；并且只创建一个

XMLHttpRequest

对象。对于三个请求，您将需要其中的三个，因此将变量和初始化移到函数中（以及那些应该是

处理程序的本地变量和初始化，在函数中）

请把你的密码贴在问题里，不要贴在别的地方。是的，现在我看到了。谢谢
<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>

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');

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();
}