Ajax 設置請求頭詳解

一、Ajax 設置請求頭解決跨域

在跨域請求時，請求頭設置是一個必要的步驟。一般情況下，Ajax 請求不帶請求頭信息。如果我們需要傳遞一些頭信息，就需要設置請求頭。Ajax 設置請求頭一般用於解決跨域請求。

跨域請求通常經過兩次請求，第一次發送一個 Option 請求，獲取服務端允許的請求方法和頭信息等，之後再發送真正的請求。為了解決跨域請求，服務器需要允許請求頭信息。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer xxxxxxx");
xhr.send();

二、Ajax 設置請求頭會被轉義不

當我們設置請求頭信息時，瀏覽器通常會自動進行編碼，跟數據傳輸時一樣。因此，即使我們設置了一些特殊字符，請求頭也不會被轉義。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Custom-Header", "Special & \"Quotes\"");
xhr.send();

三、Ajax 設置請求頭編碼

請求頭設置時，需要注意編碼問題。默認情況下，瀏覽器會對請求頭進行URL編碼。我們可以使用encodeURIComponent()方法對請求頭進行編碼，以避免瀏覽器編碼的影響。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Custom-Header", encodeURIComponent("Special & \"Quotes\""));
xhr.send();

四、Ajax 設置頭信息

在請求頭中，我們可以設置很多信息，如User-Agent頭、Host頭、Referer頭等。這些頭信息可以方便地幫助服務器了解請求者的客戶端情況，或者進行一些安全檢驗。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0");
xhr.setRequestHeader("Referer", "http://example.com");
xhr.send();

五、Ajax 添加請求頭參數

在發送請求時，我們有時需要添加一些額外的參數，以獲取更多的信息。請求頭中的參數通常以key-value的形式出現。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
const params = {
  key1: "value1",
  key2: "value2",
}
xhr.setRequestHeader("Params", JSON.stringify(params));
xhr.send();

六、Ajax 加請求頭

當我們發送多次Ajax請求時，可以使用封裝函數的方式來複用代碼。這樣可以避免重複編寫請求頭信息。我們可以使用對象的方式來封裝請求頭信息，並將其作為參數傳遞給Ajax請求函數。

代碼示例：

function ajax(options) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
  xhr.open(options.method, options.url, true);
  if (options.headers) {
    for (let key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key]);
    }
  }
  xhr.send(options.data);
}

const options = {
  method: "GET",
  url: "http://example.com/getData",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer xxxxxxxx"
  }
}

ajax(options);

七、Ajax get 請求頭

Ajax 可以通過get方式獲取服務器數據，請求頭中不加請求體參數信息；如果需要添加一些特殊的信息，同樣可以通過設置請求頭信息來實現。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
const params = {
  key1: "value1"
}
xhr.open("GET", http://example.com/getData?key1=value1, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer xxxxxxxx")
xhr.send();

八、Ajax 的請求裏面的頭信息

在Ajax 請求中，我們可以獲取請求時攜帶的頭信息。我們可以使用getAllResponseHeaders()方法來獲取所有頭信息，或者使用getResponseHeader()方法獲取指定的頭信息。

代碼示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const headers = xhr.getAllResponseHeaders();
    const contentType = xhr.getResponseHeader("Content-Type");
    console.log(headers);
    console.log(contentType);
  }
}
const params = {
  key1: "value1"
}
xhr.open("GET", http://example.com/getData?key1=value1, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer xxxxxxxx")
xhr.send();