Not able to understand the the setRequestHeaders of XMLHttpRequest in CRM WebApi

Hi All,

I hada very simple requirement which is my contact details like Name,Email,Phone,Jobtitle should be populated on lead form as soon as i select the contact from parentcontactid lookup in lead form so it is clear that the code which i need to write will be bound to onchange event of the Lookup control. below is my code.

function populateDetails(executionContext)
{
var context = executionContext.getFormContext();
if (context.getAttribute("parentcontactid").getValue() != null)
{
var contactid = context.getAttribute("parentcontactid").getValue()[0].id.slice(1, -1);

var req = new XMLHttpRequest();
req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.2/contacts(" + contactid + ")?$select=emailaddress1,firstname,jobtitle,lastname,mobilephone,telephone1", true);

req.send();
req.onreadystatechange = getDetails;

}/*End of parentcontactid Check*/
}

function getDetails()
{
if (this.readyState == 4)
{
this.onreadystatechange = null;
if (this.status == 200)
{
var result = JSON.parse(this.response);
Xrm.Page.getAttribute("firstname").setValue(result["firstname"]);
Xrm.Page.getAttribute("lastname").setValue(result["lastname"]);
Xrm.Page.getAttribute("fullname").setValue(result["firstname"]+" "+result["lastname"]);
Xrm.Page.getAttribute("jobtitle").setValue(result["jobtitle"]);
Xrm.Page.getAttribute("emailaddress1").setValue(result["emailaddress1"]);
Xrm.Page.getAttribute("telephone1").setValue(result["telephone1"]);
Xrm.Page.getAttribute("mobilephone").setValue(result["mobilephone"]);
}
}
}

The above code is perfectly running fine but i have also seen below code in  many places, i just don't understand if above code is running perfectly then why do we need below code as well? i just need to know what all cases below code will be used since it is difficult to  remember. we can also see this code when we generate request from REST builder

req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");

we all know whenever the readyState changes the onreadystatechange even triggers so onreadystatechange event triggers everytime the readyState change. So if readyState is 4 which means request complete and response is ready similarly status 200 means okay but why this requestHeaders are being used in CRM WebApi? and what will happen if i don't use these headers?

Thanks in Advance!

Ishan  Sharma