Ajax chunked 是一种通过分块传输数据的技术，可以大大提高网页加载速度和性能。传统的Ajax请求通常是使用完整的响应数据，即将整个数据包一次性传输到前端，但是对于大量数据或者慢速网络连接来说，这可能会导致严重的性能问题。而Ajax chunked则将响应数据分成多个小块，逐步传输到前端，从而在数据传输过程中可以同时进行其他操作，从而提高用户体验和页面加载速度。

举一个例子来说明Ajax chunked的原理。假设我们有一个网站，需要加载一张很大的图片。如果使用传统的Ajax请求，服务器会将整张图片的数据一次性传输到前端，因此需要等待整个图片加载完毕才能显示到网页上。然而，如果我们将这张图片的数据分成多个小块，然后逐块传输到前端，当第一个小块传输完成时，前端就可以将这部分数据展示出来，之后再逐块加载剩下的数据。

// 使用Ajax chunked请求加载大图片的示例代码
function chunkedAjax(url, chunkSize, onDataReceived, onComplete) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function() {
if (xhr.readyState === 3 && xhr.status === 200) {
// 每接收到一个数据块时调用onDataReceived回调函数
var chunk = new Uint8Array(xhr.response);
onDataReceived(chunk);
} else if (xhr.readyState === 4 && xhr.status === 200) {
// 数据全部接收完成时调用onComplete回调函数
onComplete();
}
};
xhr.open('GET', url);
xhr.setRequestHeader('Range', 'bytes=0-' + (chunkSize - 1));
xhr.send();
}
var imageChunks = [];
chunkedAjax('large_image.jpg', 1024, function(chunk) {
imageChunks.push(chunk);
}, function() {
var imageData = new Uint8Array(imageChunks.length * 1024);
var offset = 0;
for (var i = 0; i< imageChunks.length; i++) {
imageData.set(imageChunks[i], offset);
offset += imageChunks[i].length;
}
var imageBlob = new Blob([imageData], {type: 'image/jpeg'});
var imageUrl = URL.createObjectURL(imageBlob);
var img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);
});

在上面的代码中，我们通过XMLHttpRequest对象发送Ajax请求，并设置responseType为arraybuffer，以便接收二进制数据。通过设置请求头'Range'为'bytes=0-1023'，我们告诉服务器我们想要接收的数据范围是从0到1023字节之间的数据块。

当接收到一个数据块时，我们将其存储在imageChunks数组中。当所有数据块都接收完成后，我们将所有数据块拼接在一起，创建一个Uint8Array，然后将其转换成Blob对象。最后，我们使用URL.createObjectURL创建一个临时的URL，将其设置为<img>元素的src属性，从而在网页上显示图片。

通过使用Ajax chunked，我们能够逐步传输大量数据，从而提高网页的加载速度和性能。这在处理大型文件或者慢速网络连接的情况下尤为有用。同时，我们还可以利用传输数据的间隙进行其他操作，提高用户体验。