My AJAX response is not shown in my html use Javascript

I decided to ask this question, because most of the answers that I found the programmers use JQuery instead of Javascript , I am Javascript and I did not get any similar cases, the truth seems to me that all my code is fine but unfortunately I could not show the responseText , here is my code:

<form>
        <div class="form group">
            <label for="banco">Banco</label>
            <select class="form-control" id="banco" name="banco" aria-describedby="ayuda3" required>
                <option>Banesco</option>
                <option>Provincial</option>
                <option>Venezuela</option>
                <option>Activo</option>
                <option>BOD</option>
                <option>Mercantil</option>
                <option>100% Banco</option>
            </select>
            <small id="ayuda3" class="form-text text-muted">Indique el banco desde donde realizó la recarga</small>
        </div>
        <div class="form group">
            <label for="monto">Monto de la Recarga</label>
            <input type="text" class="form-control" id="monto" name="monto" aria-describedby="ayuda5" placeholder="123456789" required>
            <small id="ayuda5" class="form-text text-muted">Indique el monto Bs.S de su recarga</small>
        </div>
        <div class="form group">
            <label for="ntransferencia">Número de Transferencia</label>
            <input type="text" class="form-control" id="ntransferencia" name="ntransferencia" aria-describedby="ayuda5" placeholder="123456789" required>
            <small id="ayuda5" class="form-text text-muted">Indique el número de referencia de la transferencia</small>
        </div>
        <div class="form group">
            <label for="fechat">Fecha</label>
            <input type="date" class="form-control" id="fechat" name="fechat" aria-describedby="ayuda6" placeholder="2018-12-12" required>
            <small id="ayuda6" class="form-text text-muted">Indique la fecha de la transferencia</small>
        </div>
        <div class="form group">
            <label for="telefono">Número de Contacto</label>
            <input type="tel" class="form-control" id="telefono" name="telefono" aria-describedby="ayuda7" pattern="[0-9]{11}" required>
            <small id="ayuda7" class="form-text text-muted">Indique el número de móvil activo para comunicarnos</small>
        </div>
        <div class="form group">
            <label for="correo">Correo Electrónico</label>
            <input type="email" class="form-control" id="correo" name="correo" aria-describedby="ayuda7" placeholder="[email protected]" required>
            <small id="ayuda7" class="form-text text-muted">Indique el correo con el cual se registró en nuestro sitio.</small>
        </div>
        <button type="submit" class="btn btn-primary" onclick="solicitarRecarga()">Recargar</button>
    </form>
</div>
<div id="recargas"></div>
<script>
//INICIO FUNCIÓN RECARGAS

function solicitarRecarga() {

  var ajaxRecarga;
  if(window.XMLHttpRequest){ajaxRecarga = new XMLHttpRequest();} 
  else {ajaxRecarga = new ActiveXObject("Microsfot.XMLHTTP");}

  var a = document.getElementById("monto").value;
  var b = document.getElementById("banco").value;
  var c = document.getElementById("ntransferencia").value;
  var d = document.getElementById("fechat").value;
  var e = document.getElementById("correo").value;
  var f = document.getElementById("telefono").value;
  var drecarga = "monto=" + a + "&banco=" + b + "&ntransferencia=" + c + "&fechat=" + d + "&correo=" + e + "&telefono=" + f;

  ajaxRecarga.onreadystatechange = function()  {
    if(this.readyState === 4 && this.status === 200) {          
        document.getElementById("recargas").innerHTML = this.responseText;}
    }
    ajaxRecarga.open("POST", "recarga.php", true);
    ajaxRecarga.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRecarga.send(drecarga); 

}
//FIN FUNCION RECARGAS
</script>

And this is my PHP file:

<?php
// Recogemos las variables

//Usuario que es el correo
$usuario = $_POST['correo'];
//Banco
$banco = $_POST['banco'];
//Monto de la recarga
$monto = $_POST['monto'];
//Número de la transferencia
$transferencia = $_POST['ntransferencia'];
//La fecha de cumpleaño para verificar si es mayor de edad
$fecha = $_POST['fechat'];
//Numero de teléfono de contacto
$telefono = $_POST['telefono'];
//Estado inicial por defecto 
$estado = 'En espera';

//////// CONEXION A LA BASE DE DATOS /////////
include 'conexion.php';
//El encabezado para darle formato al alert
include 'header.php';    

if($conexion->query("INSERT INTO recarga (ID_recarga, usuario, monto, banco, referencia, fecha, telefono, estado)VALUES(null, '$usuario', '$monto', '$banco', '$transferencia', '$fecha', '$telefono', '$estado')")) {

    echo "<div class='container mt-3 mb-3 alert alert-success' role='alert'>
  Hemos recibido su recarga satisfactoriamente, pronto será revisada por nuestros operadores, puede verificar el estado de la misma en el menú izquierdo 'Recargas'.
</div>";

} else {

    echo "No realiza la consulta";
}

//Cerramos la conexión
$conexion->close();

?>

PHP records in the database the information it receives from the form correctly, but failed to show the responseText in my html , also when I use action to the Post file and method from my form, if it shows me the div Alert Boostrap which is the answer I want to show.