HTTP headers, sent as key-value pairs at the start of a HTTP request or response, play a pivotal role in the data exchange between client and server in the context of HTML forms and JavaScript.

Upon HTML form submission, the browser automatically sets certain HTTP headers. The Content-Type header is one such example, informing the server of the media type of the resource contained in the request body. Depending on the enctype attribute of the form, the browser assigns Content-Type as application/x-www-form-urlencoded or multipart/form-data (used for file uploads).

JavaScript allows for manual control over HTTP headers using the fetch API or XMLHttpRequest. The fetch API offers a simpler interface for setting headers. For instance, to indicate that the client anticipates a JSON response, you can set the Accept header to application/json as shown below:

fetch('https://example.com', {
  headers: {
    Accept: 'application/json',
  },
});

In contrast, XMLHttpRequest requires a more verbose approach to set headers. After creating an XMLHttpRequest object and initiating a connection using the open method, the setRequestHeader method is used to set headers.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.setRequestHeader('Accept', 'application/json');
xhr.send();

It's crucial to understand that manipulating HTTP headers allows for precise control over the data exchange process, facilitating efficient communication between client and server.