let xhr = null; // 初始化 XMLHttpRequest 对象
function initializeXhr() {
if (window.XMLHttpRequest) { // 非 IE 浏览器或 IE7 及以上版本
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE6 或更早版本
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
console.error('Failed to create XMLHttpRequest object:', e);
}
}
}
// 构建查询字符串
function buildQueryParams() {
const firstName = document.getElementById('firstName').value;
const middleName = document.getElementById('middleName').value;
const birthday = document.getElementById('birthday').value;
return `firstName=${firstName}&middleName=${middleName}&birthday=${birthday}`;
}
// 发送 GET 请求
function sendGetRequest() {
initializeXhr();
const url = 'Get.aspx';
xhr.open('GET', url, true);
xhr.Onreadystatechange= handleResponse;
xhr.send();
}
// 发送 POST 请求
function sendPostRequest() {
initializeXhr();
const queryParams = buildQueryParams();
const url = `Post.aspx?timeStamp=${new Date().getTime()}`;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.Onreadystatechange= handleResponse;
xhr.send(queryParams);
}
// 处理响应
function handleResponse() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
XMLHttpRequest 对象支持五种不同的状态，这些状态反映了请求的不同阶段：
- 0 - 未初始化：尚未调用 send() 方法。
- 1 - 载入：已调用 send() 方法，请求已开始发送。
- 2 - 载入完成：send() 方法执行完毕，响应内容已完全接收。
- 3 - 交互：正在处理响应内容。
- 4 - 完成：响应内容处理完毕，可在客户端访问。
京公网安备 11010802041100号