Javascript AJAX(XMLHttpRequest)进度监控不&x27;不要和服务人员一起工作
我想将web表单转换为脱机工作。最初,我会在用户完成每个步骤后将表单信息存储在web服务器上的sql数据库中。其中一个步骤包括上传图像,为此我实现了一个进度条 在添加了一名服务人员之后,我注意到进度条不再工作(进度条将显示出来,但永远不会更新以显示上传了多少文件)。我在多个浏览器中进行了测试,以确保这不依赖于浏览器,并且在所有浏览器(chrome、firefox、edge、safari、移动版本)中都有相同的结果 这是我的ajax请求的第一部分Javascript AJAX(XMLHttpRequest)进度监控不&x27;不要和服务人员一起工作,javascript,ajax,service-worker,Javascript,Ajax,Service Worker,我想将web表单转换为脱机工作。最初,我会在用户完成每个步骤后将表单信息存储在web服务器上的sql数据库中。其中一个步骤包括上传图像,为此我实现了一个进度条 在添加了一名服务人员之后,我注意到进度条不再工作(进度条将显示出来,但永远不会更新以显示上传了多少文件)。我在多个浏览器中进行了测试,以确保这不依赖于浏览器,并且在所有浏览器(chrome、firefox、edge、safari、移动版本)中都有相同的结果 这是我的ajax请求的第一部分 $.ajax({ type: "POST"
$.ajax({
type: "POST",
url: url,
datatype: "json",
data: JSON.stringify(data),
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = getCurrentProgress(evt.loaded, evt.total);
$("#progressBarContainer .progress > .progress-bar").css({ "width": percentComplete + "%" });
$("#progressBarContainer .progress > .progress-bar .percent-complete").text(percentComplete + "%");
}
}, false);
return xhr;
}
})
下面是我的服务工作者文件中处理获取事件的代码
self.addEventListener("fetch", event => {
event.respondWith(
caches.open(staticCacheName)
.then(cache => {
return cache.match(event.request)
.then(response => {
if (response) {
return response;
}
else {
return fetch(event.request);
}
});
})
);
});
我能够找到一个解决方案,但在stackoverflow上找不到这个问题,所以我发布并回答我自己的问题。如果有人对改进或更好的解决方案有任何意见,请告诉我。我找到了答案。我需要做的是让服务人员忽略post请求。我已将我的服务人员代码更新为:
self.addEventListener("fetch", event => {
//This is the code that ignores post requests
if (event.request.method === "POST") {
return;
}
event.respondWith(
caches.open(staticCacheName)
.then(cache => {
return cache.match(event.request)
.then(response => {
if (response) {
return response; //The URL is cached
}
else {
return fetch(event.request); //Go to the network.
}
});
})
);
});
如果您正在寻找一个progressbar,它可以告诉您有多少内容已使用service worker加载到缓存存储中,这几乎是不可能的,因为SW无法访问DOM。但是你可以从另一方面来解决这个问题。请对此进行调查,还有其他问题的答案!干杯:)