AJAX进阶通常指的是在AJAX（Asynchronous JavaScript and XML）的使用上更深入的理解和应用。以下是一些可以提升AJAX技能的方向：
- 使用AJAX进行跨域请求
- 处理AJAX请求的错误和异常
- 实现AJAX的长轮询（Long Polling）
- 实现AJAX的短轮询（HTTP Streaming）
- 使用AJAX上传文件
- 使用AJAX下载文件
以下是实现这些功能的示例代码：
- 使用AJAX进行跨域请求：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();- 处理AJAX请求的错误和异常：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error("Error: " + xhr.status);
}
}
};
xhr.send();- 实现AJAX的长轮询：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// 重新发起请求，继续轮询
poll();
}
};
xhr.send();
function poll() {
setTimeout(function() {
xhr.open("GET", "http://example.com/data", true);
xhr.send();
}, 5000); // 轮询间隔5秒
}- 实现AJAX的短轮询（HTTP Streaming）：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/stream", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 3 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
// 注意，对于HTTP Streaming，通常需要服务器端支持chunked transfer encoding。- 使用AJAX上传文件：
var formData = new FormData();
formData.append("file", fileInputElement.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/upload", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("Upload complete.");
}
};
xhr.send(formData);- 使用AJAX下载文件：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/download", true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr