jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

要获取原生XMLHttpRequest对象，可以使用jQuery.ajax()方法的一个可选参数，即xhr。通过在ajax()方法中设置xhr参数为true，就可以获取到我们需要的原生XMLHttpRequest对象。

下面是获取原生XMLHttpRequest对象的完整攻略：

步骤一：使用$.ajax()方法.

使用$.ajax()方法时，可以将xhr参数设置为true，这样就可以获取到原生XMLHttpRequest对象。

$.ajax({
    url: 'path/to/your/file',
    xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        return xhr;
    },
    success: function(data){
        console.log('success');
    },
    error: function(error){
        console.log('error');
    }
});

步骤二：在xhr对象上监听事件

现在我们已经拿到了原生的XMLHttpRequest对象，接下来我们可以在这个对象上监听事件获取更多信息。

$.ajax({
    url: 'path/to/your/file',
    xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        xhr.addEventListener('progress', function(event) {
            console.log('progress event', event);
        }, false);
        xhr.addEventListener('load', function(event) {
            console.log('load event', event);
        }, false);
        xhr.addEventListener('error', function(event) {
            console.log('error event', event);
        }, false);
        return xhr;
    },
    success: function(data){
        console.log('success');
    },
    error: function(error){
        console.log('error');
    }
});

在这个示例中，我们监听了xhr对象的progress、load和error事件，分别在控制台输出相关的信息，可以根据需要监听其他事件。

示例一：使用原生XMLHttpRequest对象进行文件上传

var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('file', $('input[type=file]')[0].files[0]);

xhr.open('POST', '/path/to/upload', true);
xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        var progress = Math.round((event.loaded / event.total) * 100);
        console.log('Upload Progress: ' + progress + '%');
    }
};
xhr.onload = function() {
    console.log('upload complete');
};
xhr.send(data);

在这个示例中，我们创建了一个原生XMLHttpRequest对象，并利用FormData（表单数据对象）添加了一个文件。接着我们监听了xhr.upload对象的进度事件，并输出文件上传的进度，最后在上传完成时输出相应信息。

示例二：使用原生XMLHttpRequest对象读取远程文件

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://www.example.com/remote.json', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

以上示例是一个简单的文件读取操作，适用于加载远程文件。我们创建了一个原生XMLHttpRequest对象，并设置了GET方式和请求的URL地址，接着我们监听了 xhr 对象的 onreadystatechange 事件，在状态码为4以及http状态码为200时，将远程数据打印到控制台中。

这就是利用$.ajax 时获取原生XMLHttpRequest 对象的方法的完整攻略。