雖然透過函式庫可以撰寫Ajax，但是了解原始的JS實作Ajax的方法會更加清楚Ajax的處理流程
程式結構
document.getElementById('btn').addEventListener('click', function () {
var result = document.getElementById('result');
var xhr = new XMLHttpRequest();//建立XMLHttpRequest物件
xhr.onreadystatechange = function () {//onreadystatechange是當通訊狀態改變時候會觸發的事件
if (xhr.readyState == 4) {//readyState為通訊狀態，4代表已取得資料
if (xhr.status == 200) {//status代表回應狀態，200代表OK
result.textContent = xhr.responseText;
return;
} else {
result.textContent = 'ERROR';
}
} else {
result.textContent = '正在處理...';
}
};
/*open方法代表初始化請求，send方法代表送出HTTP請求，通常只有在POST才使用*/
xhr.open('GET', 'https://localhost/Home/ReName?name=' + encodeURIComponent(document.getElementById('name').value), true);
xhr.send(null);
}, false);
使用XMLHttpRequest事件定義通訊處理
document.getElementById('btn').addEventListener('click', function () {
var result = document.getElementById('result');
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadstart', function () {//loadstart代表發送請求
result.textContent = '通訊中';
});
xhr.addEventListener('load', function () {//load代表請求成功
result.textContent = xhr.responseText;
});
xhr.addEventListener('error', function () {//error代表請求失敗
result.textContent = '伺服器錯誤';
});
xhr.addEventListener('loadend', function () {//loadend代表請求結束(無論是否成功)
alert('Ajax請求結束!');
})
xhr.open('GET', 'https://localhost/Home/ReName?name=' + encodeURIComponent(document.getElementById('name').value), true);
xhr.send(null);
}, false);
使用POST請求資料
document.getElementById('btn').addEventListener('click', function () {
var result = document.getElementById('result');
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadstart', function () {
result.textContent = '通訊中';
});
xhr.addEventListener('load', function () {
result.textContent = xhr.responseText;
});
xhr.addEventListener('error', function () {
result.textContent = '伺服器錯誤';
});
xhr.addEventListener('loadend', function () {
alert('Ajax請求結束!');
})
xhr.open('POST', 'https://localhost/Home/ReName');//方法改為POST
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');//表示請求資料的型態，若沒有設定content-type可能會發生資料無法正確送出
xhr.send('name=' +encodeURIComponent(document.getElementById('name').value));//因為是POST方法所以參數使用send方法傳遞
}, false);