xmlhttprequest ähnlich Ajax

Question

Ich versuche, Daten zu senden und empfangen, die von einem input zu PHP durch eine XHR Anfrage. Es ist mir erfolgreich gelungen, eine Verbindung zu PHP ohne Daten als Parameter innerhalb der send Methode zu erstellen.

Wenn ich es jedoch versuche, erhalte ich den Fehler. Hier

ist das JavaScript (aktualisiert!):

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 nur ein Echo des Wertes ist, um sicherzustellen, dass es verabschiedet wurde (aktualisiert!):

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

Ich bin mir bewusst, dass Sie Parameter wie diese "valueA=" + input.value innerhalb der send-Methode übergeben können, aber es scheint wirklich unnötig (vor allem, wenn es mehrere Werte gibt).

Also, wie würde ich das zum Funktionieren bringen? Was sind einige Verbesserungen/Änderungen, die ich vielleicht kann? zu machen.

Entschuldigt, wenn es sehr offensichtlich scheint, aber ich lernte jQuery vor Vanille JavaScript, leider. Also versuche ich den Vanille-Weg zu lernen und bin daran gewöhnt, wie jQuery funktioniert.

Dank! :)

EDIT:

Mit Technik des @ adeneo in der Tat halb Arbeit! Mit dem aktualisierten PHP erhalte ich jedoch immer "No value set". Warum wird der Wert nicht übergeben? auch wenn ich "valueA=" + input.value verwende?

Answer 1

Das Problem ist, dass onreadystatechange Brände mehrmals während einer Anfrage können Sie nicht nur eine if/else Klausel verwenden, wie es four times ausgelöst wird, bevor der Status 4(Zustände 0-3) ist.

Es sollte wie folgt aussehen

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

Um das Objekt zu www-urlencoded Daten richtig serialisiert werden, können Sie diese benutzen, entlehnt aus 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" ... 

etc, oder sogar addieren, xhrRequest-Funktion für Bequemlichkeit.

Answer 2

Hier ist ein Skript, das ich vor langer Zeit schrieb:

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*/ 
    }   
} 

entweder die Methode ‚POST‘ Um mit einer Anfrage an den Server zu senden oder die ‚GET‘ Methode:

if(strMethod == "POST"){  
    objXMLHttp.open(strMethod, strAddr, true);  
    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
    bjXMLHttp.send(strData); 
} else { 
    objXMLHttp.open(strMethod, strAddr + strData, true); 
    objXMLHttp.send(null); 
} 

Answer 3

Ich würde nur eine Funktion schreiben, um Ihr Datenobjekt in eine Zeichenfolge zu konvertieren, die wie erwartet formatiert ist, nämlich "name1=value1&name2=value2".

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

Dann wird der endgültige Code wird

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

es auch gut sein könnte XMLHttpRequest onload zu betrachten und onerror Ereignisse wie hier beschrieben: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Die Readystate-Schritten, wie die Anforderung so gemacht wird Da Sie den Fehler jedes Mal auslösen, wenn readyState! = 4 ist, wird Ihr Rückruf immer den Fehler erhalten, auch wenn kein Fehler vorliegt. Schauen Sie sich diese Referenz an: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState