Llenar un select en base a otro select (usando el evento onchange)

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Registro de usuario</h1>
    
    <form>
      <select id="carrera" name="carrera" class="form-control">
        <option value="0">Elija carrera</option>
        <option value="taller1.txt">Taller 1</option>
        <option value="seguridad.txt">Seguridad informatica</option>
        <option value="diseno.txt">Diseño web</option>
      </select>
      <select id="materia" name="materia" class="form-control">
        <option>---</option>
      </select>
    </form>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here
var carrera = document.querySelector('#carrera');
var materia = document.querySelector('#materia');
carrera.onchange = mandoCarrera;

function reciboMaterias(respuesta){
  //hago mi magia
  materia.innerHTML = respuesta;
}

function mandoCarrera(){
  if( carrera.value === '0' ){
    reciboMaterias('<option>---</option>');  
    return;
  }
  
  var ajax = new XMLHttpRequest();
  ajax.open('GET', carrera.value);
  ajax.onreadystatechange = function(){
    console.log(ajax.status, ajax.readyState, ajax.responseText);
    if( ajax.status === 200 && ajax.readyState === 4 ){
      reciboMaterias(ajax.responseText);
    }
  }
  ajax.send();
  reciboMaterias('<option>cargando</option>');
}

/* Styles go here */

<option>Materia uno</option>
<option>Materia dos</option>
<option>Materia tres</option>