Ayuda con combo selectivo Ajax/javascript

Hola comunidad como están? tengo un problema trabajando en mi página con un combo que debería cargar información de otro archivo en el segundo select, estoy utilizando ajax para lograr que al elegir una provincia se cargue una localidad, dejo el código para quienes puedan ayudar, desde ya muchas gracias !

código HTML

  </head>

  <body>
   <header>
   <nav>
   <a href="index.html">x</a>
   <a href="index2.html" class="active">x</a>
   </nav>
   </header>

   <section>

   <h1>Selectores dinámicos</h1>
   <select name="provincia">
   <option value="0">Elija provincia</option>
   <option value="1">Buenos Aires</option>
   <option value="2">Cordoba</option>
   <option value="3">Santa Fe</option>
   </select>
   <select name="localidad">

    </select>

   </section>

   <script src="laboratorio2.js"></script>
  </body>

</html>

código script

//variables globales
var pedido; //va a guardar el XHR

//vinculo a eventos
provincia.addEventListener('change', cargarLocalidades);

//funciones
function cargarLocalidades(){

  var idProvincia = provincia.value; //obtengo el valor del select provincia
  var url = 'ajax/localidad/'+idProvincia;
  pedido = new XMLHttpRequest(); //creo el XHR
  //me suscribo al evento load con la funcion ajaxResponse
  pedido.addEventListener('load', ajaxResponse);
  //me suscribo al evento error con la funcion ajaxError
  pedido.addEventListener('load', ajaxError);
  //abro una conexión GET utilizando la url
  pedido.open('GET', url);
  //envio el pedido
  pedido.send();
  limpiarLocalidades();
}

  // "limpio" el select de localidades
  function limpiarLocalidades(){
  localidad.innerHTML = '<option>---</option>';
  }

function dibujarLocalidades(optionsHTML){
  localidad.innerHTML = optionsHTML;
}

function ajaxResponse(){
  //valido que no haya errores de servidor
  var serverOk = pedido.status < 400;
  if(!serverOk){
   ajaxError();
  } else {
   var respuesta = pedido.ResponseText;//obtengo la respuesta de ajax
   console.log(respuesta);
   dibujarLocalidades(respuesta); //llamar a la funcion dibujarLocalidades con el HTML obtenido
  }
}

function ajaxError(){
  console.warn('ajax error');
}

archivo que consultaría el ajax

<option value="1">Ciudad Autónoma de Buenos Aires</option>
<option value="2">Banfield</option>
<option value="3">Ciudad Evita</option>
<option value="4">Devoto</option>
<option value="5">Espeleta</option>
<option value="6">Munrock</option>
<option value="7">Vicente López</option>