管理 XHR 实例
当需要重复发送表单数据时，您很可能会倾向于重用 XMLHttpRequest (XHR) 对象，但在多数情况下，这并不是一个好主意，原因很多。首先，它将使代码变得复杂，因为您将不得不进行池的管理，也不得不跟踪 XHR 实例的生命周期。请记住，这些对象的状态通常是在 HTTP 请求完成后存取的，并且在不再需要任何 XHR 时，应用程序代码必须要告知管理该池的代码。此外，一些浏览器在为多重请求而重用 XHR 对象时可能也会存在问题。
为每个 HTTP 请求创建一个新的 XHR 对象也有问题，因为只要应用程序需要这些对象，浏览器就不会从内存中删除它们。如果应用程序不使用 JavaScript delete 操作符释放由 XHR 对象占用的内存，不断发送 Ajax 请求的 Web 页面就可能会导致 Web 浏览器中的内存泄漏。在这种情况下，如果在合理的时间段内没有得到响应，不妨采用一种有效策略：中止请求然后重新发送。服务器和客户机都必须做好获得不规范的 Ajax 请求和响应的准备，有些请求或响应甚至可能会丢失。如果这种方法行不通，可以使用 XMLHttpRequest 发送同步请求。
应用程序可以使用 Ajax 实现自动保存，但前提是表单应提供传统的提交按钮或使用同步请求发送数据以做处理。异步请求的不可靠性对于自动保存来说还是可以接受的，因为实现自动保存的作用只是在浏览器瘫痪或网络故障时进行部分恢复。
AutoSaveScript.js 文件包含一个函数，称为 submitAllForms()，它发送此 Web 页面所有表单的数据。这些 XHR 对象保存在一个数组内，数组为每个表单分配一个数组元素。在用 submitFormData() 发送表单数据前，submitAllForms() 函数会中止并删除前面那个自动保存表单曾使用过的请求。在成功完成了的请求上调用 abort() 不起任何作用，并且仅当浏览器收到一个对旧请求的延时响应的情况下，onreadystatechange 才被设置为一个空函数。清单 9 显示了对页面表单进行迭代的代码，以将表单数据提交给服务器。
清单 9. 提交当前页面的所有表单
function submitAllForms() {
var formArray = document.forms;
for (var i = 0; i < formArray.length; i++) {
if (autoSaveXHR[i]) {
var oldXHR = autoSaveXHR[i];
oldXHR.onreadystatechange = function() { };
oldXHR.abort();
delete oldXHR;
}
autoSaveXHR[i] = submitFormData(formArray[i]);
}
}
由 submitFormData() 返回的 XHR 对象将在下一次调用 submitAllForms() 时删除。AutoSaveScript.js 文件中的另一个函数是 setAutoSaving()，它能使用 JavaScript API 的 setInterval() 函数启用表单的自动保存功能。每隔指定的毫秒数，浏览器都会调用 submitAllForms()，直到 setAutoSaving() 被再次使用以借助 clearInterval() 清除之前调用的影响(见清单 10)。
清单 10. 启动当前页面的表单自动保存功能
function setAutoSaving(millisec) {
if (autoSaveIntervalId) {
clearInterval(autoSaveIntervalId);
autoSaveIntervalId = null;
}
if (millisec != 0)
autoSaveIntervalId = setInterval(
"submitAllForms()", millisec);
}
