如何确定 XMLHttpRequest.send() 是否有效答案

【问题标题】：how to find out if XMLHttpRequest.send() worked如何确定 XMLHttpRequest.send() 是否有效
【发布时间】：2012-06-08 05:17:15
【问题描述】：

我正在使用XMLHttpRequest 将文件从javascript 代码发送到django view。我需要检测文件是否已发送或是否发生了错误。我使用jquery 编写了以下javascript。

理想情况下，我想向用户显示文件未上传的错误消息。javascript 有什么方法可以做到这一点吗？

我试图通过从 django view 返回一个 success/failure 消息来做到这一点，将 success/failed message 设置为 json 并从 django view 发回序列化的 json。为此，我制作了 xhr.open() non-asynchronous。我试图打印xmlhttpRequest 对象的responseText。console.log(xhr.responseText) 显示

response= {"message": "success"}

我想知道的是，这是否是正确的方法。在很多文章中，我发现警告

不推荐使用 async=false

那么，有什么办法可以在保持xhr.open()异步的同时，查出文件是否已发送？

$(document).ready(function(){
   $(document).on('change', '#fselect', function(e){
            e.preventDefault();
            sendFile();
        });
});

function sendFile(){
   var form = $('#fileform').get(0);
   var formData = new FormData(form);
   var file = $('#fselect').get(0).files[0];
   var xhr = new XMLHttpRequest();
   formData.append('myfile', file);
   xhr.open('POST', 'uploadfile/', false);
   xhr.send(formData);
   console.log('response=',xhr.responseText);
}

我的django 视图从表单数据中提取文件并写入目标文件夹。

def store_uploaded_file(request):
   message='failed'
   to_return = {}
   if  (request.method == 'POST'):          
      if request.FILES.has_key('myfile'):
         file = request.FILES['myfile']
         with open('/uploadpath/%s' % file.name, 'wb+') as dest:
            for chunk in file.chunks():
               dest.write(chunk)
               message="success"
   to_return['message']= message
   serialized = simplejson.dumps(to_return)
   if store_message == "success":
      return HttpResponse(serialized, mimetype="application/json")
   else:
      return HttpResponseServerError(serialized, mimetype="application/json")

编辑：

我在 @FabrícioMatté 的帮助下完成了这项工作

xhr.onreadystatechange=function(){
       if (xhr.readyState==4 && xhr.status==200){
          console.log('xhr.readyState=',xhr.readyState);
          console.log('xhr.status=',xhr.status);
          console.log('response=',xhr.responseText);

          var data = $.parseJSON(xhr.responseText);
          var uploadResult = data['message']
          console.log('uploadResult=',uploadResult);

          if (uploadResult=='failure'){
             console.log('failed to upload file');
             displayError('failed to upload');
          }else if (uploadResult=='success'){
             console.log('successfully uploaded file');
          }
       }
    }

【问题讨论】：

xhr.readyState==4 && xhr.status==200 还不够吗？
原谅我的无知，如果django视图中的文件写入失败并且发生服务器错误（500），我可以使用xhr.readyState==4 && xhr.status==500检测到吗？
如果您的 xhr 对象返回响应，它还应该包含 status 和 readyState 属性。尝试console.loging 以确保。 =]
感谢@FabrícioMatté，我已经更新了这个问题，说明我是如何工作的。如果您可以将上述评论转换为回复，我可以接受

标签： javascript xmlhttprequest

【解决方案1】：

类似下面的代码应该可以完成这项工作：

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState === 4) {
        var response = JSON.parse(xmlhttp.responseText);
          if (xmlhttp.status === 200) {
             console.log('successful');
          } else {
             console.log('failed');
          }
      }
    }

【讨论】：

【解决方案2】：

XMLHttpRequest 对象包含status 和readyState 属性，您可以在xhr.onreadystatechange 事件中对其进行测试以检查您的请求是否成功。

【讨论】：

答案在末尾更新为工作代码 sn-p。

【解决方案3】：

XMLHttpRequest 提供了侦听在处理请求时可能发生的各种事件的能力。这包括定期进度通知、错误通知等。

所以：

function sendFile() {
   var form = $('#fileform').get(0);
   var formData = new FormData(form);
   var file = $('#fselect').get(0).files[0]
   var xhr = new XMLHttpRequest();
   formData.append('myfile', file);
   xhr.open('POST', 'uploadfile/', false);
   xhr.addEventListener("load", transferComplete);
   xhr.addEventListener("error", transferFailed);
  }

    function transferComplete(evt) {
        console.log("The transfer is complete.");
        // Do something
    }

    function transferFailed(evt) {
        console.log("An error occurred while transferring the file.");
        // Do something
    }

你可以阅读更多关于Using XMLHttpRequest的信息。

【讨论】：