使用XHR對象的基本步驟：
(1)創建XHR對象
var xhr = new XMLHttpRequest( );
(2)監聽XHR對象的狀態改變事件
xhr.onreadystatechange = function(){
if( xhr.readyState===4){
if(xhr.status===200){ 完成且成功 }
else { 完成但失敗 }
}
}
(3)打開到服務器的連接
xhr.open(method, uri, true)
(4)發起請求消息
xhr.send( null/data )
xhr.readyState: 0 1 2 3 4
xhr.status: 0 => 200
xhr.responseText: '' => '響應主體內容'
1.使用XHR發起異步的GET請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){ //響應完成且成功
doResponse(xhr.responseText);
}else{ //響應完成但不成功
alert('響應完成但失敗！'+xhr.status);
}
}
}
xhr.open('GET','xx.php?k1=v1&k2=v2',true);
xhr.send( null );
注意：GET請求沒有請求主體，所以send(null)；若有請求數據，追加爲URI後面的查詢字符串。
舉例如下：
<h3>不間斷的成績錄入系統</h3>
學生姓名：<input id="stuname">
語文成績：<input id="chinese">
數學成績：<input id="math">
<input id="btSave" type="button" value="保存記錄">
<div id="msg"><b>記錄成功成功！</b>
新記錄在數據庫中的編號爲：<span></span>
</div>
<script>
btSave.onclick = function(){
//獲取用戶的輸入
var n = stuname.value;
var c = chinese.value;
var m = math.value;
//發起異步的GET請求，把用戶的輸入提交給服務器端的PHP頁面
//1
var xhr = new XMLHttpRequest();
//2
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){ //響應完成且成功
doResponse(xhr.responseText);
}else{ //響應完成但不成功
alert('響應完成但失敗！'+xhr.status);
}
}
}
//3
xhr.open('GET','1_score_add.php?stuname='+n+'&chinese='+c+'&math='+m,true);
//4
xhr.send( null );
}
function doResponse(txt){
console.log('開始處理服務器返回的響應數據...');
txt = parseInt(txt);
if(txt>0){
var span = document.querySelector('#msg span');
span.innerHTML = txt;
msg.style.display = 'block'; //顯示成功消息
stuname.value = ''; //清空文本框中的輸入
chinese.value = '';
math.value = '';
}
}
</script>
2.使用XHR發起POST請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){ //響應完成且成功
doResponse(xhr.responseText);
}else{ //響應完成但不成功
alert('響應完成但失敗！'+xhr.status);
}
}
}
xhr.open('POST', 'xxx.php', true); //URI無請求數據
//3.5 設置請求主體的內容類型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send( 'k1=v1&k2=v2' ); //提交請求主體，必須編碼後提交
注意：POST請求不在URI後面追加查詢字符串——請求數據放在請求主體中send()——請求主體發送前必須設置Content-Type請求頭部；且請求主體中的中文、特殊標點必須使用encodeURIComponent()函數進行編碼。
舉例：
<h3>不間斷的成績錄入系統</h3>
學生姓名：<input id="stuname"><br>
語文成績：<input id="chinese"><br>
數學成績：<input id="math"><br>
<input id="btSave" type="button" value="保存記錄">
<div id="msg">
<b>記錄成功成功！</b><br>
新記錄在數據庫中的編號爲：<span></span>
</div>
<script>
btSave.onclick = function(){
//獲取用戶的輸入
var n = stuname.value;
var c = chinese.value;
var m = math.value;
//發起異步的POST請求，把用戶的輸入提交給服務器端的PHP頁面
//1
var xhr = new XMLHttpRequest();
//2
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){ //響應完成且成功
doResponse(xhr.responseText);
}else{ //響應完成但不成功
alert('響應完成但失敗！'+xhr.status);
}
}
}
//3
xhr.open('POST','1_score_add.php',true);
//3.5 設置請求消息主體的內容類型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4
n = encodeURIComponent(n);
c = encodeURIComponent(c);
m = encodeURIComponent(m);
xhr.send( 'stuname='+n+'&chinese='+c+'&math='+m ); //POST請求消息有主體
}
function doResponse(txt){
console.log('開始處理服務器返回的響應數據...');
txt = parseInt(txt);
if(txt>0){
var span = document.querySelector('#msg span');
span.innerHTML = txt;
msg.style.display = 'block'; //顯示成功消息
stuname.value = ''; //清空文本框中的輸入
chinese.value = '';
math.value = '';
}
}
</script>