consume web services with ajax

I have the following form.

@section('content')
  <div class='panel panel-default'>
    <div class='panel-heading'>agregar estudiante</div>
    <div class='panel-body'>
        <form role="form">
           <div class="form-group">
               <div>
                   <label for="inputName">Ingrese su DNI</label>
                   <input type="number" class='form-control' id="inputDni" placeholder="ingrese su DNI"/> 
                   <button type="button" class="btn btn-primary" onclick="ConsultarReniec()">CONSULTAR </button>  
                </div>
                <label for="inputName">Nombres</label>
                <input type="text" class='form-control' id="inputNombre" placeholder="ingrese Nombres"/> 
                <label for="inputName">Apellidos</label>
                <input type="text" class='form-control' id="inputApellido" placeholder="ingrese sus Apellidos"/> 
             </div>
          </form>
      </div>  
  </div>
  <script type="text/javascript">
      function ConsultarReniec(){
          var name = $('#inputDni').val();
          if(name.trim() == '' ){
              alert('Ingrese su DNI.');
              $('#inputDni').focus();
              return false;
          }else{
              $.ajax({
                  type:'POST',
                  url:'reniec',
                  data:'dni'+name,
              });
          }
        }     
  </script>
@endsection

The idea is that I must enter the DNI and make a query with AJAX to a web service, and then with the answer of the AJAX automatically fill in the fields of name and surname.

The problem is that I do not know how to use web services. The web service is from the RENIEC