AJAX进阶

AJAX进阶通常指的是在AJAX（Asynchronous JavaScript and XML）的使用上更深入的理解和应用。以下是一些可以提升AJAX技能的方向：

1. 使用AJAX进行跨域请求
2. 处理AJAX请求的错误和异常
3. 实现AJAX的长轮询（Long Polling）
4. 实现AJAX的短轮询（HTTP Streaming）
5. 使用AJAX上传文件
6. 使用AJAX下载文件

以下是实现这些功能的示例代码：

1. 使用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();

2. 处理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();

3. 实现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秒
}

4. 实现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。

5. 使用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);

6. 使用AJAX下载文件：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/download", true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr