404 error when trying to insert using ajax

I am trying to implement inserts via ajax on my web page. I have a .js with the following method:

    function meterCancion(idUsuario, idCancion) {
     $.ajax({
      url: "insertarCancion.php",
      data: {idusuario:idUsuario, idcancion:idCancion},
      type: "POST",
      success: function(data) {
       alert(data);
      },
      error: function(xhr, status, error) {
     alert(xhr.responseText);
    }
     });
    };

and in the same folder as that js I have the php file of the url that comes to be:

    <?php

    $idUsuario = $_POST['idusuario'];
    $idCancion = $_POST['idcancion'];
    $sql = "INSERT INTO usuario_cancion VALUES (:idUsuario, 
    :idCancion);";
    include_once __DIR__ . 'conexionBd.php';
    try {
      $con = (new ConexionBd)->getConexion();
      $snt = $con->prepare($sql);
      $snt->bindParam(':idUsuario', $idUsuario);
      $snt->bindParam(':idCancion', $idCancion);
      $snt->execute();
      $snt->nextRowset();
    } catch (PDOException $ex) {
      throw $ex;
    } finally{
     $snt = null;
     $con = null;
    }
    ?>

When I click on the web to run the js I get this error message: