<body>
<h1>Custom Request/Response Headers</h1>
<h2><u>At Browser</u> - </h2>
<h3>Added 2 custom request headers</h3>

<b>custom-req-header-fname:</b> Sam E.
<br>
<b>custom-req-header-lname:</b> Sultan

<hr>
<h2><u>At Server</u> - </h2>
<div id=server_output> </div>

<hr>
<h2><u>At Browser</u> - </h2>
<h2>Response Headers Received by Browser...</h2>
<div id=client_output> </div>

<script>

var reqObj;                                                                      //global var to hold request object
url = "https://workshop.sps.nyu.edu/~sultans/php/demo/4http/respHeadersCust.php"

setCustomRequestHeaders();

//=====================================================================================================
// getResponseHeaders: Obtains all HTTP response headers by performing a re-request of current page
//                     Returns all the headers as an object 
//=====================================================================================================
function setCustomRequestHeaders()
{
    reqObj = new XMLHttpRequest();
    reqObj.open('GET',url);           
                                             
    reqObj.setRequestHeader('custom-req-header-fname', 'Sam E.');
    reqObj.setRequestHeader('custom-req-header-lname', 'Sultan');

    reqObj.onreadystatechange = handleStateChange;          //define a response handler

    reqObj.send(null);
}

//=====================================================================================================
// detect the status of the response
//=====================================================================================================
function handleStateChange() 
{
    if (reqObj.readyState == 4)                             //if ready state = load complete
        if (reqObj.status == 0 || reqObj.status == 200)     //if response status = OK
            parseReturnedData();                            //call parsing of the returned data
}
//==============================================================================================
// display the response
//==============================================================================================
function parseReturnedData() 
{
    response      = reqObj.responseText                        //the response data in text format        
    responseLines = response.split('\n');                      //split all the returned lines

    lines = "";
    for (i=0; i < responseLines.length; i++)          
        lines += responseLines[i]; 

    var serverSide = document.getElementById("server_output");   //get reference to the div tag
    serverSide.innerHTML = lines;                                //output the response 



    respHeaders     = reqObj.getAllResponseHeaders();            //get all the response headers
    respHeaderLines = respHeaders.split('\n');                   //split all the returned headers
    respHeaderLines.sort();
        
    lines = "";
    for (i=1; i < respHeaderLines.length; i++)
    {
        name_value = respHeaderLines[i].split(': ')          
        lines += "<b>"+ name_value[0] +': </b>'+ name_value[1] +'<br>'; 
    }
    var clientSide = document.getElementById("client_output");   //get reference to the div tag
    clientSide.innerHTML = lines;                                //output the response headers
}

</script>
</body>
</html>