DistanceMatrix AJAX query on Google directions Service route returns error

Question

I am trying to get the JSON response of a DistanceMatrix AJAX call, after successful ("OK" status) of directionsService.route. The route is shown but it always return error on the route data.

var map;
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
});
directionsDisplay.setMap(map);
directionsService.route({
    origin: "Lisbon",
    destination: "Porto",
    travelMode: 'DRIVING'
}, function (response, status) {
    if (status === 'OK') {
        directionsDisplay.setDirections(response);
        $.ajax({
            url: "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=Washington,DC&destinations=New+York+City,NY&key=MyValidKeyTestedOnBrowser", //Google example
            data: {},
            success: function (data, status) { alert(data.d) },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (errorThrown != 'abort') debugger; //returns this
            },
            beforeSend: alert("before")
        })
    } else {
        window.alert('Directions request failed due to ' + status);
    }
 });
}

Why the URL from Google example is returning error? textStatusis "error".