Javascript 类似于ajax的xmlhttprequest

我正试图通过XHR请求将数据从

输入发送到PHP。我成功地创建了到PHP的连接，而没有将数据作为
send
方法中的参数传递

但是，如果我尝试，我会收到错误

以下是JavaScript（已更新！）：

PHP只是一个值的回音，以确保它已被传递（更新！）：

我知道您可以在
send
方法中传递像这样的参数
“valueA=“+input.value
，但这似乎真的不必要（特别是在有多个值的情况下）

那么，我怎样才能让它工作呢？我可以做哪些改进/改变？制造

抱歉，如果这看起来很明显，但不幸的是，我在香草JavaScript之前就学会了jQuery。因此，我正在尝试学习普通的方法，并且习惯了jQuery的工作方式

谢谢！：）

编辑：

使用@adeneo的技术实际上是半工作！然而，使用更新的PHP，我总是会收到
“无值集”
。为什么即使在我使用
“valueA=“+input.value
”时，值也不传递
 问题在于，
onreadystatechange
在请求期间多次激发，您不能仅使用
if/else
子句，因为它将在状态为
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数据，可以使用从

问题是，
onreadystatechange
在请求过程中多次触发，您不能只使用
if/else
子句，因为它将在状态为
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数据，可以使用从

等等，甚至为了方便起见将其添加到xhrequest函数中。
这里是我很久以前写的一个脚本：

var objXMLHttp;

try{
    objXMLHttp = new XMLHttpRequest();
} catch(e){
    var xmlHttpVersions = new Array('MSXML2.XMLHTTP.6.0'
            ,'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0'
            ,'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
            ,'Microsoft.XMLHTTP');

    for(var i = 0; i < xmlHttpVersions.length && objXMLHttp == null; i++) {
        try{
            objXMLHttp = new ActiveXObject( xmlHttpVersions[i] );
        } catch(e){ 
            void(0);
        }
    }
} 

if(objXMLHttp != undefined){    
    objXMLHttp.onreadystatechange = function() {
        /*Your response handler here*/
    }        
}

这是我很久以前写的一个脚本：

var objXMLHttp;

try{
    objXMLHttp = new XMLHttpRequest();
} catch(e){
    var xmlHttpVersions = new Array('MSXML2.XMLHTTP.6.0'
            ,'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0'
            ,'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
            ,'Microsoft.XMLHTTP');

    for(var i = 0; i < xmlHttpVersions.length && objXMLHttp == null; i++) {
        try{
            objXMLHttp = new ActiveXObject( xmlHttpVersions[i] );
        } catch(e){ 
            void(0);
        }
    }
} 

if(objXMLHttp != undefined){    
    objXMLHttp.onreadystatechange = function() {
        /*Your response handler here*/
    }        
}

我只需要编写一个函数，将您的数据对象转换为一个字符串，其格式与send期望的格式相同，即
“name1=value1&name2=value2”

然后最后的代码变成

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

    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            callback(xhr.responseText);
        } else {
            callback("XHR Response Failed");
        }
    }

    xhr.send(serialize(data));
}

也可以考虑XMLHTTPRQuestOnLoad和OnError事件，如这里所描述的：

readyState会随着请求的发出而增加，这是因为每当readyState！=4即使没有错误，您也会看到您的回调收到错误。
查看此参考资料：
我只需编写一个函数，将您的数据对象转换为一个字符串，格式与send期望的格式相同，即
“name1=value1&name2=value2”

然后最后的代码变成

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

    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            callback(xhr.responseText);
        } else {
            callback("XHR Response Failed");
        }
    }

    xhr.send(serialize(data));
}

也可以考虑XMLHTTPRQuestOnLoad和OnError事件，如这里所描述的：

readyState会随着请求的发出而增加，这是因为每当readyState！=4即使没有错误，您也会看到您的回调收到错误。
查看此参考资料：
你为什么不告诉我们错误是什么？@Connum对不起，是指错误！抱歉混淆：/btw的错误是
“XHR请求失败”
为什么不告诉我们错误是什么？@Connum抱歉，是指错误！抱歉造成混淆：/btw的错误是“XHR请求失败”

我将对此进行测试！等一下：）好的，酷！它修复了反复出现的

readystatechange

警报！但是，返回的响应文本是：

未定义索引：valueA

。（查看我编辑的帖子）这是意料之中的，您发送的不是www URL编码的数据，而是一个字符串化为JSON的对象。jQuery会将对象转换为www URL编码，而本机方法不会。如何解决此问题？：）您将需要一个类似于jQuery使用的“序列化程序”。我会添加一个我会测试这个！等一下：）好的，酷！它修复了反复出现的

readystatechange

警报！但是，返回的响应文本是：

未定义索引：valueA

。（查看我编辑的帖子）这是意料之中的，您发送的不是www URL编码的数据，而是一个字符串化为JSON的对象。jQuery会将对象转换为www URL编码，而本机方法不会。如何解决此问题？：）您将需要一个类似于jQuery使用的“序列化程序”。我会添加一个我会测试它！谢谢：）我来测试一下！谢谢：）

function serialize (data) {
    var result = "";
    for (var key in data) {
        result += (encodeURIComponent(key) + "=" + encodeURIComponent(data[key].toString()) + "&");
    }
    return result.substring(0, result.length - 1);
}

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

    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            callback(xhr.responseText);
        } else {
            callback("XHR Response Failed");
        }
    }

    xhr.send(serialize(data));
}