Why is my $.ajax not showing up in Network tab, but opening in a new tab works?

Question

Here is my AJAX code:

jQuery.ajax({url: url,
    method: 'GET',
    data: getParams,
    /*success: function (json, textStatus, jqXHR) {
        if(jQuery.active <= 1){
            waitDialog.removeWaitDialog();
        }

        createProcessButtonEvent();

        ajaxError = false;
        returnFunction(jqXHR.responseJSON);
    },*/
    complete: function(jqXHR, textStatus, errorThrown) {
        if(jQuery.active <= 1){
            waitDialog.removeWaitDialog();
        }

        createProcessButtonEvent();

        var response;
        if (typeof jqXHR.responseJSON === 'object') {
            response = jqXHR.responseJSON;
        } else {
            response = jqXHR.responseText;
        }

        if(response.errors.length == 1){ // jsonResults.message != ''
            if(!warningMessage){ //hard coded for ad designer
                jQuery('#alertMessageText').text(response.errors[0].message);
                jQuery('#alertMessage').show();
                jQuery('#waitDialog').jqmHide();
                ajaxError = true;
                return;
            }
            warningMessage.displayMessage(response.errors[0].message);
            jQuery('.popup').modal('hide');
            jQuery('.popup').not('.persist').remove();
        }
        if (response.errors.length > 1){
            for(var n = 0; n < response.errors.length; n++){
                if (response.errors[n].id == 1){ // 2005
                    window.location.href = '/login?destination=' + encodeURIComponent(window.location.pathname + window.location.search);
                }
                if (response.errors[n].id == 9500){
                    statusMessage.displayMessage(response.errors[n].message);
                }
            }
            ajaxError = true;
            //if(errorFunction){
            //  errorFunction(jsonResults);
            //}
            waitDialog.removeWaitDialog();
        }

        if (!ajaxError) {
            returnFunction(jqXHR.responseJSON);
        }
    },
    dataType: 'json',
    contentType: 'application/json'
});

I tell it to go to http://127.0.0.1/api/parameter, where the parameter is an invalid resource. My API returns in a new tab:

{"errors":[{"id":3,"message":"GET route not defined for /api/parameter"}],data:{}}

I have it returning with a 500 status code because accessing an invalid resource is an error. When I call the actual AJAX, I get jqXHR.responseJSON is null, and jqXHR.responseText is ''.

I have tried using both success: and error: blocks, and tried the complete: because it seemed like my API was resolving the call after the error block had been called, as you can see with the comments.

So I get TypeError: response is null, because my response object is never populated, and the strangest thing is that my call to parameter?parameters=here is never available to inspect in the Network

Answer 1

Since I have control over the API, I changed this specific error to return with status code 501 Not Implemented, instead of 500, and it seems to work. It looks like this was a very unique edge case.