javascript - ajax 代码返回 ProgressEvent 对象而不是我的模板数据

Question

我正在尝试通过添加一些 ajax 来改进一些页面上的用户体验。我有一个 ajax 请求:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/search/', true);
xhr.onload = function(data){
   document.getElementById("search-results-container").innerHTML = data; 
}
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send(form_data);

这不是从我的 Django 开发服务器给我呈现的模板。相反，我在 #search-results-container div 中得到了 [object ProgressEvent]。如果我同步提交请求，django View 会正确呈现。

我可能完全误解了the spec ，但我不应该直接从服务器获取模板数据 + http header 吗？我在这里做错了什么？

Answer 1

XHR 事件的事件处理程序是传递的事件对象。较新的浏览器支持 ProgressEvent应用程序接口(interface)。但是，这些不会为您提供请求中的数据；为此，您需要保留对 XHR 对象本身的访问权限。 .responseText 和(如果适用).responseXML 属性将在 HTTP 请求实际完成后包含您的响应内容(在您的“加载”处理程序中，它将有)。