XMLHttpRequest：需要使用来自 ajax 的成功和错误函数答案

【问题标题】：XMLHttpRequest: need to use success and error functions from ajaxXMLHttpRequest：需要使用来自 ajax 的成功和错误函数
【发布时间】：2016-08-25 13:39:23
【问题描述】：

当单击上传按钮时，我会运行此 ajax 发布功能，文件会上传到服务器，服务器会查看任何错误，如果有错误，它会使用 req.end(); 函数通知用户。问题是，从那以后，我搬到了XMLHttpRequest()（使用它提供的onprogress 函数），但我仍然需要使用ajax 中的那些成功和错误函数。有没有办法通过XMLHttpRequest 以某种方式使用它们？谢谢！

这是我目前的代码：

var xhrVideo = new XMLHttpRequest();
xhrVideo.open('POST', '/uploadVideo', true);
xhrVideo.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    $('.videoProgress').html(((e.loaded / e.total) * 100).toFixed(0)+'%');
  }
};
var videoForm = new FormData($('.videoUploadForm')[0]);
xhrVideo.send(videoForm);

还有ajax代码：

var videoData = new FormData($('.videoUploadForm')[0]);
$.ajax({
  url: '/uploadVideo',
  type: 'POST',
  data: videoData,
  cache: false,
  contentType: false,
  processData: false,
  mimeType:"multipart/form-data",
  success: function(data){
    switch(data){
      case '1':
        alert('Wrong Video File Extension');
        break;
      case '2':
        alert('Wrong Image File Type');
        break;
    }
  },
  error: function(data){
    alert('Something went wrong! Please reload this page')
  }
});

【问题讨论】：

标签： javascript jquery ajax node.js xmlhttprequest

【解决方案1】：

为load 和error 事件使用监听器。

为成功事件添加监听器的示例。

xhrVideo.addEventListener('load', function(e) {

注意：监听器必须在 send() 函数之前添加

另外，我建议你阅读整个article 关于使用 XMLHttpRequest()。

【讨论】：

【解决方案2】：

就个人而言，我喜欢使用 jquery ajax 而不是纯 javascript .. 所以你可以使用 xhr 和 ajax 并捕获进度和加载事件

xhr（默认：ActiveXObject 可用时 (IE)，XMLHttpRequest 否则）类型：用于创建 XMLHttpRequest 的 Function() 回调目的。可用时默认为 ActiveXObject (IE)， XMLHttpRequest 否则。覆盖以提供您自己的实现用于 XMLHttpRequest 或工厂增强功能。

在你的代码中你可以像这样使用它

$.ajax({
        xhr: function(){
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                      //Do something with upload progress
                        $('.videoProgress').html(Math.round(percentComplete)+"% uploaded");
                    }
                }
            }, false);
            xhr.upload.addEventListener("load", function(evt){
                evt.preventDefault();

            },false);
           return xhr;
        },
        // reset of your ajax code

【讨论】：