原生js實現ajax請求（帶請求頭header）和資料傳參過程程式碼
一、Ajax 概述
Ajax 是 Asynchronous Javascript And XML 的簡寫
Ajax是一門技術，並不是一門語言
使用XHTML+CSS來標準化呈現
使用XML和XSLT進行資料交換及相關操作
使用XMLHttpRequest物件與Web伺服器進行非同步資料通訊
使用Javascript操作Document Object Model進行動態顯示及互動
使用JavaScript繫結和處理所有資料
優點：
頁面區域性重新整理：減少使用者等待時間，提高使用者體驗
與伺服器非同步通訊：不需要打斷使用者的操作，具有更迅速的響應能力
按需獲取資料，節約頻寬
缺點：
破壞了瀏覽器的後退機制（ajax區域性重新整理頁面，瀏覽器後退按鈕不可點）；解決方案：HTML5 直接操作瀏覽歷史
不利於搜尋引擎優化；解決方案：（待更新）
**安全問題：**Ajax技術就如同對企業資料建立了一個直接通道，這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯
核心：
**組成：**JavaScript、XMLHTTPRequest、DOM物件
通過XMLHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用JavaScript來操作DOM而更新頁面
工作原理：
相當於在使用者和伺服器之間加了一箇中間層(ajax引擎)，非同步請求資料（使使用者操作 與 伺服器響應非同步化）
並不是所有的使用者請求都提交給伺服器，像一些資料驗證（比如判斷使用者是否輸入了資料）和資料處理（比如判斷使用者輸入資料是否是數字）等都交給Ajax引擎自己來做, 只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求
對比：
傳統的JS獲取資料：使用者每觸發一個 Http 請求，都需要空閒等待響應，伺服器會返回一個完整的 HTML 頁面，每一次資料互動，都是一個新的頁面；即使是一次很小的互動，使用者也需要等待伺服器響應 及 完整的 HTML 頁面；缺點：浪費頻寬、應用的響應時間依賴於伺服器的響應時間
Ajax 突出之處：Ajax 在 Http 協議的基礎上，以非同步的方式與伺服器進行通訊
二、Ajax 的核心物件
1. XMLHtttpRequest物件 是Ajax技術 的核心
Javascript通過XMLHttpRequest物件直接與伺服器進行互動（ 請求資料，獲取資料 ）
XMLHtttpRequest物件，簡稱xhr物件，是Ajax技術 的核心，即 Ajax技術的引擎
XMLHtttpRequest物件 作為瀏覽器的內建物件，來實現傳送、接收 HTTP請求 與 響應資訊
2. xhr物件 的屬性
readyState：返回 請求的狀態（數字格式）
值有 5種，如下：
狀態 名稱 描述
0 Uninitialized 初始化狀態：XMLHttpRequest 物件已建立 或 已被 abort() 方法重置
1 Open 請求還沒有被髮送：open() 方法已呼叫，但是 send() 方法未呼叫。
2 Send 未接收到響應：Send() 方法已呼叫，HTTP 請求已傳送到 Web 伺服器
3 Receiving 所有響應頭部都已經接收到 、響應體開始接收但未完成
4 Loaded HTTP 響應已經完全接收
responseText：返回 響應體（字串格式）
此屬性表示：到目前為止接收到的響應體（不含頭部）
若沒有接收到資料，則返回空字串
readyState 值小於3時，這個屬性的值肯定是空字串
readyState 值為3時，這是屬性的值 可能是整個響應體，也可能是部分響應體
responseXML：返回的響應體（xml格式）
此屬性表示：到目前為止接收到的響應體（不含頭部）
status：由伺服器返回的 HTTP 狀態碼（數字格式）
當 readyState 小於 3 的時候讀取這一屬性會導致一個異常
常見狀態碼如下：
200：請求成功
404：沒有發現檔案、查詢或url
400~499：客戶端問題
500 ：服務端問題
statusText：由伺服器返回的 HTTP 狀態（詳細描述）
3. xhr物件 的方法
open( ) 初始化HTTP請求，但不傳送請求
語法： open(method, url, async, username, password)
method 請求方式： GET、POST 、HEAD
url 請求地址：同源策略
async 是否非同步請求：預設值為 true（可選引數）；如果這個引數是 false，請求是同步的，後續對 send() 的呼叫將阻塞，直到響應完全接收
username 、password：為 url 所需的授權提供認證資格（可選，一般不寫）
作用：
把 readyState 設定為 1
儲存供send()方法使用的請求引數，重置 XMLHttpRequest 物件，以便複用
刪除之前的請求頭、接收到的響應頭
將響應體、響應狀態碼設為預設值
send( ) 傳送 HTTP 請求（會開啟一個Web 伺服器的網路連線）
語法： send(body)
body 請求體：get請求時 body 為 null；post請求時 body 為 請求體（一個字串 或 物件），引數 body 應該由 以下幾部分組成：
之前呼叫 open( ) 時指定的 HTTP 方法、url 以及認證資格（如果有的話）
之前呼叫 setRequestHeader( ) 時指定的請求頭部（如果有的話）
傳遞給這個方法的 body 引數
作用：
把 readyState 設定成2，並 開啟一個 Web 伺服器的網路連線
接受部分響應後，send() 或 後臺執行緒 把 readyState 設定為 3
接受全部響應後，send() 或 後臺執行緒 把 readyState 設定為 4
特殊情況：
如果 readyState 不是1（也就是沒呼叫 open( ) 方法），會丟擲異常
如果 open() 引數 async 為 false，send( ) 方法會阻塞 並不會返回，直到 readyState 為 4 並且伺服器的響應被完全接收才返回
setRequestHeader() 設定請求頭
語法： setRequestHeader(name, value)
name 頭部的名稱：這個引數不應該包括空白、冒號或換行
value 頭部的值：這個引數不應該包括換行
約束：此方法設定請求頭資訊，必須在 呼叫 open( ) 之後 且 呼叫 send( ) 之前
請求頭中包含：
Host
Connection
Keep-Alive
Accept-charset
Accept-Encoding
If-Modified-Since
If-None-Match
If-Range
Range
getResponseHeader() 獲取指定請求頭
語法： getResponseHeader(name)
getAllResponseHeaders(); 獲取所有請求頭
語法： getAllResponseHeaders( )
4. xhr物件 的事件
onreadystatechange readyState 改變時 會觸發 此事件
程式碼如下：
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.btn{height:30px;width:100px;background:red;margin:10px 0;text-align:center;line-height:30px;color:#fff;}
</style>
</head>
<body>
<div class="postbtn btn">POST請求</div>
<div class="getbtn btn">GET請求</div>
</body>
<script type="text/javascript">
//post請求
document.querySelector(".postbtn").onclick= function(){
var xmlhttp = new XMLHttpRequest();
var obj = {
name: 'zhansgan',
age: 18
};
xmlhttp.open("POST", "http://192.168.1.200:8080/php/test.php", true);
xmlhttp.setRequestHeader("token","header-token-value"); // 可以定義請求頭帶給後端
xmlhttp.setRequestHeader("dingyi","header-dingyi-value");
xmlhttp.send(JSON.stringify(obj)); // 要傳送的引數，要轉化為json字串傳送給後端，後端就會接受到json物件
// readyState == 4 為請求完成，status == 200為請求陳宮返回的狀態
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
console.log(xmlhttp.responseText);
}
}
};
//get請求
document.querySelector(".getbtn").onclick= function(){
var xmlhttp = new XMLHttpRequest();
// get方法帶引數是將引數寫在url裡面傳過去給後端
xmlhttp.open("GET", "http://192.168.1.200:8080/php/test.php?name='zhansgang'&age=12", true);
xmlhttp.setRequestHeader("token","header-token-value");
xmlhttp.setRequestHeader("dingyi","header-dingyi-value");
xmlhttp.send();
// readyState == 4 為請求完成，status == 200為請求陳宮返回的狀態
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
console.log(xmlhttp.responseText);
}
}
};
</script>
</html>