javascript - xmlhttprequest 类似于ajax

Question

我正在尝试通过 XHR 请求从 input 向 PHP 发送和接收数据。我已成功创建与 PHP 的连接，而无需在 send 方法中将数据作为参数传递。

但是，如果我尝试这样做，我会收到错误。

这是JavaScript(已更新!):

function serialize(obj, prefix) {
    var str = [],
    p;
    for (p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
                v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }

    return str.join("&");
}

function xhrRequest(data, method, url, callback){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                callback(xhr.responseText);
            } else {
                callback(null);
                console.log("XHR Request Failed");
            }
        }
    }
    xhr.open(method, url, true);
    xhr.send(JSON.stringify(data));
}

// Calling xhrRequest
xhrRequest({ valueA: input.value }, "POST", "post.php", function(data){
    alert(data);
});

PHP 只是值的回显，以确保它已通过(已更新!):

if(isset($_POST["value"])){
    echo $_POST["value"];
} else {
    echo "no value set";
}

我知道您可以在 send 方法中传递这样的参数 "valueA="+ input.value ，但这似乎确实没有必要(特别是如果有多个值)。

那么，我该如何让它发挥作用呢？我可以进行哪些改进/改变？使.

抱歉，如果这看起来很明显，但不幸的是，我在普通JavaScript之前学习了jQuery。所以我正在尝试学习普通方式，并习惯 jQuery 的工作原理。

谢谢! :)

编辑:

使用@adeneo 的技术实际上起到了半作用!但是，使用更新后的 PHP，我总是收到“未设置值”。为什么值没有传递，即使我使用“valueA =”+ input.value？

Answer 1

问题是 onreadystatechange 在请求期间多次触发，您不能只使用 if/else 子句，因为它会触发 four times在状态为 4 之前(状态 0-3)。

它应该看起来像

function xhrRequest(data, method, url, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseText);
            } else {
                callback("XHR Request Failed"); // the error
            }
        }
    }

    xhr.open(method, url, true);
    xhr.send(JSON.stringify(data));
}

// Calling xhrRequest
xhrRequest({ valueA: input.value }, "POST", "post.php", function(data){
    alert(data);
});

为了正确地将对象序列化为 www-urlencoded 数据，您可以使用这个，借自 here

function serialize(obj, prefix) {
    var str = [],
        p;
    for (p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
                v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return str.join("&");
}

var data = serialize({ valueA: input.value });

xhrRequest(data, "POST", "post.php" ...

等等，或者为了方便起见，甚至将其添加到 xhrRequest 函数中。