[Turn] In-depth understanding of ajax series - header message

　　Every HTTP request and response comes with corresponding headers, some of which are useful to developers. XHR objects provide methods for manipulating header information. This article will introduce HTTP header information in detail

Default information

　　By default, when sending an XHR request, the following headers are also sent

Accept: the type of content the browser can handle
Accept-Charset: The character set that the browser can display
Accept-Encoding: The compression encoding that the browser can handle
Accept-Language: The language currently set by the browser
Connection: the type of connection between the browser and the server
Cookies: Any cookies set by the current page
Host: The domain where the requesting page is located
User-Agent: The browser's user-agent string
Referer: The URI of the page that made the request

　　[Note] The HTTP specification misspelled this header field, and in order to ensure consistency with the specification, it can only be wrong (the correct spelling should be referrer)

 

set header

　　Use the  setRequestHeader()  method to set custom request header information . This method accepts two parameters : the name of the header field and the value of the header field . To successfully send the request header information, you must call the setRequestHeader() method after calling the open ( ) method and before calling the send( ) method 

　　A common use of the setRequestHeader() method is to set the  Content-Type  header information to the content type submitted by the form when using a POST request

xhr.open('post','service.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('data=test123');

　　[Note] Try to use the custom header field name, do not use the field name normally sent by the browser, otherwise it may affect the response of the server

xhr.open('get','test.php',true);
xhr.setRequestHeader('myHeader','myValue');
xhr.send();    

　　After testing, the browser cannot add custom header fields to the message

 

get header

Call the getResponseHeader() method　　of the XHR object and pass in the header field name to obtain the corresponding response header information . And call  the getAllResponseHeaders() method  to get a long string containing all header information

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// receive the response asynchronously
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
             /*
             Date: Wed, 01 Mar 2017 14:00:21 GMT
            Server: Apache/2.4.9 (Win32) PHP/5.5.12
            Connection: Keep-Alive
            X-Powered-By: PHP/5.5.12
            Content-Length: 1134
            Keep-Alive: timeout=5, max=99
            Content-Type: text/html
              */
            console.log (xhr.getAllResponseHeaders ());
            console.log(xhr.getResponseHeader('keep-alive'));//timeout=5, max=99
        }else{
            alert('Error occurred:' + xhr.status);
        }
    }
}
//send request
xhr.open('get','test.php',true);
xhr.send();    

　　In PHP, you can call the apache_request_headers() method to get the header information of the request message

/*
array (size=8)
  'Host' => string '127.0.0.1' (length=9)
  'Connection' => string 'keep-alive' (length=10)
  'Upgrade-Insecure-Requests' => string '1' (length=1)
  'User-Agent' => string 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36' (length=109)
  'Accept' => string 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' (length=74)
  'Referer' => string 'http://127.0.0.1/box.html' (length=25)
  'Accept-Encoding' => string 'gzip, deflate, sdch, br' (length=23)
  'Accept-Language' => string 'zh-CN,zh;q=0.8,en;q=0.6' (length=23)
 */
var_dump(apache_request_headers(