1. 程式人生 > >[轉]深入理解ajax系列——頭部消息

[轉]深入理解ajax系列——頭部消息

ive -type function ike 成功 form type 5.5 ebp

  每個HTTP請求和響應都會帶有相應的頭部信息,其中有的對開發人員有用。XHR對象提供了操作頭部信息的方法。本文將詳細介紹HTTP的頭部信息

默認信息

  默認情況下,在發送XHR請求的同時,還會發送下列頭部信息

技術分享圖片
Accept: 瀏覽器能夠處理的內容類型
Accept-Charset: 瀏覽器能夠顯示的字符集
Accept-Encoding: 瀏覽器能夠處理的壓縮編碼
Accept-Language: 瀏覽器當前設置的語言
Connection: 瀏覽器與服務器之間連接的類型
Cookie: 當前頁面設置的任何Cookie
Host: 發出請求的頁面所在的域
User-Agent: 瀏覽器的用戶代理字符串
Referer: 發出請求的頁面的URI
技術分享圖片

  [註意]HTTP規範將這個頭部字段拼錯了,而為保證與規範一致,也只能將錯就錯(正確拼寫應該是referrer)

技術分享圖片

設置頭部

  使用 setRequestHeader() 方法可以設置自定義請求頭部信息。這個方法接受兩個參數頭部字段的名稱頭部字段的值。要成功發送請求頭部信息,必須在調用open()方法之後且調用send()方法之前調用setRequestHeader()方法

  setRequestHeader()方法的一個常用用途是使用POST請求時,將 Content-Type 的頭部信息設置為表單提交的內容類型

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

  [註意]盡量使用自定義頭部字段名稱,不要使用瀏覽器正常發送的字段名稱,否則可能會影響服務器的響應

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

  經測試,瀏覽器無法將自定義的頭部字段添加到報文中

獲取頭部

  調用XHR對象的getResponseHeader()方法並傳入頭部字段名稱,可以取得相應的響應頭部信息。而調用 getAllResponseHeaders()方法 則可以取得一個包含所有頭部信息的長字符串

技術分享圖片
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
//異步接受響應
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(‘發生錯誤:‘ + xhr.status);
        }
    }
}
//發送請求
xhr.open(‘get‘,‘test.php‘,true);
xhr.send();    
技術分享圖片

  在PHP中,可以調用apache_request_headers()方法來獲取請求報文的頭部信息

技術分享圖片
/*
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(

[轉]深入理解ajax系列——頭部消息