I'm developing a java based web application. In my application, there are some data that needs to be fetched without page reload. So, I'm using AJAX in jquery framework.

Note: I'm using tomcat web server

$(document).ready(AjaxFunction);

function AjaxFunction(){
    
    $.ajax({
        type: "GET",
        url : "/DemoApp/sampleData.txt",
        beforeSend: function(xhr){
            xhr.setRequestHeader("some-custom-header","my-name");
        },
        //headers: { 'some-custom-header': 'myname' },
        success : function(){
            console.log("Working !!!");
        },
        complete : function(){
            setTimeout(AjaxFunction, 5000);
        }
    });
}

Actually the ajax request is successful. But when I try to inspect the request header using the chrome developer tools, I cannot able to find the Request header.

Expected behaviour: Here we can see that, Request headers is available for dropArea.html

I expect the same for sampleData.txt

Actual behaviour: Here, Request headers is not available for sampleData.txt